/*************************************************

F-35.ca
October 2007
BY 76design


***************************************************
    GENERIC

    */

HTML {
    font: 62.5%/160%  Arial, Helvetica, Verdana, sans-serif;
    background:#FFF;
    color:#626262;
    }

BODY {
    margin: 0px;
    padding: 0px;
    text-align: center;
    background:url(../images/header.jpg) center -50px no-repeat;
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    }

A{
    color:#333;
    text-decoration:none;
        }

A:hover{
    background:#ffee8f;
    color:#000;
    }

A.button:hover{
    background:transparent;
    color:#000;
    }

A IMG {border:none;}

.left {float:left;}
.right {float:right;}

.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { border-bottom:1px solid; }

.pagetitle{
    font-size: 140%;
    font-weight: bold;
    color: #666;
    margin-bottom: 45px;
    }


H1,H2,H3,H4,H5,H6,UL,LI, BLOCKQUOTE,IMG,SMALL {
    margin:0;
    padding:0;
    list-style:none;
}

H1 {font-size:220%;}
H2 {font-size:200%;}
H3 {font-size:180%;}
H4 {font-size:160%;}
H5 {font-size:140%;}
H6 {font-size:120%;}

.highlight {
    background:#fdf8db;
    padding:20px;
    border:solid 6px #ffee8f;
    margin:20px 0;
    }

BLOCKQUOTE {
    padding:10px;
    margin:10px 0;
    background:#f9f9f9;
    border:solid 6px #f2f2f2;
    display:block;
    }

BLOCKQUOTE SMALL {
    margin:10px 0 !important;
    font-weight:bold;
    color:#222;
    }

/*SMALL IS LATER DEFINED AGAIN */
SMALL {
    color:#000;
    font-weight:bold;
    border-bottom:solid 1px #e5e5e5;
    padding:0 0 10px 0;
    margin:0 0 15px 0;
    display:block;
    clear: both;
    line-height: 13px;
    }

SMALL A {color:#626262;}
SMALL A:hover{background:#ffee8f; color:#000;}

    /***************************************************
    TABLES
     */

TABLE{
        clear: both;
        margin:20px 0;
        width: 100%;
        padding:0;
        border-collapse: collapse;
        font-size:100%;
        }

TABLE THEAD TH {
        line-height:120%;
        }

TABLE TBODY TR {
        color:#AAA;
        }
/*
Dont think we need this.

TABLE TBODY TR:hover,
TABLE TBODY TR:hover A	{
        background:#e5e5e5;
        color:#FFF;
        }
        */

TABLE THEAD TH {
        padding: 8px 3px;
        vertical-align:middle;
        color:#b32017;
        font-weight:bold;
        border-bottom: 1px solid #545454;
        }
TABLE TBODY TH {
        border-bottom: 1px solid #c8c8c8;
        color:#626262;
        font-size:90%;
}
TABLE TR TD {
        font-size: 100%; line-height: 140%;
        margin:0;
        padding:2px 5px;
        border-bottom: 1px solid #c8c8c8;
        }

/***************************************************
    FORMS
     */
LABEL {
        display:block;
        float:left;
        width:180px;
        font-weight:bold;
        color:#b32017;
        }

FORM {
        padding:10px;
        }

INPUT,
TEXTAREA {
        border: 1px solid #c8c8c8;
        color: #999;
        font-size: 110%;
        margin:2px 0;
        }

/*seriously - why is text area font always bigger */
TEXTAREA {
    font-size:100%;
    }

INPUT:hover,
TEXTAREA:hover {
    border:solid 1px #000;
    }

INPUT:focus,
TEXTAREA:focus{
    color:#000;
    border:solid 1px #b32017;
    }

/***************************************************
    WRAPPER
     */
#wrapper {
    width:980px;
    margin: 0px auto;
    text-align:left;
    }

#main{
    overflow: hidden;
    height: 1%;
    }


/***************************************************
    PAGE SPECIFIC STYLES
    ----------------------------------------------------------------------
    The general styles for individual pages. that dont
    affect other sections.
    ----------------------------------------------------------------------

    */
/***************************************************
        HOMEPAGE
        */
#content .wp-post-image{
    margin:10px;
    float:right;
    }
.alignright{
    float:right;
    margin: 0 0 15px 15px;
    }
.alignleft{
    float:left;
    margin: 0 15px 15px 0;
    }
/***************************************************
        VIDEO PLAYER
        */
BODY#video-player {
    background:url(../images/video-player-header.jpg) center 65px no-repeat;
    width:980px;
    margin: 0px auto;
    }

#video-player #header {
    margin:0;
    }

#video-player #video {
    text-align:center;
    margin:0px 0 50px 0;
    }


/***************************************************
        IMAGE GALLERY
        */
#content-page #content,
#video-list #content,
#image-gallery #content {
    width:720px;

    }
#image-gallery #content  H2 {
    margin-bottom:20px;
}

.image {
    float:left;
    width:240px;
    margin:10px 0;
    padding:10px 0;
    border-top:solid 1px #e5e5e5;
    text-align:center;
    }

#content .image A:hover {
    background:none;
    }

#content .image A.high-res {
    background:url(../images/icon-high-res.gif) 0 3px no-repeat;
    padding:0 0 0 20px;
    }

#content .image A.high-res:hover {
    background:#ffee8f url(../images/icon-high-res.gif) 0 3px no-repeat;
    color:#b32017;
    }


/***************************************************
    HEADER
    ----------------------------------------------------------------------
    The header is essentially empty. It only holds the logo.
    The page background is attached to the BODY so we use
    the header div to space the content down.
    ----------------------------------------------------------------------

    */

#header {
    margin:0 0 340px 0;
    }

#header #logo {
    margin:10px 40px;
    }

#header A:hover {
    background:none;
    }

/***************************************************
    LEFT COLUMN
    ----------------------------------------------------------------------
    Always holds the side menu but also has other elements
    which is why we define it seperately.
    ----------------------------------------------------------------------

    */

#left-column {
    float:left;
    margin:0 20px 0 0;
    width:139px;
    border-right: solid 1px #ccc;
    padding-right: 10px;
    }

 #left-column A IMG {
     display:block;
     margin:10px 0;
    clear:both;
    }




/***************************************************
    SIDEMENU
    */
 #sidemenu {

    }

#sidemenu LI {
    list-style:none;
    padding: 0;
    margin:0;
    border-bottom: solid 1px #ddd;
    height: 1%;
    vertical-align: top;
    }

#sidemenu LI UL {
    margin-left: 15px;
    margin-bottom: 5px;
    border-left: solid 1px #ddd;
    }
#sidemenu LI UL LI.last {
    border-bottom: none;
    }

#sidemenu LI A,
#language{
    font-size:120%;
    color:#464646;
    text-decoration:none;
    font-weight:bold;
    padding:6px 10px;
    display:block;
    }

#sidemenu LI A:hover {
    color:#000;
    }




 /***************************************************
    RIGHT COLUMN
     */
#right-column {
    float:left;
    width:180px;
    color: #404040;
    font-size: 110%;;
    }


/* generic widget style */
.widget{
    margin-bottom: 15px;
    background: #ddd url(../images/widget-header.gif) 0 0 repeat-x;
    border: solid 1px #bdbdbd;
    border-top: solid 1px #444;
    }
.widget h2{
    color: #fff;
    font-weight: bold;
    margin: 0;
    padding: 9px;
    font-size: 14px;
    background: ;
    }
.widget ul{
    margin: 8px 10px 8px 10px;
    }
.widget li{
    background: url(../images/widget-bullet.gif) 0 6px no-repeat;
    padding-left: 12px;
    margin-bottom: 3px;
    }
.widget a {
    color:#404040;
    }
.widget a:hover {
    color:#000;
    background-color:#ffffff;
    }


/* rss widget style */
#rss-widget a{
    height: 32px;
    padding-left: 40px;
    background: url(../images/widget-rss.gif) 0 0 no-repeat;
    width: 50%;
    }

.widget_f35_on_youtube,
.widget-button{
    padding: 4px;
    border: solid 1px #222;
    background: #646464 url(../images/widget-header.gif) 0 0 repeat-x;
    }
.widget_f35_on_youtube a,
.widget-button a{
    display: block;
    color: #fff;
    }
.widget_f35_on_youtube a:hover,
.widget-button a:hover{
    background-color: transparent;
    color: #ccc;
    }

.widget_f35_on_youtube a{
    min-height:32px;
    height:auto !important;
    height:32px;
    padding-left: 40px;
    background: url(../images/widget-youtube.gif) 0 0 no-repeat;
    width: 50%;
    }
.widget_f35_on_youtube a:hover{
    background: url(../images/widget-youtube.gif) 0 0 no-repeat;
    }


/* twitter widget style */
.widget_twitter h2{
    background: url(../images/icon-twitter.gif) 5px 7px no-repeat;
    padding-left: 28px;
    }
.widget_flickr_sidebar h2{
    background: url(../images/icon-flickr.gif) 5px 7px no-repeat;
    padding-left: 28px;
    text-align: left;
    }

.widget_twitter li{
    background: none;
    padding: 0 0 5px 0;
    margin: 0 0 8px 0;
    border-bottom: solid 1px #bdbdbd;
    }
.widget_twitter a.timesince{
    color: #a4a4a4;
    }

.widget_twitter a#follow,
.widget_flickr_sidebar #flickr a{
    display: block;
    background: url(../images/more.gif) 0 0 no-repeat;
    width: 160px;
    padding-left: 9px;
    height: 26px;
    line-height: 26px;
    position: absolute;
    bottom: 5px; left: 4px;
    font-weight: bold;
    color: #666;
    text-align: left;
    }
.widget_twitter a#follow:hover,
.widget_flickr_sidebar #flickr a:hover{
    color: #000;
    }

.widget_twitter,
.widget_flickr_sidebar{
    padding-bottom: 30px;
    position: relative;
    }

/* flickr widget style */
.widget_flickr_sidebar{
    text-align: center;
    }

.widget_flickr_sidebar a img{
    border: solid 1px #fff;
    width:75px;
    height:75px;
    }
.widget_flickr_sidebar a:hover img{
    border: solid 1px #333
    }
.widget_flickr_sidebar .flickr-thumb{
    margin-left: 5px;
    }

.widget_flickr_sidebar .flickr-thumb a:hover{
    background-color: transparent;
    }
.widget_flickr_sidebar a:hover img{
    border: solid 1px #333;
    background-color:none transparent;
    }


/***************************************************
    CONTENT
    ----------------------------------------------------------------------
    Redefining any styles that may have been overwritten.
    ----------------------------------------------------------------------
     */
#pagenav{
    background-color:#efefef;
    padding:10px 0;
}

#content {
    width:550px;
    float:left;
    line-height:150%;
    margin:0 20px 0 0;
    font-size:140%;
    }

#content H1{
    font-size:220%;
    margin:20px 0 0 0;
    color:#333;
    }

H2{
    font-size:190%;
    margin:0 0 5px 0;
    color:#333;
    font-weight:100;
    line-height:100%;
    font-family:Helvetica,Arial,sans-serif;
    }

H3 {
    font-size:150%;
    margin:10px 0 0 0;
    }
#content H4 {
    font-size:130%;
    margin:10px 0;
    }

#content H5 {
    font-size:120%;
    margin:10px 0;
    }

#content H6 {
    font-size:110%;
    margin:10px 0;
    }

#content UL,
#content OL {
    padding:0 0 0 20px;
    margin:10px 0;
    }

#content OL {
    margin:10px 20px;
    }

#content UL LI {
    background:url(../images/bullet.gif) 0 9px no-repeat;
    padding:0 0 0 16px;
    }

#content OL LI {
    list-style:upper-roman;
    }


#content IMG {
    border:solid 6px #f2f2f2;
    }
#content IMG.pdf{
    border:none;
    }
#content A:hover IMG {
    border:solid 6px #ffee8f;
    }

/***************************************************
    HOMEPAGE � POSTS
        ----------------------------------------------------------------------
    These styles may apply to more then just then just the
    homepage it really depends on how we integrate with WP.
    Adjust these styles accordingly.
    ----------------------------------------------------------------------
     */
.post {
    color: #666;
    margin-bottom: 65px;
    }

.post-title{
    font-size: 26px;
    margin: 0 0 .75em 0;
    line-height: 1.20em;
    font-weight: normal;
    }
.post-title a{
    color: #AB2E32;
    }

.post-date{
    display: block;
    padding: 0 0 4px 0;
    margin-bottom: 8px;
    color: #666;
    font-size: 11px;
    }

.post-categories{
    font-size: 80%;
    }
.post-categories a{
    text-decoration: underline;
    }

.post-edit-link{
    font-size: 11px;
    background: url(../images/icon-pencil.gif) 4px 1px no-repeat;
    padding-left: 18px;
    text-decoration: none;
    color: #999;
    }
.post-edit-link:hover{
    background: url(../images/icon-pencil.gif) 4px 1px no-repeat;
    color: #000;
    }


#content UL.postmetadata {
    border-top:solid 1px #f3f3f3;
    margin:10px 0 50px 0;
    padding:10px 0 0 0;
    overflow: hidden;
    height: 1%;
    }

#content UL.postmetadata LI {
    float:left;
    margin:0;
    padding:0;
    }

p{
    margin:10px 0;
    }

/***************************************************
    POST META DATA
    ----------------------------------------------------------------------
    Because this blog does not include comments, the post
    meta data is only the social media links. We will likely
    have to tweak this to integrate into a WP plugin.
    ----------------------------------------------------------------------
    */

#content .postmetadata LI {
    /*override */
    background:none;
    }

.postmetadata LI A {
    display:block;
    color:#c4c4c4;
    font-size:80%;
    }

.postmetadata LI A:hover  {
    color:#000;
    }


#content UL.postmetadata LI.digg A{background:url(../images/icon-digg.gif) left 3px no-repeat;}
#content UL.postmetadata LI.reddit A{background:url(../images/icon-reddit.gif) left 3px no-repeat;}
#content UL.postmetadata LI.trackback A{background:url(../images/icon-trackback.gif) left 3px no-repeat;}
#content UL.postmetadata LI.delicious A{background:url(../images/icon-delicious.gif) left 3px no-repeat;}
#content UL.postmetadata LI.newsvine A{background:url(../images/icon-newsvine.gif) left 3px no-repeat;}


#content UL.postmetadata LI.digg A:hover{background:url(../images/icon-digg.gif) left -19px no-repeat;}
#content UL.postmetadata LI.reddit A:hover{background:url(../images/icon-reddit.gif) left -19px no-repeat;}
#content UL.postmetadata LI.trackback A:hover{background:url(../images/icon-trackback.gif) left -19px no-repeat;}
#content UL.postmetadata LI.delicious A:hover{background:url(../images/icon-delicious.gif) left -19px no-repeat;}
#content UL.postmetadata LI.newsvine A:hover{background:url(../images/icon-newsvine.gif) left -19px no-repeat;}

/***************************************************
    VIDEO PAGE  � POSTS
        ----------------------------------------------------------------------
    The class "post" was not used in the video listing - though
    arguably it should be - this area will have to be tweaked to
    accomodate WP.
    ----------------------------------------------------------------------
     */


#video-list #list{
    margin: 0;
    padding: 0;
    }

#list h2{
    margin: 0 0 5px 0;
    }

#list small{
    font-size: 11px;
    }

#video-list #list LI {
    clear:both;
    background:url(../images/video-shadow.jpg) 0 0 repeat-x;
    padding:10px 0 20px 0;
    overflow: hidden; height: 1%;
    }

#video-list #list LI LI {
    background:none;
    padding:0 0 0px 0;
    }

#video-list #list .thumbnail {
    width:220px;
    float:left;
    margin:0 30px 0 0;
    font-size:80%;
    line-height:140%;
    }
#video-list #list .thumbnail H4 {
    font-size:110%;
    margin:8px 0;
    }

#video-list .text {
    width:440px;
    float:left;
    }
/***************************************************
    TEXT
    ----------------------------------------------------------------------
    We sepearte these styles as they apply to other pages
    in addition to the listing. We may want to use the "post"
    class for this. Depends how we set up the WP.
    ----------------------------------------------------------------------

    */

.text { width:100%;}
.text H2{
    margin:30px 0 10px 0 ;
    padding:0;
    }

 .text UL LI A {
    font-weight:bold;
    color:#b32017;
    background:url(../images/bullet-video.gif) 0 3px no-repeat;
    padding:0 0 0 20px;
    }

 .text UL LI A SPAN {
    color:#464646;
    }

 .text UL LI A:hover{
    background:#ffee8f url(../images/bullet-video.gif) 0 3px no-repeat;
    color:#b32017;
    }
#content .bandwidth LI {
    /*override */
    background:none;
    }

#content ul.bandwidth{
    margin: 0;
    padding: 0;
    }

 /***************************************************
    NAVIGATION (class)
    ----------------------------------------------------------------------
    The previous/next buttons on each post/video.
    ----------------------------------------------------------------------

    */
.navigation{
    float: right;
    font-size: 80%;
    overflow: hidden;
    height: 1%;
    }

.navigation A{
    font-weight:bold;
    }

 .navigation A:hover{
    background:#ffee8f;
    color:#b32017;
    }

 .navigation .right A{
    margin:0 0 0 20px;
    }

/***************************************************
    IMAGE GALLERY
    */
#image-gallery .fg-clear{
    clear: none;
    overflow: hidden;
    height: 1%;
    }

    /*
#image-gallery div.flickr-thumb {
    margin: 0;
    padding: 0;
    height: auto;
    width: auto;
    float: none;
    display: inline;
    }
     */

 .page .addthis_button{
    margin: 15px 0;
    display: inline-block;
    }

#image-gallery .flickr-thumb{
    _zoom: 1;
    _margin: 0;
    _padding: 0;
    }

#image-gallery .flickr-gallery {
    padding: 0 0 10px 0;
    overflow: hidden;
    height: 1%;
    }

#image-gallery .flickr-gallery-next {
    _margin-right: 15px;
    }

.flickr-gallery-next,
.flickr-gallery-prev{
    display: inline-block;
    padding: 10px 0;
    }

#image-gallery img.photo{
    display: block;
    height:75px;
    width:75px;
    }

#flightbox-meta{
    margin-top: 5px;
    }



/***************************************************
    FOOTER
     */

#footer {
    margin-top: 20px;
    border-top: solid 1px #ccc;
    position: relative;
    padding-top:20px;
    margin: 0;
    }

#footer P {
    float:right;
    padding:4px;
    margin:0 5px;
    white-space: nowrap;
    }

#footer UL {
    overflow:hidden;
    text-align:center;
    }

#footer LI {
    list-style:none;
    display:inline;
    padding:4px;
    margin:0 5px;
    }

#footer LI A{
    color: #9d9d9d;
    text-decoration:none;
    }

#footer LI A:hover {
    background:#ffee8f; color:#000;
    }

/***
TB_ajaxContent
*/

#TB_ajaxContent {
    text-align:center;
}