/*---------------------------------------------------------------------     
    I M P O R T S
---------------------------------------------------------------------*/

@import url(reset.css);

/*---------------------------------------------------------------------    
   I N C L U D E D  I N  T H I S  F I L E
----------------------------------------------------------------------- 

	1. General framework
	2. Header
	3. Navigation
	4. Main content
	5. Typography
	6. Images


---------------------------------------------------------------------*/


/*
-----------------------------------------------------------------------    
   C O R E  C O L O U R S
----------------------------------------------------------------------- 

	Red #E61F1F

---------------------------------------------------------------------*/



/*---------------------------------------------------------------------    
   G E N E R A L  F R A M E W O R K
---------------------------------------------------------------------*/

html {
	font-family:Helvetica, Arial, sans-serif;
	text-align:left;
}

body {
	padding:0;
	margin:0 auto;
}

body.home {
	background-color:#000000;
}

body.info {
	background-color:#E61F1F;
}

body.work {
	background-color:#ffffff;
}

#wrapper {
	width:890px;
	height:670px;
	padding-left:110px;
}

body.work #wrapper {
	background:url(../images/global/lines-black-tweak.gif) left top scroll no-repeat;
	
}

body.home #wrapper {
	background:url(../images/global/lines-white-tweak.gif) left top scroll no-repeat;
}

body.info #wrapper {
	background:url(../images/global/lines-black-tweak.gif) left top scroll no-repeat;
}



/*---------------------------------------------------------------------    
   H E A D E R
---------------------------------------------------------------------*/


/* L O G O */

#logoType {
	float:right;
	height:108px; /* tweaked from 110 to get visual match */
	width:110px;
}



body.work #logoType.png_bg {
	background-image:url(../images/global/MB-logo-grey.png);
	background-repeat:no-repeat;
}

body.info #logoType.png_bg , body.home #logoType.png_bg {
	background-image:url(../images/global/MB-logo-white.png);
	background-repeat:no-repeat;
}

.clear {
	clear:both;
	padding:0;
	margin:0;
}

#logoText{
	width:220px;
	height:108px;
}


#logoText h1 { font-size:11px; padding-top:48px; font-weight:normal; }

body.home  #logoText h1 a { color:#ffffff; text-decoration:none;}
body.work  #logoText h1 a { color:#ff0000;  text-decoration:none;}
body.info  #logoText h1 a { color:#ffffff;  text-decoration:none;}

/*---------------------------------------------------------------------     
    M A I N  C O N T E N T
---------------------------------------------------------------------*/

#contentWrapper {
	width:780px;
	height:555px;
	padding:0;
	margin:0;
}

#workArea {
	width:440px;
	height:440px;
	float:left;
	position:relative;
	display:inline;
}



.photoWrapper{
	float:left;
	position:relative;
	/*background-color:#000000;*/
}



/* I M A G E  S T O R Y  S T Y L E S  */


#story-square{
	width:440px;
	height:440px;
	display:none;
	background-color:#FF0000;
	font-size:20px;
	color:#FFFFFF;
}


#story-portrait{
	width:330px;
	height:440px;
	display:none;
	background-color:#FF0000;
	font-size:20px;
	color:#FFFFFF;
}


#story-landscape{
	width:440px;
	height:330px;
	display:none;
	background-color:#FF0000;
	font-size:20px;
	color:#FFFFFF;
}


#story-panoramic{
	width:440px;
	height:220px;
	display:none;
	background-color:#FF0000;
	font-size:20px;
	color:#FFFFFF;
}



#story-panoramic .storyToggle{
	width:440px;
	height:220px;
	display:block;
	text-decoration:none;
}


#story-square .storyToggle{
	width:440px;
	height:440px;
	display:block;
	text-decoration:none;
}


#story-portrait .storyToggle{
	width:330px;
	height:440px;
	display:block;
	text-decoration:none;
}

#story-landscape .storyToggle{
	width:440px;
	height:330px;
	display:block;
	text-decoration:none;
}








#workArea p {
	color:#ffffff;
	font-size:18px;
	padding:4px 4px 10px 4px;
}

#workArea p a {
	color:#ffffff;
	
	
}



#infoText {
	width:110px;
	float:right;
}

ul.photoInfo {
	color:#666666;
	list-style-type:none;
	display:block;
	padding:0;
	margin:0;
	font-size:11px;
	line-height:1.2em;
 }
 
.photoTitle {
	padding-bottom:3px;
 }
 
 .photoMenu {
	display:inline;
	padding:0;
	margin:0;
 }
 
ul.photoInfo li a {
	list-style:none;
	color:#666666;
	text-decoration:none;
}

ul.photoInfo li a:hover {
	text-decoration:underline;
}







/*---------------------------------------------------------------------     
    N A V I G A T I O N
---------------------------------------------------------------------*/

#navWrapper {
	width:223px;  /* tweaked from 220 to get visual match */
	position:relative;
	float:left;
}

#navColumnOne {
	width:110px;
	float:left;
	padding:0;
	margin:0;
}

#navColumnTwo {
	width:110px;
	float:right;
	height:221px;  /* tweaked from 195 to get visual match */
	padding:0;
	margin:0;
}

body.home .nav {
	width:110px;
	color:#FFFFFF;
	list-style-type:none;
	display:block;
	padding:0;
	margin:0;
	font-size:11px;
	line-height:1.2em;
 }
 
body.home ul.nav li a {
	list-style:none;
	color:#FFFFFF;
	text-decoration:none;
}

body.home ul.nav li a:hover, body.home ul.nav li.active {
	text-decoration:underline;
}






body.work ul.nav , body.info ul.nav{
	width:110px;
	color:#000000;
	list-style-type:none;
	display:block;
	padding:0;
	margin:0;
	font-size:11px;
	line-height:1.2em;
 }
 
body.work ul.nav li a , body.info ul.nav li a{
	list-style:none;
	color:#000000;
	text-decoration:none;
}

body.work ul.nav li a:hover , body.info ul.nav li a:hover, body.info ul.nav li.active {
	text-decoration:underline;
}

li.columnOneSpacer {
	margin-top:36px;
	list-style:none;
}






/*---------------------------------------------------------------------    
    T Y P O G R A P H Y
---------------------------------------------------------------------*/

/*h1 a { display:block; width:110px; height:110px; }*/




.h2 {
	color:#666666;
	font-size:11px;
	line-height:1.1em;
	font-weight:bold;
}

.buttons a {
	color:#666666;
	font-size:11px;
	line-height:1.1em;
	text-decoration:none;
}

.buttons a:hover {
	color:#666666;
	font-size:11px;
	line-height:1.1em;
	text-decoration:underline;
}

.bodycopy p {
	color:#ffffff;
	font-size:18px;
	line-height:1.4em;
	padding-bottom:10px;
}

.disclaimer  {
	color:#666666;
	font-size:11px;
	line-height:1.1em;
	text-decoration:none;
}


body.info  #workArea p{ 
	font-size:20px;
	padding:0 0 18px 0;
	line-height:1.05em;
}


/*---------------------------------------------------------------------     
    I M A G E S
---------------------------------------------------------------------*/


/*---------------------------------------------------------------------     
    F O O T E R
---------------------------------------------------------------------*/

#footer {
	position:relative;
	font-size:11px;
	width:558px;
	text-align:right;
	margin-top:38px;
	z-index:1;
	
}


body.work #footer, body.home #footer{
	color:#999999;
}

body.info #footer{
	color:#000000;
}



body.work #footer a, body.home #footer a {
	color:#999999;
	text-decoration:none;
}


body.info #footer a{
	color:#000000;
	text-decoration:none;
}

#footer a:hover {
	text-decoration:underline;
}


/*---------------------------------------------------------------------     
    D O W N L O A D  S E C T I O N
---------------------------------------------------------------------*/

/*  L A Y O U T */

#downloadArea {
	width:432px;
	height:432px;
	float:left;
	position:relative;
	display:inline;
	padding:4px;
	background-color:#000000;
	color:#ffffff;
}



#chosen_images{
	height:86px;
	width:432px;
	margin-bottom:20px;
}

#chosen_images img{
	border:0;
	margin:0;
	padding:0;
}


#chosen_images .imageControl{
	width:66px;
	float:left;
	height:86px;
	margin:0;
	padding:0;
}



.closeButton{
	width:7px;
	height:7px;
	position:fixed;
	float:right;
	margin:2px 0px 0px 57px;
	z-index:3;
}


#downloadIntro {
	font-size:20px;
}

#downloadForm{
	margin-bottom:40px;
}


#downloadTerms p{
	font-size:11px;
	margin-bottom:9px;
}



#downloadHint{
	font-size:11px;
	margin-top:8px;
	display:none;
	width:106px;
}

#downloadHint p{
	margin-bottom:8px;
	color:#666666;
	font-size:11px;
	line-height:1.2em;
}





/* F O R M  */



#downloadArea input[type="text"]{
	
	font-family:Arial, Helvetica, sans-serif;
	border:none;
	border-bottom:1px solid #ffffff;
	background-color:#000000;
	color:#FFFFFF;
	font-size:11px;
	display:inline;
	width:203px;
	padding:2px 10px 2px 0;
	margin-bottom:5px;
	
}


#downloadArea input[type="submit"]{

	font-family:Arial, Helvetica, sans-serif;
	border:none;
	background-color:#000000;
	color:#FFFFFF;
	font-size:11px;
	display:inline;
	width:203px;
	padding:1px 10px 2px 0;
	margin-bottom:5px;
	text-align:left;
	font-weight:bold;
}


#downloadBottom{
	font-size:11px;
	margin-top:40px;
}

#formErrors{
	height:20px;
	padding-top:20px;
}

.formErrorMsg{
	background-color:#FF0000;
	font-size:11px;
	padding:2px;
	margin-right:4px;
	
}