@charset "utf-8";
/********************************
************CYSTYLE**************
**WEB DESIGN & INTERACTIVE MEDIA*
**CSS BY CYRUS EVANADO MARCH'09**
*********************************
*********************************/

*{margin: 0; padding: 0; border: none;}

/*------Clear Fix------*/

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

/* Hides from IE-mac \*/

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

/* End hide from IE-mac */
/*----------------------*/

body{
	font: 13px Arial, Helvetica, sans-serif;
	color: #888;
	background: url(../images/headerBg2.jpg) #fff repeat-x;
}

h1{
	font-size: 30px;
	color: #555;
	font-variant: small-caps;
}

h2{
	font-size: 30px;
	color: #FF704D;
	padding: 50px 0 0 0;
	letter-spacing: -1px;
}

a{
	text-decoration: none;
}

.wrapper{
	margin: 0 auto;
}

/************************************** HEADER */
#header{
	height: 360px;
	width: 950px;
	margin: 0 auto;
	background: url(../images/headerBg2.jpg) repeat-x;
}

#cyLogo{
	float: left;
	width: 290px;
	height: 69px;
	padding: 25px 0 0 0;
	background: url(../images/cystyleLogo.png) no-repeat bottom;
}

#cyLogo h1, h2 span{
	display: none;
}

/************************************** NAVIGATION */
.mainNav{
	width: 600px;
	padding: 5px 0 5px 0;
	position: fixed;
	top: 35px; right: 0;
	background: url(../images/transbg.png) repeat;
}

.mainNav2{
	float: right;
	width: 430px;
	padding: 5px 0 5px 0;
	margin:30px 0 0 0;
	border-top: #FF704D 3px solid;
	visibility: hidden;
}

.navigation{
	float: left;
	padding: 20px 10px 0 10px;
}

.firstnavigation{
	float: left;
	padding: 20px 10px 0 10px;	
	margin-left: 10px;
}

.navigation:hover, .firstnavigation:hover{
	background: url(../images/transbg2.png) repeat;	
}

.topNavitem + .popup{ visibility: hidden; }

.topNavitem:hover + .popup{ visibility: visible;}

.topNavitem a, a:visited{
	font-size: 20px;
	color: #777;
	height: 30px;
	padding: 17px 0 0 0;
	text-align: center;
}

.topNavitem a:hover{ 
	color: #00bcbc;
	background: url(../images/rollArrow.png) no-repeat top;
}

.popup{
	color: #555;
	font-size: 10px;
	padding: 10px 0 0 0;
	text-align: center;
}

/************************************** SUBHEADER */
#subhead{
	float: left;
	width: 950px;
	height: 250px;
	margin: 30px 0 0 0;
	padding: 40px 0 0 0;
	background: url(../images/paperbg.jpg) top center no-repeat;
	font: 30px Arial, Helvetica, sans-serif;
	color: #bbb;
	letter-spacing: -1px;
}

#subhead span.quoteHead{
	font-size: 40px;
	font-weight: bold;
	line-height: 20px;
	letter-spacing: -2px;
}

#subhead a, #subhead a:visited{
	float: left;
	margin: 0 0 0 280px;
	font: italic 14px "Times New Roman", Times, serif;
	color: #00bcbc;
	text-decoration: underline;
	letter-spacing: 0;
}

#subhead a:hover{
	color: #FF704D;
}

#leftSub{
	float: left;
	font-size: 150px;
	font-weight: bolder;
	font-variant: normal;
	letter-spacing: -10px;
	width: 460px;
	padding: 0 0 0 45px;
}

#rightSub{
	float: left;
	width: 400px;
	padding: 40px 0 0 0;
}

/************************************** MAIN CONTENT */
#featuredContainer, #contactContainer{
	clear: both;
	min-height: 600px;
	margin: 0 auto; 
	border-top: #eee 1px dotted;
	background: top center no-repeat url(../images/sectionshadow.jpg);
}

#featuredContainer .leftContent{
	padding: 0 5px 0 20px;
}

#featuredContainer h2{
	padding-top: 10px;	
}

#featuredContainer .rightContent{
	padding-top: 20px;
}

#aboutContainer{
	clear: both;
	min-height: 800px;
	margin: 0 auto;
	background:  #f1edd5;
	border-bottom: #ddd 1px dotted;
}

#aboutContainer .rightContent{
	float: left;
	width: 650px;
	background: url(../images/cy2.png) top center no-repeat;
	padding: 0 0 0 10px;
	margin: 60px 0 0 0;
}

#portfolioContainer{
	clear: both;
	min-height: 1900px;
	margin: 0 auto; 
	background: #CCFFFF;	
	border-top: #ddd 1px dotted;
	border-bottom: #ddd 1px dotted;
}

#portfolioContainer h2{
	padding-top: 20px;	
}

#contactContainer .rightContent .quotes{
	margin-left: 220px;
}

.section{
	clear: both;
	width: 950px;
	margin: 0 auto;
}

.leftContent{
	float: left;
	width: 240px;
	margin: 0 10px 20px 0;
	font-size: 13px;
	padding: 50px 5px 0 20px;
}

.leftContent h2{
	margin: 30px 0 0 0;
}

.leftContent p.firstp{
	margin: 30px 0 0 0;
	color: #FF704D;
}

.leftContent p{
	font-size: 15px;
}

.leftContent a, .leftContent a:visited{
	color:#00bcbc;
}

.leftContent a:hover{
	color: #FF704D;
}

.leftContent li{
	list-style-type: none;
}

.leftContent .quotes{
	font: italic 16px "Times New Roman", Times, serif;
	margin: 0 0 20px 0;
	padding: 20px 0 20px 0;
	line-height: 20px;
	border-bottom: #CCC dotted thin;
}

.leftContent .quotes a, leftContent .quotes a:visited{
	font-size: 15px;
	color: #00bcbc;
	text-decoration: underline;
}

.leftContent .quotes a:hover{
	color: #FF704D;
}

.rightContent{
	float: left;
	width: 650px;
	padding: 90px 0 0 10px;
}

.rightContent .quotes{
	font: italic 20px "Times New Roman", Times, serif;
	margin: 50px 0 30px 200px;
	padding: 0 0 20px 0;
	line-height: 20px;
	border-bottom: #CCC dotted thin;
}

.rightContent a, .rightContent a:visited{
	color:#00bcbc;
}

.rightContent a:hover{
	color: #FF704D;
}

.rightContent li{
	list-style-type: none;
}

.rightContent .contentImagePlacer{
	float: left;
	width: 197px;
	height: 600px;
	font-size: 24px;
	text-align: center;
	margin: 0 20px 0 20px;
}

.rightContent h1{
	display: none;
}

.rightContent .contentText{
	margin: 45px 30px 30px 0;
}

.bigContent{
	clear: both;
	width: 950px;
	padding: 0 0 0 5px;
}

.bigContent h2{
	float: left;
	padding: 0 0 10px 20px;
}

.bigContent ul.portfolioNavFilter{
	clear: both;
	margin: 10px 25px 5px 15px;
}

.bigContent ul.portfolioNavFilter li{
	list-style-type: none;
	display: inline;
	padding: 10px;
	border-right: #FF704D thin groove;
}

.bigContent ul.portfolioNavFilter li.lastNav{ 
	border-right: none; 
	margin-right: 0; 
	padding-right: 0; 
}

.bigContent ul.portfolioNavFilter li a, 
.bigContent ul.portfolioNavFilter li a:visited{
	color: #FF704D;
	font-size: 16px;
	text-decoration: underline;
}

.bigContent ul.portfolioNavFilter li a:hover{
	color: #00bcbc;
}

.bigContent ul.portfolioNavFilter li.current a{
	color: #555;
}

.bigContent ul.featuredWork{
	width: 950px;	
}

.bigContent ul.featuredWork li{
	float: left;
	width: 260px;
	display: inline;
	padding: 25px;
}

.bigContent ul.featuredWork li:hover{
	background: #E5FFFF;
}

/************************************** FEATURED WORK / PORTFOLIO */
.featuredWork{
	float: left;
	margin: 30px 0 0 0;
}

.featuredBig{
	float: left;
	margin: 20px 0 0 50px;
}

.featuredWork p.clientInfo, .featuredBig p.clientInfo{
	color: #FF704D;
	font-size: 16px;
}

.featuredWork li p a, li p a:visited,
.featuredBig li p a, li p a:visited{
	color: #00bcbc;
	font-weight: bold;
	font-size: 13px;
	text-decoration: underline;
}

.featuredWork a:hover, .featuredBig a:hover{
	color: #FF704D;
}

.featuredWork p.role, .featuredBig p.role{
	color: #777;
	font-size: 14px;
}

.featuredWork li{
	float: left;
	width: 260px;
	display: inline;
	padding: 25px;
}

.featuredBig li{
	float: left;
	width: 500px;
	display: inline;
	padding: 25px;
}
.featuredWork li p, .featuredBig li p{
	padding: 0 0 5px 0;
}

.featuredWork li:hover, .featuredBig li:hover{
	background: #E5FFFF;
}

.featuredWork li a.imageOver{
	display: block;
	overflow: hidden;
	height: 0px;
	padding: 170px 0 0 0;
	margin: 10px 0 5px 0;
}

.featuredBig li a.imageOver{
	display: block;
	overflow: hidden;
	height: 0px;
	padding: 339px 0 0 0;
	margin: 10px 0 5px 0;
}

.featuredBig #mallariFeatured{background: url(../images/screenshots/mallariFeatured.jpg) no-repeat 0 0;}

.featuredBig #mallariFeatured:hover{background: url(../images/screenshots/mallariFeatured.jpg) no-repeat 0 -339px;}

.featuredWork #mallari{background: url(../images/screenshots/mallariLink.jpg) no-repeat 0 0;}

.featuredWork #mallari:hover{background: url(../images/screenshots/mallariLink.jpg) no-repeat 0 -170px;}

.featuredWork #thecoolmeter{background: url(../images/screenshots/thecoolmeterLink.jpg) no-repeat 0 0;}

.featuredWork #thecoolmeter:hover{background: url(../images/screenshots/thecoolmeterLink.jpg) no-repeat 0 -170px;}

.featuredWork #newstudent{background: url(../images/screenshots/newstudentLink.jpg) no-repeat 0 0;}

.featuredWork #newstudent:hover{background: url(../images/screenshots/newstudentLink.jpg) no-repeat 0 -170px; }

.featuredWork #jacksonriker{background: url(../images/screenshots/jacksonrikerLink.jpg) no-repeat 0 0;}

.featuredWork #jacksonriker:hover{background: url(../images/screenshots/jacksonrikerLink.jpg) no-repeat 0 -170px; }

.featuredWork #sloperiders{background: url(../images/screenshots/sloperidersLink.jpg) no-repeat 0 0;}

.featuredWork #sloperiders:hover{background: url(../images/screenshots/sloperidersLink.jpg) no-repeat 0 -170px; }

.featuredWork #targetblank{background: url(../images/screenshots/targetblankLink.jpg) no-repeat 0 0;}

.featuredWork #targetblank:hover{background: url(../images/screenshots/targetblankLink.jpg) no-repeat 0 -170px; }

.featuredWork #bert{background: url(../images/screenshots/bertLink.jpg) no-repeat 0 0;}

.featuredWork #bert:hover{background: url(../images/screenshots/bertLink.jpg) no-repeat 0 -170px; }

.featuredWork #cypromo{background: url(../images/screenshots/cypromoLink.jpg) no-repeat 0 0;}

.featuredWork #cypromo:hover{background: url(../images/screenshots/cypromoLink.jpg) no-repeat 0 -170px; }

.featuredWork #djdeathtouch{background: url(../images/screenshots/djdeathtouchLink.jpg) no-repeat 0 0;}

.featuredWork #djdeathtouch:hover{background: url(../images/screenshots/djdeathtouchLink.jpg) no-repeat 0 -170px; }

.featuredWork #naughtynightmare{background: url(../images/screenshots/naughtynightmareLink.jpg) no-repeat 0 0;}

.featuredWork #naughtynightmare:hover{background: url(../images/screenshots/naughtynightmareLink.jpg) no-repeat 0 -170px; }


/************************************** FORMS */
#contactCy{
	width: 600px;
	margin: 30px 0 0 70px;
}

#contactCy input, #contactCy textarea{
	padding: 5px;
	width: 400px;
	font-family: Helvetica, sans-serif;
	font-size: 14px;
	margin: 0px 0px 10px 0px;
	border: 1px solid #ccc;
}

#contactCy textarea{
	height: 90px;
}

#contactCy textarea:focus, #contactCy input:focus{
	border: 1px solid #00bcbc;
}

#contactCy input.submitButton{
	width: 100px;
	float: left;
	margin: 0 0 0 472px;
	color: #FF704D;
	background: #f1edd5;
}

#contactCy input.submitButton:hover{
	color: #00bcbc;
	background: #CCFFFF;
}


#contactCy input.clearButton{
	width: 100px;
	float: left;
	margin: 0 0 0 10px;
	color: #FF704D;
	background: #f1edd5;
}

#contactCy input.clearButton:hover{
	color: #00bcbc;
	background: #CCFFFF;
}

label{
	float: left;
	margin: 0 10px 0 0;
	text-align: right;
	width: 150px;
	padding-top: 5px;
	font-size: 13px;
}


/************************************** FOOTER */
#footerWrap{
	clear: both;
	height: 200px;
	background: url(../images/footerBg.jpg) repeat-x #00cacc;
	font-size: 11px;
	color: #fff;
	margin: 150px 0 0 0;
}

#footerWrap p{
	padding: 0; margin: 0;
}

#footerWrap a, #footerWrap a:visited{
	color: #fff;
	font-size: 11px;
	text-decoration: underline;
}

#footerWrap a:hover{
	color: #FF704D;
}

#footerWrap a.current{
	color: #333;
	text-decoration: underline;
}

#footerInfo {
	width: 950px;
	margin: 0 auto;
}

#footerLeft{
	float: left;
	width: 414px;
	height: 200px;
	background: url(../images/cyTwitterBg.png) no-repeat;
}

#footerRight{
	float: left;
	width: 260px;
	padding: 90px 0 0 0;
	margin: 0 0 0 250px;
}

#footerRight ul{
	padding: 0 0 10px 0;
}

#footerRight li{
	display: inline;
	list-style-type: none;
	padding: 0 5px 0 0;
}

#footerRight p.validate{
	padding: 10px 0 0 0;
}