/* 
      __          __           __   __          __   ___       ___  __       ___  __   __     ___  ___     ___     ___  __   __        
|  | /__` | |\ | / _`     /\  /__` /  ` | |    / _` |__  |\ | |__  |__)  /\   |  /  \ |__)     |  |__  \_/  |     |__  |__) /  \  |\/| 
\__/ .__/ | | \| \__>    /~~\ .__/ \__, | |    \__> |___ | \| |___ |  \ /~~\  |  \__/ |  \     |  |___ / \  |     |    |  \ \__/  |  | 
                                                                                                                                       
     ___ ___  __     /   /  __       ___  __   __              __   __          /  __   __   ___ ___            __   ___   / ___            __  
|__|  |   |  |__) . /   /  |__)  /\   |  /  \ |__)    | |__/  /  ` /  \  |\/|  /  /__` /  \ |__   |  |  |  /\  |__) |__   /   |   /\   /\  / _` 
|  |  |   |  |    ./   /   |    /~~\  |  \__/ |  \ \__/ |  \ .\__, \__/  |  | /   .__/ \__/ |     |  |/\| /~~\ |  \ |___ /    |  /~~\ /~~\ \__> 

*/

@font-face { 
  font-family: 'ApexSerifLight'; 
  src: url('apexserif_light-webfont.eot'); 
  src: url('apexserif_light-webfont.eot?iefix') format('eot'), 
       url('apexserif_light-webfont.woff') format('woff'), 
       url('apexserif_light-webfont.ttf') format('truetype'), 
       url('apexserif_light-webfont.svg#webfont') format('svg'); 
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'ApexSerifBook';
  src: url('apexserif_book-webfont.eot');
  src: url('apexserif_book-webfont.eot?iefix') format('eot'),
       url('apexserif_book-webfont.woff') format('woff'),
       url('apexserif_book-webfont.ttf') format('truetype'),
       url('apexserif_book-webfont.svg#webfontp5D0TwSq') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face { 
  font-family: GothamBook; 
  src: url("gotham-book-webfont.eot") format('eot'); 
  src: url('gotham-book-webfont.woff') format('woff'), 
       url('gotham-book-webfont.ttf') format('truetype'), 
       url('gotham-book-webfont.svg#webfontY0DNX81A') format('svg'); 
  font-weight: normal; 
  font-style: normal; 
}

.ApexSerifLight,.ApexSerifLight,.ApexSerifBook,.ApexSerifBook {
  font-weight: normal;
  font-style: normal;
}
.Gotham { font-family: 'GothamBook', 'Helvetica', 'Arial', sans-serif; }
.ApexSerifLight { font-family: 'ApexSerifLight', 'Helvetica', 'Arial', sans-serif; }
.ApexSerifBook { font-family: 'ApexSerifLight', 'Helvetica', 'Arial', sans-serif; }


.ApexSerifLight, .ApexSerifBook {
    letter-spacing: 0;
}

.ApexSerifLink {
    font-family:ApexSerifLight,Georgia;
    hover:true;
}

.ApexSerifLink:hover{
    font-family:ApexSerifBook,Georgia;
}

.showhide {
    color: #333333;
    font-size: 14px;
}

.hidden {
    display:none;
}

html,textarea{
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.1em;
}

body{
    margin:0;
    padding:0;
}

hr {
    border-style: solid;
    border-width: 1px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-style: dotted;
    border-color: #333333;
}

h1 {
    font-size: 50px;
    font-weight: normal;
}

html, input, textarea  {
    background-color: #000000;
}

.bodytextgrey, html, .about_copy{
    color: #444444;
}

.lowgrey, html{
    color: #444444;
}

.highgrey, a, input, textarea{
    color: #444444;
}

.projfooter{
    color: #333333;
}


input, textarea {
    border-width: 1px;
    border-color: #4D4D4D;
    border-style: solid;
}



img{
    border: 0;
}

a{
    text-decoration: none;
    outline: none;
	webkit-font-smoothing: antialiased;
}

.magenta , a:hover, .splash_intro, .landing_centered a, .comment_submit, .mast_email:hover{
    color:#AA0632;
}

.projectTitleHeading {
	font-size: 53px;
    font-family: ApexSerifLight,Georgia;
}

/* this controls the Large type under the top nav*/
.splash_intro{
    color:#FF881F;
	margin-top: 61px;
    margin-bottom:-14px;
    /*font-size: 62px;*/
}

a:active{
    color: #a59b86;
}

#featured_images .item{
    margin-right:10px;
    width:980px;
    text-align:center;
}

/* "margin-top" adjusts the space right above the slideshow and the large project/splash type */
/* "find out from JOSH or BRETT what // means in front of overflow and position....also i'm curious what position:relative means */
#featured_images{
    overflow: hidden;
    //position:relative;
    height:510px;
    width:980px;
    margin-top:30px;
}


#clear{
    clear: both;
}


.landing_centered img{
    margin-bottom: 6px;
}

.landing_centered .title{
    font-size:40px;
}


.landing_centered .titlebox{
    margin-bottom:0px;
    margin-top:14px;
}

.landing_centered span.ApexSerifLight{
    font-size:19px;
}


.upper{
    text-transform:uppercase;
}

#testdiv{
    width:300px;
    height:100px;
    background-color:#00FF00;
    overflow:auto;
    position:relative;
}


.xclose{
    margin-right: 15px;
    //position: absolute;
    //left: 900px;
    float:right;
    z-index:999;
}

.imagePreloader{
    background: url("../images/ajax-loader.gif") no-repeat center center #0D0D0D;
    position:absolute;
}

.biginput{
    font-size:19px;
}

.comment_submit{
    hover:true;
}

.comment_submit:hover{
    color: #FFFFFF;
}

.project_title{
    width:900px;
    margin-bottom:-14px;
	margin-top: 37px;
}

/*
Page loading animated gif 
*/
#pageLoading.loading {
    position: fixed;
    z-index: 10000;
    opacity: 0.8;
    bottom: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    background: url(../images/ajax-loader.gif) no-repeat center center;
}

.landing_hr{
    margin-bottom:19px;
}

.hoverwhite{
    hover:true;
}

.hoverwhite:hover{
    color: #FFFFFF
}

.flickrbutton{
    font-size:14px;
    margin-bottom:10px;
    margin-top:56px;
    hover:true;
    width:250px;
}

.flickrbutton:hover{
    color:white;
}

#flickricon{
    width:29px;
    height:24px;
    margin-left:12px;
}

.fadehover {
  display: block;
}

img.fade_selectoff {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}

img.fade_selecton {
	position: absolute;
	left: 0;
	top: 0;
}

/* Make the top margin the same because they are all on the same line. */
.navigation_next, .navigation_prev {
    display: block;
    width: 490px;
    height: 32px;
    background-position: 0px 0px;
}

.navigation_videos_next, .navigation_videos_prev {
    display: block;
    width: 425px;
    height: 32px;
    background-position: 0px 0px;
}

.navigation_prev {
    float: left;
    background: url(../images/prev_project_w_arrow_icon.svg) no-repeat 0 0;
}

.navigation_next {
    float: right;
    background: url(../images/next_project_w_arrow_icon.svg) no-repeat 0 0;
}

.navigation_videos_prev {
    float: left;
    background: url(../images/prev_project_w_arrow_stacked_425x64px_outlines.svg) no-repeat 0 0;
}

.navigation_videos_next {
    float: right;
    background: url(../images/next_project_w_arrow_stacked_425x64px_outlines.svg) no-repeat 0 0;
}

.navigation_videos {
    display: block;
    width: 130px;
    height: 32px;
    background-position: 0px 0px;
    float: left;
    background: url(../images/videotext_w_arrow_stacked_130x64px_outlines.svg) no-repeat 0 0;
}

.navigation_next:hover, .navigation_prev:hover, .navigation_videos_next:hover, .navigation_videos_prev:hover, .navigation_videos:hover {
    background-position: 0px -32px;
}

.project_body{
    margin-top:10px;
    margin-left:10px;
    width:980px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

#featured_blurb{
    font-size:14px;
}

.credits-link,.comments-link,.shooting-specs-link, .videos-link, .stillimages-link {
  background: url(../images/Arrow_Content_Collapsed.png) 0 1px no-repeat;
  padding-left: 1.25em;
  font-size: 14px;
}
.credits-link.expanded,.comments-link.expanded,.shooting-specs-link.expanded, .videos-link.expanded, .stillimages-link.expanded {
  background: url(../images/Arrow_Content_Revealed.png) 0 1px no-repeat;
}

.morePosts {
    color: #FF881F;
    font-size:35px;
}

/* 
                   __   __   __        ___  __  ___  __      __   __   __   __   __   __                      ___               __   __   __  
 /\  |    |       |__) |__) /  \    | |__  /  `  |  /__`    |  \ |__) /  \ |__) |  \ /  \ |  | |\ |     |\/| |__  |\ | |  |    /  ` /__` /__` 
/~~\ |___ |___    |    |  \ \__/ \__/ |___ \__,  |  .__/    |__/ |  \ \__/ |    |__/ \__/ |/\| | \|     |  | |___ | \| \__/    \__, .__/ .__/ 
                                                                                                                                              
 __        __             __      __   __                __   ___  __           ___  __   ___ 
/__` |__| /  \ |  | |    |  \    / _` /  \    |  | |\ | |  \ |__  |__)    |__| |__  |__) |__  
.__/ |  | \__/ \__/ |___ |__/    \__> \__/    \__/ | \| |__/ |___ |  \    |  | |___ |  \ |___ 

*/

#navbar_dropdown {
    position:absolute;
    background:black;
    display:none;
    top:79px;
	left: 29px;
}

#projects_dropdown_left,#projects_dropdown_right, #info_dropdown {
	float: left;
	background:black;
    border-style:solid;
    border-width:1px;
    border-color:#262626;
    overflow:auto;
    /* This height is required so the info_dropdown does not have a scrollbar. */
    max-height:510px;
    width:305px;
}

.project_dropdown_item{
    padding-left:6px;
    font-size:14px;
    padding-top:6px;
    padding-bottom:6px;
    margin:0;
    hover:true;
}
.project_dropdown_item img {
  float: left;
  margin-right: 0.5em;
}
.project_dropdown_item .text {
  float: left;
}

.project_dropdown_item:hover{
    color:white;
}

.info_dropdown_item{
    padding-left:6px;
    font-size:18px;
    margin:auto;
    hover:true;
    line-height: 52px;
}

.info_dropdown_item .image {
    float: left;
    display: block;
    background-repeat: no-repeat;
    background-position: 0 -52px;
    width: 75px;
    height: 52px;
}

.info_dropdown_item .text {
    float: left;
}

.info_dropdown_item:hover{
    color:white;
}

.info_dropdown_item:hover .image {
    background-position: 0 -4px;
}

.projects_menu_number{
    hover:true;
}

.projects_menu_number:hover{
    text-decoration:underline;
    color:white;
}

.evenitem{
    background-color:#101010;
}

.odditem{
}

#news_dropdown_inner{
    overflow:auto;
    margin-right:14px;
    padding-right:30px;
    margin-left:14px;
    margin-top:14px;
    margin-bottom:14px;
    height: 453px;
    font-size:12px;
    line-height: 1.4;
	outline:none;
}

#news_dropdown_inner a{
    text-decoration:underline;
    color: #999999;
    hover:true;
}


#news_dropdown_inner a:hover{
    color:white;
}

.category {
    text-transform: uppercase;
    font-size:18px;
    margin-top:12px;
    padding-left:13px;
    margin-bottom:7px;
}

#prevPost_preview , #nextPost_preview {
    position:absolute;
    z-index:999;
    border-style:solid;
    border-width:1px;
    border-color:#262626;
    opacity:0;
    overflow:auto;
    max-height:500px;
    width:305px;
    bottom: 62px;
}

#prevPost_preview {
    left: 5px;
    float: left;
}

#nextPost_preview {
    right: 5px;
    float: right;
}

/* 
                   ___  __   __       ___  __        __   ___                    __          __             ___          __   __   __  
 /\  |    |       |__  |__) /  \ |\ |  |  |__)  /\  / _` |__     |     /\  |\ | |  \ | |\ | / _`    \  / | |__  |  |    /  ` /__` /__` 
/~~\ |___ |___    |    |  \ \__/ | \|  |  |    /~~\ \__> |___    |___ /~~\ | \| |__/ | | \| \__>     \/  | |___ |/\|    \__, .__/ .__/ 
                                                                                                                                       
 __        __             __      __   __                __   ___  __           ___  __   ___ 
/__` |__| /  \ |  | |    |  \    / _` /  \    |  | |\ | |  \ |__  |__)    |__| |__  |__) |__  
.__/ |  | \__/ \__/ |___ |__/    \__> \__/    \__/ | \| |__/ |___ |  \    |  | |___ |  \ |___ 
                                                                                                                                                                                                                                
*/

.landing_intro{
    color:#FF881F;
	font-size:44px;
    margin-top:20px;
}

img.landing_popup_img{
    position:absolute;
    left:424px;
    top:163px;
    border-style:none;
}

ul.landing_buttons {
    font-family: GothamBook,Helvetica,Arial;
    color: #000;
    text-transform:uppercase;
    font-size:28px;
	list-style: none;
    padding: 0; 
    margin: 25px 0 0 0;
    text-align: center;
    width: 480px;
    display: inline-block;
}

ul.landing_buttons a {
	color: inherit;
	text-decoration: none;
}

ul.landing_buttons li {
    float: left;
    padding: 3px 0px;
}

ul.landing_buttons li.landing_button1 {
    background:#A70632;
    width: 212px;
    margin-right: 5px;    
}

ul.landing_buttons li.landing_button1:hover {
    background:#AFA796;
	cursor: pointer;
}

ul.landing_buttons li.landing_button2 {
	background-color: #383838;
	width: 116px;
    margin: 0px 5px;    
}

ul.landing_buttons li.landing_button2:hover {
	cursor: pointer;
}

ul.landing_buttons li.landing_button3 {
	background-color: #383838;
	width: 132px;
    margin-left: 5px;    
}

ul.landing_buttons li.landing_button3:hover {
	cursor: pointer;
}


.postitem {
    margin-top:30px;
    width:980px;
    position:relative;
}
        
.projectsDirectionDesign {
    color:#AA0632;
}

.projectsDirectionDesignHeader {
    color:#AA0632;
}
.projectsDirectionDesignHeader:hover {
    color:#AA0632;
}

.projectsPhotography {
    color:#FF881F;
}

.projectsPhotographyHeader {
    color:#FF881F;
}

.projectsPhotographyHeader:hover {
    color:#FF881F;
}

.projectsInfo {
    color:#444;
}

.projectsInfoHeader {
    color:#707070;
}
.projectsInfoHeader:hover {
    color:#707070;
}

div.stillimages { margin-top:50px; }
div.stillimages > div { margin-bottom:50px; }
div.stillimages > div > div > img { margin-top:5px; max-width: 980px; }

a.externalURL {
    color: #ff881f;           /* Colors the link when not hovered. */
    font-weight: bold;        /* Applies boldness. */
    text-decoration: none;    /* Removes default underline for all links. */
    text-transform: uppercase;/* This is often used so you have the flexibility of changing the case. */    
}

/* This applies only when the mouse hovers over the link. It overrides anything above. */
a.externalURL:hover {
    color: #fff;              /* white color */
}

/* Prevent cufon flicker. This will make only these class invisible until 
 * cufon is done rendering.
 */
.cufon-loading .project_title, 
.cufon-loading p { visibility: hidden; }