/* @group Signature */

/*=============================
717 Studios, LLC
Copyright 2010
written for - www.717studios.com

swatch colors
-------------

==============================*/



/* @end */

/* @group Resets */

/* resets and overrides
----------------*/
*{
margin: 0;
padding: 0;
}
img {border:none;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* resets */
* { margin: 0; padding: 0; list-style: none; font-style: normal; outline: none;}
img {border: none;}
object, embed, img {vertical-align: bottom; border: none;}

/* global */
body {
	font: 0.9em "Helvetica", "Gotham HTF", "Gotham", arial;
	line-height: 1.3em;
	color: #282322;}
	




/* @end */

/* @group Links and Type */

/* links and type
--------------*/

body{
font-family: Helvetica, Verdana, sans-serif;
font-size: 100%;
background: #210618 url(../common/i/site/background-mountains-gray.jpg) -130% 0 repeat-x;
}
#lights{
	margin: -150px 0 0 0;
	height: 88px;
	width: 100%;
	background: url(../common/i/site/xmas-lights.png) center top repeat-x;
}
a:link, a:active, a:visited{color: gray; text-decoration: none;}
a:hover{ color: #999; text-decoration: none;}
/* @group header */
#header img{
	position: relative;
	right: 20px;
	margin: 10px 0 0 0;
}

#header ul{
	margin: 45px 0 0 0;
}
ul.navigation li{
	color: black;
	display: inline;
	margin: 20px 20px 10px 20px;
	font-size: 1.08em;
	letter-spacing: .08em;
}
ul.navigation li a{
	color: black;
}

/* @end */


h1{
	width: 800px;
	background: #3d3739;
	color: white;
	padding: 15px 0 10px 20px;
	font-weight: lighter;
	font-size: 1.1em;
	letter-spacing: .12em;
}
h1 em{
	font-size:.80em;
}
h1 label{
	color: gray;
	font-size: .80em;
	padding: 0 0 0 50px;
}
h1 label img{
	position: relative;
	top: -6px;
}


h2{color: #7d7b72;
font-weight: normal;
}


p{
	color: #7d7b72;
	font-size: 0.9em;
	line-height: 1.7em;
}
a.read-more{
	text-decoration: underline;
}
a.read-more:hover{
	color: #690505;
}

a.view-study{
	color: #cc1548;
}
/* @end */

/* @group Layout */

/* layout
-------------*/
#container{
	background: url(../common/i/site/background.png) repeat-y;
	width: 833px;
	height: 100%;
	margin: 0 auto 0;
	padding: 0 10px 0 6px;
}
/* @group header */
#header{
	width: 821px;
	margin: 0 0 0 0px;
	height: 80px;
	border-bottom: #b5b5b5 solid 1px;
	padding: 20px 0 0 0;
}
#header ul li:hover{
	padding: 0 0 16px 0;
	background: url(../common/i/site/arrow-nav.png) bottom center no-repeat;
}
.selected{
	padding: 0 0 16px 0;
	background: url(../common/i/site/arrow-nav.png) bottom center no-repeat;
}
.title{
	display: none;
}

/* @end */
/* @group feature */
div #feature{
	margin: 35px 0 45px 0;
}
li.featured{
	min-height: 303px;
}
/* @end */
/* @group social-icons */
div #social{
	margin: -280px 0 0 -54px;
	background: url(../common/i/site/networking-bg.jpg) top no-repeat;
	max-width: 42px;
	padding: 12px 5px 5px 22px;
}
div #social-inner{
	margin: 103px 0 -340px -54px;
	background: url(../common/i/site/networking-bg.jpg) top no-repeat;
	max-width: 42px;
	padding: 12px 5px 5px 22px;
}
div #social-inner-work{
	margin: 103px 0 -340px -54px;
	background: url(../common/i/site/networking-bg.jpg) top no-repeat;
	max-width: 42px;
	padding: 12px 5px 5px 22px;
}
div #social img{
	padding: 0 0 5px 0;
}
div #social-inner img{
	padding: 0 0 5px 0;
}
div #social-inner-work img{
	padding: 0 0 5px 0;
}
/* @end */

div.case-studies{
	margin: 0 0 0 0;
}
div.case-studies-first{
	margin: 0 0 0 0;
}
#case-studies-first h1{
}
h1.portfolio-header{
	margin: 30px 0 0px 0;
}
div.case-studies-fb{
	width: 400px;
	margin: 0 0 0 0;
}
div.case-studies-fb-first{
	width: 400px;
	margin: 0 0 0 0;
	padding:  0 20px 0 0;
}
div.case-studies-fb p{
	width: 200px;
	padding:  0 20px 0 0;

}
div.case-studies-fb-first p{
	width: 200px;

}
.ch-re{
	padding: 0 0 0 10px;
	color: #7d7b72;
}
/* @group updates-home */
div.updates-container{
	width: 760px;
	margin: 0 auto 0;
}

div.updates-header{
	width: 751px;
	height: 56px;
	background: url(../common/i/site/updates-bg.jpg) center top no-repeat;
	margin: 0 0 0 4px;
	padding: 20px 0 0 0;
}
div.updates-header ul{
	/*border-right: #7d7b72 solid 1px;*/
	padding: 0 10px 0 20px;
	margin: -16px 10px 0 0;
}

div.updates-header-inner{
	width: 751px;
	height: 56px;
	background: url(../common/i/site/updates-bg.jpg) center top no-repeat;
	margin: 0 0 0 4px;
	padding: 20px 0 0 0;
}
div.updates-header-inner ul{
	border-right: #7d7b72 solid 1px;
	padding: 0 10px 0 20px;
	margin: -16px 10px 0 0;
}

div.updates-header ul li{
	display: block;
	text-align: right;
}
div.updates-header-inner ul{
	border-right: #7d7b72 solid 1px;
	padding: 0 10px 0 20px;
	margin: -6px 10px 0 0;
}
div.updates-header-inner ul li{
	display: block;
	text-align: right;
}
.date-day{
	font-size: 2.3em;
	color: #7d7b72;
	text-shadow: #f2f0e6 1px 1px;
	padding: 0 0 0 0;
	margin: 6px 0 0 0;
}
.date-day-inner{
	font-size: 2.3em;
	color: #7d7b72;
	text-shadow: #f2f0e6 1px 1px;
	padding: 0 0 0 0;
	margin: 6px 0 0 0;
}
.date-month{
	font-size: 0.9em;
	color: #7d7b72;
	text-shadow: #f2f0e6 1px 1px;
	
}
div.updates-header h2{
	font-weight: normal;
	font-size: 1.5em;
	text-shadow: #f2f0e6 1px 1px;
	padding: 0 0 0 -20px;
}
div.updates-header-inner h2{
	font-weight: normal;
	font-size: 1.5em;
	text-shadow: #f2f0e6 1px 1px;
	padding: 0 0 0 -20px;
}
div.panel-updates{  
	width: 760px; 
	background: transparent url(../common/i/site/case-studies-bg.png) repeat-y; 
	margin: 0 0 70px 0;}

div.panel-updates-inner{  
	width: 760px; 
	background: transparent url(../common/i/site/case-studies-bg.png) repeat-y; 
	margin: 0 0 70px 0;
}

div.panel-inside-updates{ 
	min-height: 240px; 
	background: url(../common/i/site/case-studies-bottom.png) bottom no-repeat; 
	padding: 0px 0 0 0;
	}
div.panel-inside-updates-top{ 
	min-height: 240px; 
	background: url(../common/i/site/case-studies-bottom-top.png) bottom no-repeat; 
	padding: 0px 0 0 0;
	}
.panel-wrapper-updates img{
	padding: 10px 10px 0 5px;
}
.panel-wrapper-updates p{ 
	padding: 10px 20px 10px 20px;
}


a.launch{
	color: #c33200;
	
}
a.launch:hover{
	color: gray;
}

.panel-wrapper-updates ul{ 
	padding: 0px 20px 0px 50px;
	color: #7d7b72;
	
}
.panel-wrapper-updates ul li{
	list-style: circle;
	padding: 0 0 5px 0;
}
/* @end */


#footer{
	width: 100%;
	height: 305px;
	background: url(../common/i/site/footer-mountains.png) center bottom repeat-x;
	margin: -150px 0 0 0;
}

#case-study{
	padding: 0 25px 0 0;
}
#case-study p{
	padding: 10px 0px 10px 15px;
}
div.screen-shot{
	margin: 0 0 0 10px;
}
#example1{
	width: 410px;
	margin: 15px 0 0 0px;
	
}
#site-info{
	width: 549px;
	margin: 0 20px 0 0;
}
#site-info p strong{
	color: #3d3739;
}
#site-sidebar{
	margin: 12px 0 0 0;
}
#site-sidebar p.launch-button{
	width: 151px;
	height: 36px;
	padding: 0 0 0 0;
	margin: 10px 0 0 0;
	background: url(../common/i/case-studies/launch-sprite.jpg) 0 0;
}
#site-sidebar p.launch-button:hover{
	width: 151px;
	height: 36px;
	background: url(../common/i/case-studies/launch-sprite.jpg) 0 -36px;
}
#site-sidebar p{
	line-height: 0.5em;
}
#site-sidebar h4{
	color: #3d3739;
}
#technology{
	background: #d6d6d6;
	padding: 10px 5px 10px 0px;
	border: #949494 solid 1px;
}
#technology p{
	margin: 10px 10px 10px 10px;
	padding: 0 0 0 0;
}
#technology p.line{
	border-bottom: #949494 solid 1px;
	padding: 0px 0 8px 0;
}
a.buttons{
	color: #3d3739;
	font-size: 1.8em;
	font-weight: bolder;
}
a.buttons:hover{
	color: #b1422d;
}
a.buttons-more{
	color: #3d3739;
	font-size: 1.0em;
	font-weight: bolder;
}
a.buttons-more:hover{
	color: #b1422d;
}
.case-img{
	background: #e7e7e7;
	border: gray solid 1px;
	padding: 3px 3px 3px 3px;
	margin: -5px 0 0 0;
}
#site-shots{
	width: 549px;
	margin: 10px 0 0 8px;
}
#team-photo{
	width: 800px;
	height: 500px;
	background:  url(../common/i/team/about-us2.jpg) center no-repeat;
	border: gray solid 1px;
	padding: 3px 3px 3px 3px;
	margin: 5px 0 5px 6px;
}
ul.photo-list {
	list-style:none;
	margin: -100px 0 0 0;
}

ul.photo-list li {
	height: 500px;
	width:129px;
	float:left;
	margin:0 40px 0 90px;

}

ul.photo-list li a {
	display: inherit;
	height:0;
	weight:129px;
	position:relative;

}

ul.photo-list li a img {
	position:absolute;
}

ul.photo-list li span {
	/* background:url("images/span-bg.png") no-repeat center center; */
	display:block;
	height: 500px;
	width: 129px;
	position:absolute;
	z-index:2;

}



img.portrait{
	border: gray solid 1px;
	padding: 3px 3px 3px 3px;
	background: #e7e7e7;
	margin: 0 20px 0 10px;
}

img.top-button{
	margin: -51px 14px 0 0;
}
img.previous-button{
	margin: -51px 61px 0 0;
}
img.next-button{
	margin: -51px 108px 0 0;
}

.rss-popup {
margin: 100px auto;
padding: 0;
width: 100px;
position: relative;
}
 
div.rss-popup em.im-dan {
background: url(../common/i/team/im-dan.png) no-repeat;
width: 110px;
height: 49px;
position: absolute;
top: 40px;
left: 130px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
div.rss-popup em.im-zach {
background: url(../common/i/team/im-zach.png) no-repeat;
width: 110px;
height: 49px;
position: absolute;
top: 40px;
left: 20px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
div.rss-popup em.im-emily {
background: url(../common/i/team/im-emily.png) no-repeat;
width: 110px;
height: 49px;
position: absolute;
top: 40px;
left: -100px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
 
#rss-icon {
width: 42px;
height: 42px;
background: url(icon.png) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}
div.contact-a{
	min-height: 100px;
	margin: 15px 0 0px 0;
}

div.contact{
	min-height: 320px;
	margin: 15px 0 0px 0;
}
div.contact-bottom{
	min-height: 320px;
	margin: 15px 0 0px 0;
}
div.contact h2{
	font-size: 2.3em;
	font-weight: bold;
	color: #3d3739;
	line-height: 0.9em;
	margin: 0 0 -45px 0;
	padding: 10px 0 0 10px;
}
div.contact-bottom h2{
	font-size: 2.3em;
	font-weight: bold;
	color: #3d3739;
	line-height: 0.9em;
	margin: 0 0 -45px 0;
	padding: 10px 0 0 10px;
}
div.contact form{
	margin: 0 25px 0 0;
}
div.contact-bottom form{
	margin: 0 25px 0 0;
}
div.contact-a p.contact-info{
	margin: 0 0 0 10px;
}
div.contact p{
	margin: 0 25px 0 0;
	font-size: 1.425em;
}
div.contact p a{

	padding: 7px 5px 5px 5px;
	background: #b1b1b1;

}
div.contact p a:hover{
	background: #9d481f;	
	color: white;
}
img.overlay{
	margin: 0 0 0 0;
}


#footer-content{
	width: 960px;
	margin: 0 auto;
	text-align: center;
	padding: 270px 0 0 0;
}
#footer-content a{
	margin: 0 0 0 20px;
}
/* @end */

/* @group Form Elements */

/* form elements
-------------*/
label{}
input{
	background: #3d3739;
	border: none;
	color: white;
	padding: 5px 5px 5px 5px;
	margin: 5px 0 5px 0;
	font-size: 1.2em;
	width: 270px;
	}
input:focus{
	background: #e3e1d7;
	color: gray;
}
input.button{
	background: url(http://717studios.com/common/i/site/button-bg.gif);
	width: 103px;
	height: 45px;
	color: #3d3739;
	}
input.button:hover{
	color: gray;
	}
input.button-lower:hover{
	color: gray;
	}
input.button-lower{
	background: url(http://717studios.com/common/i/site/button-bg-lower.gif);
	width: 103px;
	height: 45px;
	color: #3d3739;
	}
textarea{
	background: #3d3739;
	border: none;
	color: white;
	padding: 5px 5px 5px 5px;
	margin: 5px 0 5px 0;
	font-size: 1.5em;	
		width: 270px;
	}
textarea:focus{
	background: #e3e1d7;
	color: gray;
}




/* @end */

/* @group Misc. */

/* misc
-------------*/



/* @end */

/* @group General */

/* general styles */
.aside { padding: 20px 20px 10px; 
	margin: 15px 0; 
	overflow: hidden;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border: 1px solid #ddd;
	background: #eaeaea;}

.right { float: right;}
.left { float: left;}
.center { margin: auto; text-align: center;}
.clear { clear: both;}
.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}
.hidden { display: none;}
.small {font-size: .75em;}
.smaller {font-size: .68em;}
.last { border: none !important ;}
.pad {padding: 15px; }
.caps {text-transform: uppercase;}
.logo {margin: 0;}
.round {-webkit-border-radius: 3px;	-moz-border-radius:3px;}
hr { border: none; border-bottom: 1px dotted #ccc;}
.success { 
	background: #d9ffd3 url(i/success.png) 10px 10px no-repeat;
	padding: 10px 10px 1px 35px;
	border: 1px solid #a8e4bb;
	-webkit-border-radius: 3px;
	-moz-border-radius:3px;}
	
.error { 
	background: #ffd3d8 url(i/error.png) 10px 10px no-repeat;
	padding: 10px 10px 1px 35px;
	border: 1px solid #e4a8a8;
	-webkit-border-radius: 3px;
	-moz-border-radius:3px;}
	
ul.left {margin-right: 50px;}
.pdf-link { 
	padding-left: 18px; 
	background: url(i/pdf.gif) left center no-repeat; 
	height: 15px;}



/* @end */
/* boxes */
h3{ margin: 10px 10px 0 10px; color:white; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold;  }
			
			.boxgrid{ 
				width: 255px; 
				height: 150px; 
				margin:10px 5px 4px 5px; 
				float:left; 
				background: #e7e7e7;
				border: gray solid 1px;
				padding: 3px 3px 3px 3px; 
				overflow: hidden; 
				position: relative; 
			}
				.boxgrid img{ 
					position: absolute; 
					top: 3px; 
					left: 3px; 
					border: 0; 
				}
				.boxgrid p{ 
					padding: 0 10px; 
					color:#afafaf; 
					font-weight:bold; 
					font:10pt "Lucida Grande", Arial, sans-serif; 
				}
				
			.boxcaption{ 
				float: left; 
				position: absolute; 
				padding: 15px 0 0 0;
				background: url(http://717studios.com/common/i/site/blackmtn.png) top center; 
				height: 200px; 
				width: 100%; 
				opacity: .9; 
				/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 			}
 				.captionfull .boxcaption {
 					top: 196px;
 					left: 0;
 				}
 				.caption .boxcaption {
 					top: 220;
 					left: 0;
 				}