/*

	DNA - www.designersnorthernalliance.org
	Copyright (C) 2010 Shape.
	Author: Jason Mayo (jason@madebyshape.co.uk)
	
	1. Global Styles
	2. Link Styles
	3. Typography
	4. Layout Styles
	5. Navigation Styles
	6. Content Styles
	7. UI Elements

*/


/* *************************************** */
/* 1. Global Styles */
/* *************************************** */

body {
	background: #f5f2ec;
	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #6d6e71;
	text-rendering: optimizeLegibility; /* IE text fix */
}

/* *************************************** */
/* 2. Link Styles */
/* *************************************** */

a { 
	color: #ef2945;
	text-decoration: underline; 
}

a:hover {
	color: #999;
}

a:active {
	color: #58595b;
}

/* *************************************** */
/* 3. Typography */
/* *************************************** */

h1 {
	font-size: 24px;
	color: #666666;
	font-weight: 300;	 
}

h2 {
	color: #666666;
	font-weight: 500;
	font-size: 20px;
	margin-bottom: 20px;	 
}
	.col-274 h2 { text-transform: capitalize; }
	#main-content h2 { font-weight: 400; line-height: 1.3; }

h3 {
	font-size: 14px;
	background: #e6e3dd;
	color: #666666;
	font-weight: 500;
	padding: 8px 10px;
	margin: 0;
}

	#account-margin h3 { margin-bottom: 15px; }

h4 {
	font-size: 13px;
	color: #666666;
	border-bottom: 1px solid #e6e3dd;
	padding-bottom: 5px;	 
	margin-bottom: 5px;
}

h5 {
	font-size: 12px;	
	color: #ef2845; 
}

h6 {
	font-size: 12px;	 
}

/* *************************************** */
/* 4. Layout Styles */
/* *************************************** */

#container {
	margin: 0 auto;
	width: 960px;
	position: relative;
}

#header {
	 width: 960px;
	 float: left;
	 margin: 20px 0 35px 0;
}

	#header span {
		float: left;
		margin: 37px 0 0 20px;
	}

	#logo {
		float: left;
		margin-left: 72px;
	}

#main { 
	float: left;
	width: 960px;
}

	#main-content {
		overflow: hidden;
		background: #FFF;
		padding: 35px;
		width: 854px;
		min-height: 400px;
	}

#footer { 
	float:left;
	margin-left: 36px;
	height: 50px;
	padding-top: 10px;
	border-top: 5px solid #e6e3dd;
	width: 924px;
}

/* *************************************** */
/* 5. Navigation Styles */
/* *************************************** */

/* Main */

#nav-main { 
	float: left;
	list-style: none;
	margin: 0 0 0 72px;
	padding: 0;
	width: 888px;
}

	#nav-main li { 
		float: left;
	}
	
		#nav-main li a {
			text-decoration: none;
			float: left;
			background: #e6e3dd;
			padding: 10px 20px;
			color: #666666;
			margin-right: 1px;
		}
		
		#nav-main li a:hover {
			text-decoration: none;
			background: #d0cec9;
			color: #FFF;
		}
		
		#nav-main li a:active {
			
		}
		
		#nav-main li a.selected, #nav-main li.selected a {
			background: #FFF;
		}
		
		#nav-main li a:hover.selected, #nav-main li.selected a:hover {
			color: #666666;
		}
		
/* Social */

#nav-social {
	float:left;
	list-style: none;
	margin: 35px 0 0 0;
	padding: 0;
	background: #FFF;
	padding: 10px;
	width: 16px; /* 36 */
}

	#nav-social li {
		float: left;
	}
	
/* Account */

#nav-account {
	position: absolute;
	top: 0;
	right: 0;
	list-style: none;
	margin: 0;
	padding: 7px 2px 7px 8px;
	background: #e8e4df;
	border: 1px solid #dfdbd6;
	border-top: 0px;
	color: #817e79;
}

	#nav-account li {
		float: left;
		font-weight: 600;
		margin-right: 8px;
	}
	
		#nav-account li span {
			margin-left: 8px;
		}
	
		#nav-account li a {
			font-weight: normal;
			float: left;
			text-decoration: none;
		}

/* *************************************** */
/* 6. Content Styles */
/* *************************************** */

/* Forms */

.form-small {
	overflow: hidden;
}

	.form-small li {
		border-bottom: 1px solid #e6e3dd;
		padding-bottom: 5px;
	}
	
		.form-small li label {
			width: 150px;
		}
		
		.form-small li input.button {
			margin-left: 160px;
		}



form input.button {
	background: #ef2945;
	border: none;
	color: #FFF;
}

form input:hover.button {
	background: #58595b;
	color: #FFF;
}

/* Columns */

.column { 
	float:left;
	width: 419px;
	margin: 0 15px 15px 0;
}

	.col-140 { width: 140px; }
	.col-190 { width: 190px; }
	.col-274 { width: 274px; }
	.col-410 { width: 410px; } 
	.col-649 { width: 649px; } 
	.col-854 { width: 854px; }
	
.column-content {
	overflow: hidden;
	margin-top: 5px;
	background: #f8f6f1;
	padding: 10px;
}
	
#sponsors {
	margin-top: 30px;
}
	
/* Lists */

#list-horz {
	list-style: none;
	margin: 0;
	padding: 0;
}

	#list-horz li {
		float: left;
		margin-right: 15px;
	}
	
.list-vert {
	list-style: none;
	margin: 0 0 15px 0;
	padding: 0;
}

	.list-vert li {
		background: #ece8e3;
		margin-bottom: 3px;
		padding: 5px 10px;
	}
	
.box-image { margin-bottom: 10px; }



			.box-slide {
				position: relative; 
				width: 419px;
				height: 271px;
			}
			
			.box-slide span {
				position: absolute;
				z-index: 10; 
				width: 419px;
				height: 271px;
				overflow: hidden; 
			}
			
			.box-slide-hover {
				background: url(../images/bg-circle.png) no-repeat center center;
				width: 419px;
				height: 271px;
				position: absolute;
				color: #FFF;
			}
			
			.box-slide-hover span {
				margin: 0 0 0 83px;
				width: 253px;
				height: 253px;
				text-align: center;
				padding: 110px 0 0 0;
			}
			
				.box-slide-hover span h4, .box-slide-hover span h4 a {
					color: #FFF;
					font-size: 13px;
					text-decoration: none;
				}
				
					.box-slide-hover span h4 a:hover { text-decoration: underline; }
			
				.box-slide-hover span p {
					padding: 0 10px;
				}
			
			.box-slide img {
				position: absolute;
				z-index: 1; 
			} 


.column-content .note { background: #FFF !important; }

.box-content {
	border-bottom: 1px solid #e7e4dd;
	overflow: hidden;
	padding: 15px 0 15px 0;
}

.box-content a {color: #666666; }
.box-content a:hover {color: #ef2845; }

#list-portfolio {
margin: 0;
padding: 0;
list-style: none;
}

#list-portfolio li {
float:left;
width: 419px;
border-bottom: 1px solid #e6e3dd;
padding: 10px 0;
}

#list-portfolio li img, #list-portfolio li span { float:left; }

#list-portfolio li span { margin-left: 10px; }

#list-portfolio li span strong, #list-portfolio li span p {
margin: 0 0 5px 0;
}

#list-student {
margin: 15px 0;
padding: 0;
list-style: none;
}

#list-student li {
float:left;
margin: 0 15px 25px 0;
}

#list-student li img { margin-bottom: 5px; }

#list-student li h5 { text-transform: capitalize; }

#list-student li#pagination {
width: 854px;
border-bottom: 1px solid #e6e3dd;
border-top: 1px solid #e6e3dd;
padding: 5px 0;
margin: 30px 0 0 0;
}

			#register-toggle-cont {
				display: none;
			}

#nav-account-options {
margin: 10px 0 0 0;
padding: 0;
list-style: none;
}

#nav-account-options li {
width: 410px;
float:left;
}

#nav-account-options li a {
width: 390px;
float:left;
background: #F2F2F2;
margin-bottom: 5px;
padding: 10px 10px;
text-decoration: none;
color: #666;
font-size: 15px;
}


#nav-account-options li a:hover {
background: #f02a46;
color: #FFF;
font-weight: bold;
}

#portfolio-image-caption {
background: #F2F2F2;
overflow: hidden;
padding: 10px;
}

#portfolio-image-caption p {
margin: 10px 0 0 0;
border-top: 1px solid #e6e7e8;
padding: 5px 0 0 0;
}

.lightbox img { margin-bottom: 5px; }

.list-category {
list-style: none;
margin: 10px 0 0 0;
padding: 0 0 10px 0;
	border-bottom: 1px solid #e6e3dd;
	overflow: hidden;
}

.list-category li strong {
color: #ef2945;
margin-bottom: 5px;
display: block;
}

.list-category li a {
	color: #808285;
	text-decoration: none;
}

.list-category li a:hover {
color: #ef2945;
}

#notification {
	width: 450px;
	margin: 90px auto 0 auto;
	border: 1px solid #d5d1ca;
}

#notification-top {
	background: url(../images/bg-stripe.png);
	padding: 20px;
	border-bottom: 1px solid #d5d1ca;
	overflow: auto;
}

#notification-bottom {
	background: #FFF;
	padding: 20px;
	overflow: auto;
}

#notification-top h2 { margin: 0; }

/* Blog */

.blog-entry {
overflow: hidden;
width: 855px;
border-bottom: 3px solid #F2F2F2;
margin-top: 25px;
}

.blog-entry-title {
float:left;
width: 855px;
border-bottom: 1px solid #d5d1ca;
margin-bottom: 10px;
}


.blog-entry-title h2 {
margin: 5px 0;
}

.blog-entry-image {
width: 350px;
float:left;
margin: 0 10px 15px 0;
}

.blog-entry-content {
float:left;
width: 495px;
}

/* *************************************** */
/* 7. UI Elements */
/* *************************************** */

.ui-button {
	
}

.ui-button:hover {

}

.ui-button:active {

}