/*
Theme Name: re:motion re:design
Theme URL: http://ultralimedesign.com/portfolio/
Description: A week for a website, executed in a single day. What's left is a fresh design built for speed.
Version: 1
Author: Diogenes Brito
Author URI: http://ultralimedesign.com/
Note: Font sizes are in em and all other sizes are usually in px
*/

/* Color Key
-------------------------
Sky blue/accent blue (Clip key: light blue, sky blue) - #0d6eea
dark blue/blue (Clip key: blue, dark blue) - #052446
green (Clip key: green) - #9db331
whiteish (Clip key: white)- #edefd0
redish/pinkish (Clip key: red, pink) - #d2393f
Grey/Gray (Clip Key: grey, gray) - #e5e7ea
*/

/* Font Stacks
-------------------------
Titling (title) | font-family: Helvetica, Helvetica Neue, Arial, sans-serif;
Paragraph (para) | font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
*/

/* Framework CSS + Other External Imports */
@import url("css/framework.css");


/* START THEME CSS */


/* !Basic Elements and Background */
/* --------------------------------------------- */
html { 
	font-family: 	'Helvetica Neue', Arial, Helvetica, sans-serif; 
	background:		#e5e7ea;
	color:			#052446;
	border-top:		5px solid #0d6eea;
}

body {
	width:			980px;
	padding:		0px 10px 10px 10px;
	margin:			0 auto;
	background:		#fff;
}

h1#logo {
	width:			262px;
	height:			75px;
	background:		url('images/logo.png');
	text-indent:	-9999em;
	margin:			10px 0 0 30px;
	float:			left;
}

img#logo {
	width:			262px;
	height:			75px;
	
	margin:			10px 0 0 30px;
	float:			left;
}

/* !General/Websitewide Typography */
/* --------------------------------------------- */
h1, h2, h3, h4, h5, h6 { font-family: 	Helvetica, 'Helvetica Neue', Arial, sans-serif; }

p { 
	font-family: 	'Helvetica Neue', Arial, Helvetica, sans-serif; 
	color:			#052446;
}

/* !Header */
/* --------------------------------------------- */
header#banner nav {
	position:		absolute;
	right:			0;
	margin-right:	20px;
}

header#banner nav ul {
	margin:			0 auto;
	list-style:		none;
}

header#banner nav ul li {
	display:		block;
	float:			left;
	margin:			0;
}

header#banner nav ul li a {
	padding:		50px 20px 6px 20px;
	text-decoration:none;
	color:			#052446;
	line-height:	250%;
}

header#banner nav ul li a:hover,
header#banner nav ul li a.active {
	border-bottom:	2px solid #0d6eea;
	background:		#0d6eea url('images/menubg.png') repeat-x bottom;
	color:			#fff;
}


/* !Homepage */
/* --------------------------------------------- */
section#feature {
	height:			348px; /*390 total*/
	width:			940px; /*980 total*/
	padding:		20px;
	margin-top:		10px;
	background:		#052446 url('images/featurebg2.png') repeat-x;
	border-top:		1px solid #041b35;
	border-bottom:	1px solid #041b35;
}

section#feature img {
	float:			left;
}

section#feature div {
	position:		relative;
	width:			380px;
	height:			100%;
	padding-left:	20px;
	float:			right;
}

section#feature div h2 {
	margin:			0 0 25px 0;
	font-size:		360%;
	line-height:	120%;
	color:			#fff;
}

section#feature div p {
	margin:			0;
	font-size:		190%;
	line-height:	120%;
	color:			#edefd0;
}

section#feature div p strong {
	font-weight:	normal;
	color:			#fff;
}


a.button {
	display:		block;
	font-size:		17px;
	font-weight:	bold;
	text-align:		center;
	vertical-align: middle;
	text-decoration:none;
	color:			#edefd0;
	text-shadow: 	-1px -1px #444;
	letter-spacing:	0px;
}

section#feature p.button {
	width:			155px;
	height:			37px;
	position:		absolute;
	bottom:			8px;
	right:			10px;
	background:		url('images/buttonbg2.png') no-repeat;
}

section#feature a.button {
	width:			100%;
	height:			100%;
	line-height:	35px;
	text-align:		left;
	text-indent:	20px;
}

section#feature a.button:hover {
	color:			#fff;
}

section#teaser_blocks {
	height:			260px;
	margin-top:		15px;
}
	
	section#teaser_blocks h3 {
		margin:			0 0 13px 0;
		padding-bottom: 7px;
		border-bottom:	1px solid #9db331;
		color:			#052446;
	}
	
	section#teaser_blocks p {
		margin:			0;
		color:			#052446;
	}
	
	section#teaser_blocks ul {
		margin:			0;
		list-style:		none;
	}
	
		section#teaser_blocks ul li {
			width:			218px;
			height:			220px;
			padding:		20px;
			position:		relative;
			margin-left:	20px;
			float:			left;
			border:			1px solid #e8e8e8;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			background:		url('images/blockbg5.jpg') repeat-x;
		}
		
		section#teaser_blocks ul li.focus {
			width:			378px;
		}
		
		section#teaser_blocks ul li.first {
			margin-left:	0;
		}
		
		section#teaser_blocks ul li.first {
			margin-left:	0;
		}
		
			section#teaser_blocks ul li p.button {
				width:			101px;
				height:			28px;
				background:		url('images/whitebuttonbg.png') no-repeat
			}
			
			section#teaser_blocks ul li.first p.button {
				position:		absolute;
				bottom:			15px;
				right:			20px;
			}
			
			section#teaser_blocks ul li a {
				color:			#052446;
			}
			
			section#teaser_blocks ul li a:hover {
				color:			#0d6eea;
			}
			
			section#teaser_blocks ul li a.button {
				width:			100%;
				height:			100%;
				line-height:	28px;
				font-family: 	Helvetica, 'Helvetica Neue', Arial, sans-serif;
				font-size:		13px;
				color:			#0d6eea;
				text-shadow: 	none;
				border:			none;
			}
			
			section#teaser_blocks ul li.focus p.button {
				margin:			30px auto 0 auto;
				width:			223px;
				height:			52px;
				background:		url('images/bigbuttonbg2.png') no-repeat
			}
			
			section#teaser_blocks ul li.focus a.button {
				width:			100%;
				height:			100%;
				line-height:	52px;
				font-family: 	Helvetica, 'Helvetica Neue', Arial, sans-serif;
				font-size:		24px;
				color:			#fff;
				text-shadow: 	-1px -1px #444;
			}
			
			section#teaser_blocks ul li.focus a.button:hover {
				color:			#f2f2f2;
			}
			
			section#teaser_blocks ul li a#time_logo{
				display:		block;
				width:			132px;
				height:			40px;
				margin:			22px auto 10px auto;
			}
			
			section#teaser_blocks ul li.last p.button {
				position:		absolute;
				bottom:			15px;
				right:			20px;
			}

/* !Secondary Pages */
/* --------------------------------------------- */		
section#content {
	margin-bottom:	40px;
}

div#page_title {
	height:			90px;
	padding:		20px;
	background:		#052446 url('images/secondarytitlebg.png') repeat-x;
	color:			#edefd0;
	margin:			10px 0;
	clear:			both;
}

body.secondary div#page_title hgroup h1 { margin: 0; }

body.secondary h1,
body.secondary h2 {
	color:			#fff;
	padding-left:	30px;
}

body.secondary h2 {
	color:			#edefd0;
}

section#content h3,
section#content h4,
section#content h5,
section#content h6 {
	padding-left:	50px;
}


section#content h3 {
	padding:		20px 0 0 50px;
	width:			616px;
	font-size:		150%;
	line-height:	140%;
	font-family: 	Georgia, Times, 'Times New Roman', serif;
	font-style: 	italic;
	color:			gray;
}

	section#content h3 a { 
		color:		#fff;
		font-style:	italic;
		background:	#0d6eea;
		text-decoration:none;
	}
	
	section#content h3 a:hover { 
		color:		#0d6eea;
		font-style:	italic;
		background:	none;
	}

section#content h4,
section#content h5 {
	font-weight:	bold;
	margin:			35px 0 -5px 0;
}

section#content h5 {
	margin-top:		20px;
	color:			#d2393f;
}


section#content p {
	width:			616px;
	padding-left:	50px;
	margin:			15px 0;
}
	
	section#content p strong,
	section#content ul li strong {
		color:		#0d6eea;
	}

	section#content p a,
	section#content ul li a {
		background:	#0d6eea;
		color:		#fff;
		text-decoration:none;
	}

	section#content p a:hover,
	section#content ul li a:hover {
		background:	none;
		color:		#0d6eea;
		text-decoration:none;
	}
	
	section#content p em {
		color:		#d2393f;
	}


section#content aside.pullquote {
	border:			1px solid #e8e8e8;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	background:		url('images/blockbg5.jpg') repeat-x;
}

	section#content aside.pullquote h4 {
		margin-top:	15px;
	}
	
	section#content aside.pullquote p strong {
		color:		#d2393f;
	}

section#content ul {
	width:			616px;
	margin:			15px 0 0 80px;
}

section#content .float_left {
	float:			left;
	padding:		8px;
	margin:			5px 20px 0 50px;
	border:			1px solid #9db331;
	background:		#fff;
}

section#content .float_right {
	float:			right;
	padding:		8px;
	margin:			5px 50px 0 20px;
	border:			1px solid #9db331;
	background:		#fff;
}


/* !Footer */
/* --------------------------------------------- */
footer {
	clear:			both;
	margin-top:		15px;
	font-size:		90%;
	color:			#052446;
}

footer p,
body.secondary footer p {
	text-align:		center;
	font-size:		90%;
	margin:			5px 0 0 0;
	padding:		0;
	width:			100%;
}
footer nav ul {
	width:			535px;
	margin:			0 auto;
	list-style:		none;
}

footer nav ul li {
	display:		inline;
	padding:		0 5px;
}

footer nav ul li a,
footer p a {
	color:			#052446;
	background:		none;
	text-decoration:underline;
}

footer nav ul li a:hover {
	color:			#0d6eea;
}

footer p a:hover {
	color:			#9db331;
}
/* END CSS */