/*
** Developed for Pendulum Consulting by Smallblock Media - 7/2012
** Zach Anderson - zach@smallblockmedia.com
*/

/* 
** GRID SYSTEM 
*/

.gr_third,
.gr_twothirds,
.gr_half,
.gr_full {
	display: inline;
	float: left;
	margin-left: 12px;
	margin-right: 12px;
}

.alpha.outside {
	margin-left: 50px;
}

.omega.outside {
	margin-right: 50px;
}

.gr_third {
	width: 264px;
}

.gr_twothirds {
	width: 552px;
}

.gr_half {
	width: 408px;
}

.gr_full {
	width: 840px;
}

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix:before,
.clearfix:after,
.page:before,
.page:after {
	content: '.';
	display: block;
	overflow: hidden;
	visibility: hidden;
	font-size: 0;
	line-height: 0;
	width: 0;
	height: 0;
}

.clearfix:after,
.page:after {
	clear: both;
}

/* for IE6 IE7, can be moved to a separate stylesheet if validation is needed */
.clearfix,
.page {
	zoom: 1;
}

/* 
** BASICS 
*/

body, html {
	color: #666;
	background: #FFF;
}

#big_wrapper {
	
}

#content_wrapper {
	position: relative;
	left: 0;
}

#content_window {
	width: 940px;
	overflow: hidden;
	position: relative;
	top: 30px;
	left: 50%;
	margin-left: -470px;
	padding-bottom: 100px; /* always give room for the footer */	
}

div.page {
	width: 940px;
	position: absolute;
	top: 0;
	left: 0;
}

div.billboard {
	background: #f9f9f9;
	padding: 65px 38px 25px;
	margin-bottom: 24px;
}

/* 
** TYPOGRAPHY AND TEXT
*/

body {
	font-family: "museo-slab", Rockwell, slab-serif, serif;
	line-height: 1.3;
}

body .sans {
	font-family: "facitweb", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4 {
	font-weight: normal;
	margin-top: 0;
	margin-bottom: .3em;	
}

h1 {
	color: #666;
}

h2 {
	color: #364b8b;
	font-size: 24px;
	line-height: 28px;
	margin-bottom: 8px;
}

h3 {
	color: #3fb9d7;
}

h4 {
	text-transform: uppercase;
	font-size: 13px;
	margin-bottom: .2em;	
}

.page p,
.page li {
	font-size: 14px;
}

p {
	margin-bottom: 1em;
	margin-top: 0;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

h1 em {
	color: #3fb9d7;
	font-style: normal;	
	/*
	background: #FFF;
	padding: 0 .2em;
	margin: 0 -.2em;
	line-height: 1;
	*/
}

a {
	color: #7fbd4a;
	text-decoration: none;
	outline: none;
}

a:hover {
	text-decoration: underline;
}

ul, ol, li {
	padding: 0;
	margin: 0;
}

.page ul,
.page ol {
	margin-bottom: 1em;
}

.page ul li {
	list-style: none;
	text-indent: -.8em;
	padding-left: .8em;
	line-height: 18px;
	margin: 3px 0;
}

.wrapped { /* to be used as a class on columns with a 12px margin normally */
	padding: 12px;
	margin: -12px 0 12px;
	background: #FFF;	
}

.wrapped *:last-child {
	margin-bottom: 0;
}

.caps {
	font-size: 82%;
	text-transform: uppercase;
}

.error {
	color: #bd4a4a;
}

.success {
	color: #7FBD4A;
}

/* 
** HEADER 
*/
#header {
	width: 840px;
	margin: 0 auto;
	padding: 0 50px;
	position: absolute;
	left: 50%;
	top: 20px;
	margin-left: -470px;
	z-index: 1000;
}

#logo {
	display: inline-block;
	width: 158px;
	height: 48px;
	margin: 0;
	overflow: hidden;
	font-size: 18px;
	background: #7fbd4a url(../i/logo.gif) center top no-repeat;
	position: absolute;
	top: 0;
	left: 50px;
}

#logo a {
	display: block;
	color: #FFF;
	text-indent: -5000px;
	height: 48px;
	line-height: 48px;
}

#logo:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

#main_nav {
	display: inline-block;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 20px;
	left: 223px;
	vertical-align: bottom;
	font-size: 13px;
}

#main_nav li {
	display: inline-block;
}

#main_nav .slash {
	display: inline;	
}

#main_nav a {
	text-transform: uppercase;
	color: #666;
	padding: 0 5px;
}

#main_nav a.current,
#main_nav a:hover {
	color: #7fbd4a;
	text-decoration: none;
}

#controls a {
	position: absolute;
	top: 120px;
	left: 50%;
	z-index: 1000;
	width: 52px;
	height: 242px;
}

#controls a:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

#move_left {
	margin-left: -502px;
}

#move_right {
	margin-left: 450px;
}

/* 
** FOOTER 
*/

#footer {
	width: 864px;
	margin: 0;
	margin-left: -470px;
	position: fixed;
	bottom: 0;
	left: 50%;
	padding: 20px 38px;
	background: #FFF;
	height: 30px;
	z-index: 100;
}

#footer h2 {
	font-size: 17px;
	color: #666;
	margin-top: 0;
	line-height: 22px;
}

#footer p {
	font-size: 13px;
	text-align: right;
}

#footer p.contact {
	margin: 0;
	margin-top: 3px;
}

#footer p.legalese {
	font-size: 9px;
	margin-top: 5px;
}

#footer a {
	color: #666;
	text-transform: uppercase;
}

#footer a:hover {
	color: #7fbd4a;
	text-decoration: none;
}
/* 
** CONTENT SPECIFICS 
*/

img.content_image {
	margin-bottom: 1em;
}


/* setting page position after having some issues 
** reported that I can't recreate with Safari, cached content, and page positioning
** hopefully this alleviates those problems and is easily editable if pages are added in the future
*/
#front_page { left: 0; }
#services_page { left: 940px; }
#case_page { left: 1880px; }
#clients_page { left: 2820px; }
#about_page { left: 3760px; }
#contact_page { left: 4700px; }

/* FRONT PAGE */
#front_page h1 {
	color: #666;
	font-size: 38px;
	line-height: 1.21; /*46px*/
}

#front_page h3 {
	color: #666;
	background: #FFF;
	font-size: 17px;
}


#front_page p.testimonial {
	font-size: 18px;
	line-height: 23px;
	color: #364b8b;
	font-style: italic;
}

#front_page p.attribution {
	text-indent: -.9em;
	font-size: 17px;
	line-height: 23px;
}

#front_page p.testimonial strong,
#front_page p.attribution .attr_title {
	text-transform: uppercase;
	font-size: 82%;
	font-style: normal;
}

/* SERVICES PAGE */
#services_1,
#services_2,
#services_3 {
	position: relative;	
}

#services_page .services_num {
	position: absolute;
	left: -33px;
	top: 3px;
	height: 26px;
	width: 26px;
	background: transparent url(../i/num_circle.png) center top no-repeat;
	text-align: center;
	color: #364B8B;
	margin: 0;
	font-size: 18px;
	padding-top: 2px;
}


/* CASE STUDIES PAGE */
#case_nav li {
	font-size: 12px;
	padding: 0;
	margin-bottom: 5px;
	text-indent: 0;
}

#case_nav li a {
	color: #666;
	text-decoration: none;
	padding: 2px 5px;
}

#case_nav li a:hover,
#case_nav li a.current {
	background: #3fb9d7;
	color: #FFF;
	text-decoration: none;
}

#case_page p.caption {
	color: #c3c3c3;
	font-size: 9px;
	font-style: italic;
	margin: -10px 0 0 5px;
}

.results p {
	font-size: 18px;	
}

div.case_content {
	display: none;
}

/* CLIENTS PAGE */
#clients_page a {
	color: #013671;
}

#clients_page a:hover {
	color: #013671;
	text-decoration: none;
}

#cl_instructions {
	font-size: 12px;
	font-style: italic;
	color: #013671;
	width: 135px;
}

div.connection {
	height: 1px;
	background: #AAA;
	z-index: 40;
}

#clients_page ul.client_list li {
	z-index: 50;
	position: relative;
	text-indent: 0;
	padding: 0;
}

#clients_page ul.client_list li a,
#clients_page ul.client_list li span {
	background: #F9F9F9;
	padding: 1px 4px;
	margin-left: -4px;
	line-height: 16px;
}

#client_info_wrapper {
	border-left: 1px solid #AAA;
	background: #F9F9F9;
	padding: 5px 0 0 4px;
	position: relative;
	left: -4px;
	display: none;
}

#client_info {
	background: #7fbd4a;
	color: #FFF;
	padding: 16px;
	font-size: 12px;
	font-style: italic;
}

#client_info p:last-child {
	margin-bottom: 0;
}

#client_info p {
	font-size: 12px;
}

#client_info .attribution {
	font-size: 12px;
	font-style: normal;	
}

#client_info .attribution .title {
	text-transform: uppercase;
	font-size: 11px;	
}

#client_info_wrapper div.tiny_border {
	position: absolute;
	width: 16px;
	top: 0;
	left: 0;
	border-top: 1px solid #AAA;
	height: 1px;
	padding: 0;
	margin: 0;
	line-height: 1px;	
}

div.client_waiting {
	display: none;	
}

#client_info div.client_waiting {
	display: block;
}

/* CONTACT PAGE */
/* form basics */

label {
	display: block;
	margin-bottom: .7em;
	text-transform: uppercase;
	font-size: 13px;
}

input, textarea {
	display: block;
	border: none;
	background: #FFF;
	color: #364B8B;
	font-family: "museo-slab", Rockwell, slab-serif, serif;
	padding: 3px 12px;
	width: 240px;
	margin-left: -12px;
}

input {
	
}

textarea {
	height: 8em;	
}

/* other contact related rules */
#contact_page h2 {
	font-size: 22px;
	margin-bottom: 1em;
}

#contact_page h2 a {
	color: #364B8B;
}

#pd_submit {
	background: #3FB9D7 url(../i/submit_arrow.png) right center no-repeat;
	color: #FFF;
	position: relative;
	width: auto;
	text-transform: uppercase;
	padding-right: 17px;
	cursor: pointer;
}

#pd_submit:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}