/* styles.css 
 *------------------------------------------------------------
 * Author: Sametz Blackstone Associates
 * Client: MIT2030
 * Desc: Handles all styles for MIT2030.
 * ------------------------------------------------------------
 */

 
/* !Globals */
html{}

body{}

strong{
	font-weight: bold;
}
 
/* !Framework* /
#main{}

	/*----- Header Region -----*/
	header#site_head{
		background: url(../images/theme/header_bg.png) bottom right repeat-x; 
		margin-top: 20px;
	}
		header#site_head div.container{}
		
		#logo{}
		
		/*----- Utility Region -----*/
		#utility_region{ 
			margin-top: 25px;
			padding-top: 100px;
			position: relative;
		}
			
			#utility_logo{
				position: absolute;
				right: 0;
				top: 0;
			}
			
			#utility{
				bottom: 0;
				position: absolute;
				right: 0;
			}
			
				#utility_nav,
				#utility_form{
					background-color: rgb(119, 120, 123);
					height: 25px;
					margin: 5px 5px 0 0;
					opacity: 0.75;
					padding: 5px 10px; 	
				}
			
				#utility_nav{
					float: left;	
				}
					#utility_nav ul{
						overflow: hidden;
					}
					#utility_nav li{ 
						float: left;
					}
					#utility_nav li a{
						color: white;
						display: block;
						float: left;
						height: 25px;
						line-height: 25px;
						padding: 0 5px;
						text-decoration: none;
					}
				
				#utility_form{
					float: left;
					position: relative;
				}
					form#search input[type="text"]{
						border: 1px solid rgb(167, 30, 49);
						color: rgb(119, 120, 123);
						padding-left: 5px;
						width: 125px;
					}
					form#search input[type="submit"]{
						background: url(../images/theme/utility_search_submit.gif) no-repeat;
						border: none;
						cursor: pointer;
						height: 18px;
						text-indent: -9999em;
						width: 17px;
					}
					form#search label{
						color: rgb(119, 120, 123);
						left: 15px;
						position: absolute;
						top: 9px;
						z-index: 5;
					}
			
		
	/*----- Interaction Region -----*/
	#interaction{
		background-color: white;
		border-top: 1px dotted rgb(0,0,0);
	}
	
		/*----- Main Navigation -----*/
		#nav_region{ 
			border-bottom: 1px dotted rgb(153, 51, 51); 
			padding-top: 4px;
			height: 30px;
		}
			#nav_region div.container{
				overflow: visible;
			}
			
			#main_nav{}
			
				#main_nav ul{ 
					/*overflow: hidden;*/
				}
				#main_nav ul li{ 
					float: left;
				}
				#main_nav ul li a{ 
					color: rgb(153, 51, 51); 
					display: block;
					float: left; 
					font-size: 123.1%; 
					font-weight: bold;
					margin-right: 10px; 
					padding: 5px 5px 6px;
					position: relative;
					text-decoration: none;
				}
				#main_nav ul li a:hover{
					background-color: rgb(64, 109, 119);
					color: white;
				}
				
				/*----- Individual Active Pages -----*/
				body#framework a.framework,
				body#framework a.framework:hover,
				body#themes a.themes,
				body#themes a.themes:hover,
					body#renovation a.themes,
					body#renovation a.themes:hover,
				body#projects a.projects,
				body#projects a.projects:hover,
				body#news a.news,
				body#news a.news:hover,
				body#ideas a.ideas,
				body#ideas a.ideas:hover{
					background-color: rgb(151, 53, 53);
					color: white;
				}
				body#framework a.framework:after,
				body#themes a.themes:after,
					body#renovation a.themes:after,
				body#projects a.projects:after,
				body#news a.news:after,
				body#ideas a.ideas:after{
					content: url(../images/theme/nav_indicator.png);
					height: 9px;
					position: absolute;
					right: 45%;
					top: 24px;
					width: 11px;
				}
	
	
	/*----- Carousel Region -----*/		
	#carousel{
		background: url(../images/theme/carousel_bg.jpg) top center repeat-x;
		background-color: rgb(98, 195, 204);
		border-top: 15px solid white;
		border-bottom: 15px solid white;
		height: 255px;
	}	
		
		#carousel div.container{ 
			background-color: white;
			border-left: 2px solid white;
			border-right: 2px solid white;
			height: 255px;
			overflow: visible;
			width: 793px;
		}
		
		.carousel_item{}
		
			.carousel_item img{
				float: left;
			}
		
		.carousel_content{
			background-color: rgb(204, 233, 240);
			float: left;
			margin-left: -55px;
			min-height: 240px;
			opacity: 0.9;
			padding: 15px 29px 0 75px;
			width: 320px;
			
		}
			.carousel_content h1{
				font-size: 167%;
				font-family: Georgia;
				margin-bottom: 15px;
			}
			.carousel_content h1 a{
				color: rgb(151, 53, 53);
				text-decoration: none;
			}
			.carousel_content h1 a:hover{
				border-bottom: 1px dotted rgb( 64, 109, 119);
			}
			.carousel_content h1 a span{
				color: rgb( 64, 109, 119);
				display: block;
				font-size: 0.75em;
				font-family: Arial;
				font-weight: bold;
				margin-bottom: 5px;
				text-decoration: none;
			}
			.carousel_content p{
				color: #56595A;
				font-size: 108%;
				line-height: 138.5%;
				margin-bottom: 10px;
			}
		#carousel_nav{}
			#carousel_nav a{
				display: block;
				height: 37px;
				position: absolute;
				text-indent: -9999em;
				top: 100px;
				width: 37px;
			}
			a#prev{
				background: url(../images/theme/carousel_prev.png) no-repeat;
				left: -18px;
			}
			a#prev:hover{
				background: url(../images/theme/carousel_prev_over.png) no-repeat;
			}
			a#next{
				background: url(../images/theme/carousel_next.png) no-repeat;
				right: -18px;
			}
			a#next:hover{
				background: url(../images/theme/carousel_next_over.png) no-repeat;
			}
	
	/*----- Body Region -----*/
	#body_bg_left{
			background: url(../images/theme/body_home_bg.png) left top no-repeat;
			border-top: 1px dotted rgb(0,0,0);
			height: 85px;
			width: auto;
		}
	
	#body{
		background: url(../images/theme/body_interior_bg.png) left top repeat-x;
		margin-bottom: 30px;
		padding-top: 20px;
	}
	body#home #body{
		background: none;
		padding-top: 0;
	}	
		
		body#home #body div.container{
			padding-left: 220px;
		}
		
		/*----- Body Content Styles -----*/
		#body h1, 
		#body h2, 
		#body h3, 
		#body h4, 
		#body h5, 
		#body h6,
		#body p,
		#body ul,
		#body ol,
		#body blockquote{
			margin-bottom: 15px;
		}
		
		#body article.block{
			float: left;
			margin: 0 0 15px 20px;
			width: 385px;
		}
		
		#body article.block.letter{
			width: 450px;
		}
		
			#body article.block h2{
				border-bottom: 8px solid rgb(204, 233, 240);
				color: rgb(0, 0, 0);
				font-size: 108%;
				font-weight: bold;
				margin-bottom: 0;
			}
			#body article.block div{
				border-bottom: 1px dotted rgb(0, 0, 0);
				border-top: 1px dotted rgb(0, 0, 0);
				margin-bottom: 10px;
				padding: 12px 0;
			}
			#body article.block p{
				font: normal 138.5%/1.35 "Georgia";
				margin-bottom: 10px;
			}
			#body article.block.letter span{
				background-color: #CCE9F0;
			}
		
		#secondary_interaction{
			margin-bottom: 50px;
			min-height: 50px;
			position: relative;
			z-index: 5;
		}
			
			#secondary_nav,
			#tertiary_nav{
				width: 540px;
			}
				#secondary_nav ul,
				#tertiary_nav ul{
					overflow: hidden;
				}
				#secondary_nav ul li,
				#tertiary_nav ul li{ 
					float: left;
				}
				#secondary_nav ul li a,
				#tertiary_nav ul li a{
					background-color: rgb(204, 233, 240);
					border: 1px dotted rgb(151, 53, 53);
					color: rgb(0, 0, 0);
					display: inline-block;
					float: left;
					font-weight: bold;
					padding: 5px;
					text-decoration: none;
					text-transform: none;
				}
				
				#tertiary_nav ul li a{
					background-color: rgba(204, 233, 240, 0.4);
				}
				
				#secondary_nav ul li a.active,
				#secondary_nav ul li a.active:hover,
				#tertiary_nav ul li a.active,
				#tertiary_nav ul li a.active:hover{
					background-color: rgb(151, 53, 53);
					color: white;
				}
				#secondary_nav ul li a:hover,
				#tertiary_nav ul li a:hover{
					background-color: rgb(82, 142, 154);
					color: white;
				}
				
		
		h1#page_title{
			color: rgb(83, 143, 150);
			font-size: 110px;
			font-weight: bold;
			letter-spacing: -5px;
			line-height: 80%;
			margin: 0;
			opacity: 0.9;
			position: absolute;
			right: 0;
			text-align: right;
			text-transform: lowercase;
			top: 0;
		}
		
		#featured_image{
			left: 480px;
			padding-top: 35px;
			position: absolute;
			width: 423px;
		}
			#featured_image figcaption{
				padding-left: 75px;
				color: #555;
				font-size: 85%;
				margin: 5px 0 10px 0;
				text-align: right;
			}
		
		#page_content{
			background-color: white;
			border: 1px dotted rgb(151, 53, 53);
			font-size: 108%;
			opacity: 0.9;
			overflow: hidden;
			padding: 10px;
			position: relative;
			width: 620px;
			z-index: 10;
		}
		
		#themes #page_content{ /*Overwrite width for themes page*/
			width: 520px;
		}
			#renovation #page_content{ /*Overwrite width for themes / renovation page(s)*/
				width: 520px;
			}
			
			#page_content h2{
				color: rgb(151, 53, 53);
				font-size: 184%;
				font-weight: bold;
				line-height: 1;
			}
			#page_content h3{
				color: rgb(151, 53, 53);
				font-size: 138.5%;;
				font-weight: bold;
			}
			#page_content ul ul{
				margin-left: 15px;
			}
			
			#page_content ul li,
			#page_content ol li,
			#page_content ul ul li,
			#page_content ol ol li{
				background-attachment: fixed;
				background: url(../images/theme/bullet.png) left 4px no-repeat;
				margin-bottom: 7px; 
				padding-left: 15px;
			}
			#page_content ul ul li{
				background: none;
				margin-left: 15px;
				position: relative;
			}
			#page_content ul ul li:before{
				content: "_";
				color: #973535;
				position: absolute;
				left: 0;
				top: 0;
			} 
			#page_content a{
				border-bottom: 1px dotted rgb(151, 53, 53);
				color: rgb(0, 91, 108);
				text-decoration: none;
			}
			#page_content a:hover{
				color: rgb(151, 53, 53);
			}
			#page_content a:visited{
				color: #56595A;
			}
			#page_content q,
			#page_content blockquote{
				background-color:  rgb(204, 233, 240);
				border: 1px dotted rgb(0,0,0);
				float: right;
				font: normal 100%/1.35 "Georgia";
				margin: 0 0 10px 15px;
				padding: 12px;
				width: 50%;
			}
			#page_content blockquote{
				margin-left: 10px;
				width: auto;
			}
	
	/*----- Footer Region -----*/
	footer#site_footer{
		border-top: 1px dotted rgb(151, 53, 53);
		margin-bottom: 30px;
		padding: 20px 0;
	}
		footer#site_footer div.container{}
		
			a#footer_logo{
				display: block;
				margin-bottom: 20px;
			}
			
			#footer_nav{
				float: right;
			}
			
				#footer_nav ul{
					margin-bottom: 15px;
				}
				#footer_nav ul li{
					border-left: 1px solid rgb(151, 53, 53);
					display: inline;
				}
				#footer_nav ul li:first-child{
					border-left: none;
				}
				#footer_nav ul li a{
					color: rgb(151, 53, 53);
					padding: 0 10px;
					text-decoration: none;
				}
			#giving_button{
				float: right;
			}


/* !Classes */
.closing_caption{
	color: #555;
	font-size: 85%;
	margin: 5px 0 10px !important;
	padding: 10px 0;
}
.container{ 
	overflow: hidden;
	position: relative;
}
.project,
.news_item{
	margin: 15px 0;
	overflow: hidden;
	position: relative;
	width: auto;
}
.img_caption{
	border-bottom: 1px solid #555;
	color: #555;
	font-size: 85%;
	margin: 5px 0 10px !important;
	padding: 10px 0;
}
.img_inline_left{
	float: left;
	margin: 0 15px 5px 0;
}
.img_inline_right{
	float: right;
	margin: 0 0 5px 15px;
}
.intro{
	font: normal 138.5%/1.25 "Georgia";
}
.more{
	background: url(../images/theme/more.gif) right no-repeat;
	color: rgb(151, 53, 53);
	display: inline-block;
	font-size: 85%;
	font-weight: bold;
	padding-right: 20px;
	text-decoration: none;
	text-transform: uppercase;
}
.more:hover{
	background: url(../images/theme/more_over.png) right no-repeat;
}
.signature{
	display: block;
	font-style: italic !important;
	margin: 15px 0 0 20px !important;
	padding: 0;
}


/* !Media Queries */
/* This is stage 2, when the main container becomes smaller. */

@media screen and (max-width: 999px) {

	/*Body Content*/
	body#home #body div.container{
		padding-left: 0 !important;
	}
	.block{
		width: 300px !important;
	}
	
	/*Classes*/
	.container {
		width: 720px;
	}
	
	#featured_image{
		width: 240px;
	}

}

/* Stage 3, when the layout becomes fluid, and the size of the browser. */

@media screen and (max-width: 719px) {

	/*Interaction Region*/
	#carousel div.container{
		width: 423px !important;
	}
	.carousel_content{
		margin: -25px 0 15px 0 !important;
	}
	
	/*Body Content*/
	body#home #body div.container{
		padding-left: 0 !important;
	}
	.block{
		width: 95% !important;
	}
	
	/*Classes*/
	.container {
		width: 100%;
	}
}

/* Here, all the elements are the same size.  This way, mobile users can also use the site. */

@media screen and (max-width: 579px) {
	
	/*Header Region*/
	#utility_region{
		background: none !important;
		padding-top: 0 !important;
	}
	
	/*Interaction Region*/
	#nav_region{
		height: auto !important;
	}
	#main_nav ul li{
		float: none !important;
	}
	#main_nav a{
		float: none !important;
		width: 100%;
	}
	.carousel_content{
		padding: 15px 29px 0 40px !important; 
		width: auto !important;
	}
	/*Secondary Navigation Region*/
	#secondary_nav,
	#tertiary_nav{
		width: 70% !important;
	}
	/*Body Content*/
	#page_title{
		display: none !important;
	}
	#page_content{
		width: 98% !important;
	}
	
	#featured_image{
		display: none;
	}
}