@charset "utf-8";
/* 
CSS for 1stopstudios
kyle@1stopstudios.com
www.1stopstudios.com
*/

p {margin:5px 0 15px; line-height: 1.8em;}
html {background:#242424 url(../images/bg.jpg) no-repeat center top; color:#fff;font-family:'Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif; font-size:.75em}
a {
	color: #c30001;
}
a:hover {
	color: #9c180c;
}
h2 {
	font-size:1.4em;
	font-variant:small-caps;
	font-weight:bold;
	color:#BC0202;
}

#top {
	background: transparent url(../images/topline.jpg) repeat-x top center;
	height: 8px;
}
#header {
	width:920px;
	margin: 0 auto;
	position: relative;
}
h1#logo {
	position: absolute;
	top:0;
	left:00px;
	text-indent: -999999px;
	display: block;
	margin: 0;
	padding: 0;
	height: 158px;
	width: 290px;
	background: transparent url(../images/1stopstudios.png) no-repeat left top;
}
#container {
	width:920px;
	margin:0 auto;
}
#main {
	float:right;
	width:920px;
	position:relative;
}
#side {
	float:left;
	width:300px;
}

ul#nav {
	float:right;
	list-style: none;
	list-style-type: none;
	margin:30px 20px 0 0;
}  
ul#nav li { 
	font-variant:small-caps;
	display: block; 
	float: left;
	padding: 10px 7px; 
	margin: 0; 
	/*margin-left:10px;  
	margin-bottom: 2px; */
	
}  
ul#nav li:hover {
	background: transparent url(../images/bg-test.png) no-repeat center center ;
}
ul#nav li a { 
	color: #999;
	text-decoration: none; 
	outline: none;
} 
ul#nav li a:active {outline: none;} 
ul#nav li a:hover { 
	color: #fff; 
}
ul#nav li.home a {
	float: left;
	display:block;
	background: transparent url(../images/home1.png) no-repeat -22px 16px;
	width: 112px;
	height: 40px;
	text-indent: -99999px;
} 
	ul#nav li.home.active a {
		background: transparent url(../images/home1.png) no-repeat -22px -41px;
	}
ul#nav li.portfolio a {
	float: left;
	display:block;
	/*background: transparent url(../images/portfolio.png) no-repeat left top;*/
	background: transparent url(../images/portfolio1.png) no-repeat 0px 16px;
	width: 160px;
	height: 40px;
	text-indent: -99999px;
}
	ul#nav li.portfolio.active a {
		background: transparent url(../images/portfolio1.png) no-repeat 0px -41px;
	}
ul#nav li.services a {
	float: left;
	display:block;
	background: transparent url(../images/services1.png) no-repeat -8px 16px;
	width: 148px;
	height: 40px;
	text-indent: -99999px;
}
	ul#nav li.services.active a {
		background: transparent url(../images/services1.png) no-repeat -8px -41px;
	}
ul#nav li.hire a {
	float: left;
	display:block;
	background: transparent url(../images/hire-me1.png) no-repeat -16px 16px;
	width: 130px;
	height: 40px;
	text-indent: -99999px;
}
	ul#nav li.hire.active a {
		background: transparent url(../images/hire-me1.png) no-repeat -16px -41px;
	}

.headline {
	margin:50px 0 20px; 
	text-align:center;
}
.sectitle {
	 text-align:center; 
	 margin:50px 0 20px 0;
}
/*img.featimage {
	border:3px solid #999;
	margin:0 0 0 0;
}
img.featimage:hover {
	border:3px solid #D0202D;
}*/
.companyname {
	font-family:"MyriadPro-Bold","MyriadPro",arial,Helvetica,sans-serif;
	font-size:24px;
	text-align:right;
	margin:5px 0;
}
p.pnotes {
	font-variant:small-caps;
	text-align:right;
	color:#666;
	margin:0 0 3px 0;
}
p.notes {
	text-align:right;
	padding-left:300px;
	color:#999;
	margin:0 0 5px 0;
}

p.validation {
	margin:500px 0 0;
	text-align:center;
	}
.validation img {margin:0 4px;}

.controls {	margin:0 0 0 574px;}
*html .controls {margin:0 0 0 560px;}
.controls a{
	display:block;
	float:left;
	margin:3px 5px;
	height:12px;
	width:12px;
	color:#900;
	background:transparent url(../images/featured-off.jpg) no-repeat center top scroll;
	text-indent:-99999px;
	outline:none;
	font-weight:bold;
	text-decoration:none;
}
.controls a.active{background:transparent url(../images/featured-on.jpg) no-repeat center top scroll;}
.controls a:hover{background:transparent url(../images/featured-hover.jpg) no-repeat center top scroll;}

.content {color:#aaa;}
.services h2 {
	font-family:"MyriadPro-Bold","MyriadPro",arial,Helvetica,sans-serif;
	font-size:30px;
	margin:15px 0 5px;
	color:#dee;
}
.services p {
	margin-left:30px;
}

.footer {
	float:left;
	margin:10px 0;
	width:100%;
	text-align:center;
	font-size:10px;
	color:#888;
}


ul.portfoliomenu {
	margin:0;
	padding:0;
	list-style:none;
	list-style-type:none;
	width:640px;
	float:left;
}
ul.portfoliomenu li {
	float:left; 
	display:block;
	padding:3px 50px 10px;
	font-size:14px;
	font-variant:small-caps;
	color:#fff;
	text-decoration: underline;
	cursor: pointer;
}
ul.portfoliomenu li:hover {
	color:#900;
}
ul.portfoliomenu li.selected {
	color:#005700 !important;
}

.smallimages {
	float: left;
	width:290px;
	height: 125px;
	margin: 15px;
	overflow: hidden;
	position: relative;
}
.smallimages img {
	z-index: 1;
}
.smallimages div {
	z-index: 10;
	position: absolute;
	bottom: 0;
	right: 0;
	background: #000;
	filter: alpha(opacity=60); /* internet explorer */
	-khtml-opacity: 0.6;      /* khtml, old safari */
	-moz-opacity: 0.6;       /* mozilla, netscape */
	opacity: 0.6;           /* fx, safari, opera */
	-ms-filter:'alpha(opacity=60)';
	width:290px;
	height: 38px;
	font-size: 24px;
	text-align: right;
}
.smallimages p.name {
	z-index: 10;
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 0px 10px 5px;
	color: #fff;
	font-size: 24px;
}
.smallimages p.what {
	z-index: 10;
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 5px 12px;
	color: #fff;
	font-size: 10px;
}
.smallimages .whole {
	width:290px;
	height: 125px;
	position: absolute;
	top:0;
	left: 0;
	z-index: 20;
	background: #fff;
}

#homework {
	float: left;
	width: 920px;
	height: 293px;
	position: relative !important;
	/*margin-top: 120px;*/
	background: transparent url(../images/workbox.png) no-repeat left top;
	z-index:2;
}
#homework .images {
	float: left;
	height: 293px;
	overflow: hidden;
	width:920px;
}
#homework .image .hold {
	float: left;
	height: 293px;
	width:2760px;
}
#homework img {
	z-index:5;
}
#homework .slides {
	float: left;
	width: 920px;
	height: 293px;
	overflow: hidden;
}
#homework .slides .only {
	float: left;
	width: 2760px;
	height: 293px;
}
#homework .border {
	position: absolute;
	top:0;
	left: 0;
	height: 293px;
	width:920px;
	background: transparent url(../images/workbox.png) no-repeat left top;
	z-index: 8;
}
.viewportfolio {
	position: absolute;
	top:270px;
	left:670px;
	z-index: 10;
}





	#slider{}	
	#slider ul, #slider li{
		margin:0;
		padding:0;
	list-style:none;
		}
	#slider li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:920px;
		height:293px;
		overflow:hidden; 
	}	
	#prevBtn, #nextBtn{ 
		display:block;
		width:26px;
		height:26px;
		position:absolute;
		left:30px;
		top:280px;
		z-index: 20;
	}	
	#nextBtn{ 
		left:62px;
	}														
	#prevBtn a, #nextBtn a{  
		display:block;
		width:26px;
		height:26px;
		background:url(../images/btns.png) no-repeat -4px -4px;	
		text-indent: -99999px;
		z-index: 20;
		outline: none;
	}
	#prevBtn a:hover {
		background: url(../images/btns.png) no-repeat -3px -33px;
	}		
	#nextBtn a{ 
		background:url(../images/btns.png) no-repeat -33px -4px;	
	}
	#nextBtn a:hover{ 
		background:url(../images/btns.png) no-repeat -33px -33px;	
	}
	
.home2col {
	float: left;
	width: 440px;
	margin-top: 30px;
}
.col1 {
	margin-right:40px;
}
.home2col p {
	margin: 10px 20px;
	color: #bbb;
}
.col2 {
	background: transparent url(../images/contactbox.png) no-repeat left 10px;
	padding: 0 20px;
	width: 400px;
	height: 460px;
	/*filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;*/
}
h2.aboutme {
	background: transparent url(../images/about-me.png) no-repeat left top;
	height: 19px;
	width: 130px;
	text-indent: -99999px;
	margin-top: 30px
}
h2.whatido {
	background: transparent url(../images/what-i-do.png) no-repeat left top;
	height: 19px;
	width: 120px;
	text-indent: -99999px;
	margin-top: 30px
}
h2.contactme {
	background: transparent url(../images/contact-me.png) no-repeat left top;
	height: 19px;
	width: 160px;
	text-indent: -99999px;
	margin-top: 30px;
	margin-bottom: 18px;
}

/* CONTACT STUFF */
fieldset {
	border: 2px solid #222;
}
.contact ul {list-style:none; list-style-type:none;}
.alert {color:#640001; padding-bottom:10px;}
.error {color:#fff; margin-left:120px;}
ul.forms li label {
	/*cursor:pointer;*/
	display:block;
	float:left;
	/*font-weight:bold;*/
	width:80px;
	padding: 4px 0 0 30px;
}
ul.forms li label.long {
	width: 100%;
	clear: both;
	margin-bottom: 4px;
}
ul li { padding-bottom:16px; }
ul.forms li input {
	width:220px;
}
ul.forms li input, ul.forms li textarea, ul.forms li.buttons button {
	border:1px solid #640001;
	background-color:#333;
	color:#ccc;
	font-family:Georgia,"Times New Roman",Times,serif;
	font-size:1em;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:normal;
	padding:3px;
}
ul.forms li textarea {
	/*height:20em;*/
	line-height:1.288em;
	width:300px;
	margin: 0 50px;
}
ul.forms li.buttons button:hover {
	background:#940001 none repeat scroll 0%;
}
ul.forms li input:focus, ul.forms li textarea:focus {
	border-color:#ae0001;
}
ul.forms li.submit {
	text-align: center;
}
ul.forms li.submit button.submit {
	background-color:#222;
	border:1px solid #640001;
	color: #fff;
	cursor:pointer;
	height:30px;
	width:150px;
}

a.atip {
	position:relative;
}
.tooltip{ 
	/*position: absolute; 
	top: 0; 
	left: 0; 
	z-index: 3; 
	display: none;
	padding:5px;
	background:#333;
	border:1px solid #ccc;
	*/
	background-color:#F5F5B5;
border:1px solid #DECA7E;
color:#303030;
font-family:sans-serif;
font-size:12px;
line-height:18px;
padding:10px 13px;
position:absolute;
text-align:center;
top:50px;
left:50px;
z-index:2;
}
a div.tooltip {
	padding:5px;
	background:#333;
}



/*.foliobox {
	float: left;
	width: 428px;
	margin-bottom: 30px;
	border:1px solid #666;
	padding:10px;
}*/
.foliobox.col1 {
	margin-right:20px;
}
.foliobox h3 {
	text-align:right;
	font-size:16px;
	font-weight:bold;
	margin:0;
}
.foliobox > p {
	text-align:right;
	margin:0;
}
span.det {
	color:#999;
	font-variant:small-caps;
	margin-right:6px;
}

ul.foliobox li, .singleclient, .formcontainer {
	width:428px;
	margin-bottom:30px;
	border:1px solid #666;
	padding:10px;
	float:left;
	position:relative;
	background:#444;
	margin-right:10px;
	-webkit-border-radius:3px; 
	-moz-border-radius:3px; 
	border-radius:3px; 
	background:rgba(102,102,102,0.2) !important;
}
	ul.foliobox li:hover, .singleclient:hover {
		background:#666;
		background:rgba(102,102,102,0.6) !important;
	}
ul.foliobox li:nth-child(2n-1) {
	margin-right:20px !important;
}
ul.foliobox li:nth-child(2n) {
	margin-right:0px !important;
}
ul.foliobox li a > span {
	position:absolute;
	bottom:-16px;
	right:25px;
	padding:8px;
	color:#fff;
	background:#222;
	text-decoration:none;
	border:1px solid #333;
	background:rgba(0,0,0,0.6);
	-webkit-border-radius:3px; 
	-moz-border-radius:3px; 
	border-radius:3px; 
}
	ul.foliobox li:hover span {
		background:#000;
		background:rgba(0,0,0,1.0);
	}
ul.foliobox li a span, .foliobox a {
	text-decoration:none;
}
.singleclient {
	width:600px;
	margin-right: 0;
}
.clientinfo {
	float: left;
	width:268px;
	margin-right: 30px;
}
.clientinfo p {
	font-size: 1.1em;
	line-height: 1.5em;
	color: #ddd;
}
.clientinfo p.name {
	text-align:right;
	font-size:1.4em;
}
.clientinfo ul {
	list-style: disc;
	list-style-type: disc;
	margin:30px 0 0 30px;
}
.clientinfo ul li {
	list-style: disc;
	list-style-type: disc;
	margin-bottom: 6px;
	color: #c30001;
	font-size: 1.0em;
}
.clientinfo ul li.code {
	line-height:3.0em;
}
.clientinfo ul li span {
	color: #ccc;
}
.clientinfo ul li.code span, .clientinfo ul li.code abbr {
	padding: 5px;
	background: #333;
	border: 1px solid #888;
	cursor: help;
	background:rgba(22,22,22,0.8);
	-webkit-border-radius:3px; 
	-moz-border-radius:3px; 
	border-radius:3px; 
}
.clientinfo p.date {
	margin:0;
	text-align: right;
	font-size: 12px;
	text-transform: uppercase;
}
.clientinfo p.service {
	color:#c30001;
	text-align: right;
	font-size: 12px;
	margin: 0 0 20px;
}
.clientinfo p.like {
	font-size: 13px;
}

.threecol {
	width:266px;
	float:left;
	margin-top:10px;
}
.threecol.colone{
	margin-right:30px;
}
.threecol.coltwo {
	border-left:1px solid #444;
	border-right:1px solid #444;	
	padding:0 30px;
}
.threecol.colthree {
	margin-left:30px;
}
.threecol h2 {
	font-size:2.8em;
	font-variant:small-caps;
	color:#fff;
}
.threecol p.intro {
	font-size:1.12em;
	font-style:italic;
	color:#c30001;
	line-height:1.2em;
	padding-bottom:10px;
	border-bottom:1px solid #999;
}
.threecol p {
	font-size:0.95em;
}
h2 span.tiny {font-size:0.5em;}
.threecol ul {
	list-style: disc;
	list-style-type: disc;
	margin:15px 0 0 30px;
}
.threecol ul li {
	list-style: disc;
	list-style-type: disc;
	margin-bottom: 6px;
	color: #c30001;
	font-size: 1.0em;
	padding:0;
}
.threecol ul li span {
	color: #ccc;
}

.twocol {
	width:429px;
	float:left;
	margin-top:10px;
}
.twocol.colone{
	margin-right:30px;
}
.twocol.coltwo {
	border-left:1px solid #444;	
	padding:0 0 0 30px;
}
div.formcontainer {
	width: 407px;
	margin-right:0;
}
span.required, span.error  {
	color:#A90C07;
}
span.error {
	
}
ul.contact {
	margin: 40px 0;
}
ul.contact li.email {
	background: transparent url(../images/hello-at-email.png) no-repeat left top;
	height: 18px; width: 329px;
	text-indent: -99999px;
}
ul.contact li.phone {
	background: transparent url(../images/623.252.4218.png) no-repeat left top;
	height: 17px; width: 144px;
	text-indent: -99999px;
}

#footer {
	clear:both;
	padding: 20px 0px;
	color: #777;
	font-size: 11px;
}
#footer .top {
	display:inline;
	float:right;
}