/* 
Project: Helena Gavshon
Filename: screen.css
Date: December 2009
*/



body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	height: 100%;  
	font-size: 62.5%;	
	color: #666;
	background: #fff;
	text-align: center;
	font-family: arial, sans-serif;
    }


.home{
	background: #FF3366;
}


.about{
	background: #B4CC01;
}


.portfolio{
	background: #5A3799;
}


.contact{
	background: #FF6600;
}


.terms{
	background: #999;
}



body a img {
	border: none;
}


.clearing{	
	clear: both;
}





/*------ clear standard browser styles ------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}



/*------ general styles ------*/


.clear {
	clear: both;
	overflow: hidden;
	line-height: 0 !important;
	height: 0 !important;
	font-size: 0 !important;
	margin: 0 !important;
	}


.disguise {
	position: absolute;
	left: -10000px;
	}
	
.hide {
	display: none;
	}
	

hr{
	display: none;
}
	
	
/* http://positioniseverything.net/easyclearing */
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0;
	clear: both; 
	visibility: hidden;
	}

.clearfix {
	display: inline-table;
        min-height: 0;
	}

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */




/*------ wrap ------*/


#wrap {
	margin: 0px auto 0px auto;
	padding: 0 0 0 0;
	width: 900px;
	text-align: left;
}



/*------ title ------*/


#title {
	float: left;
	width: 900px;
	height: 134px;
	background: url("../img/title-home.gif") no-repeat 100% 100%;
}


.about #title {
	background: url("../img/title-about.gif") no-repeat 100% 100%;
}



.portfolio #title {
	background: url("../img/title-portfolio.gif") no-repeat 100% 100%;
}


.contact #title {
	background: url("../img/title-contact.gif") no-repeat 100% 100%;
}


.terms #title {
	background: url("../img/title-terms.gif") no-repeat 100% 100%;
}



#title a{
	float: right;
	width: 425px;
	height: 69px;
	margin: 65px 0 0 0;
	color: #FF3366;
	font-size: 1px;
	background: url("../img/title-home.gif") no-repeat 100% 100%;
}


.about #title a{
	color: #B4CC01;
	background: url("../img/title-about.gif") no-repeat 100% 100%;
}


.portfolio #title a{
	color: #5A3799;
	background: url("../img/title-portfolio.gif") no-repeat 100% 100%;
}


.contact #title a{
	color: #ff6600;
	background: url("../img/title-contact.gif") no-repeat 100% 100%;
}


.terms #title a{
	color: #999;
	background: url("../img/title-terms.gif") no-repeat 100% 100%;
}



/*------ nav ------*/


#nav {
	float: left;
	width: 900px;
	font-size: 1.2em;
	font-weight: bold;
}



#nav li{
	float: left;
	margin: 0 4px 0 0;
}


#nav li a{
	display: block;
	padding: 5px 22px 3px 22px;
	text-decoration: none;
	color: #fff;
	background: #FF99B3;
}


.about #nav li a{
	background: #DAE680;
}


.portfolio #nav li a{
	background: #AD9BCC;
}



.contact #nav li a{
	background: #FFB380;
}



.terms #nav li a{
	background: #ccc;
}


#nav li a:hover,
#nav li.here a{
	color: #FF3366;
	background: #fff;
}


.about #nav li.here a{
	color: #A9CC00;
}


.portfolio #nav li.here a{
	color: #5A3799;
}


.contact #nav li.here a{
	color: #FF6600;
}


#nav li.home a:hover{
	color: #FF3366;
}


#nav li.about a:hover{
	color: #A9CC00;
}


#nav li.portfolio a:hover{
	color: #5A3799;
}


#nav li.contact a:hover{
	color: #FF6600;
}
	


/*------ content ------*/


#content {
	float: left;
	width: 806px;
	min-height:306px;
	height:auto !important;
	height:306px;
	background: #fff;
	padding: 44px 47px 10px 47px;
	margin: 0 0 43px 0;
}



/*------ #gallery ------*/


#gallery  {
	float: left;
	width: 405px;
}


#gallery form{
	float: left;
	padding: 26px 24px 10px 27px;
	margin: 0 0 10px 0;
	background: #E5E5E5;
}


#gallery form h3{
	font-size: 1.8em;
	color: #FF6600;
	padding-bottom: 15px;
}


#gallery form p{
	float: left;
	width: 350px;
	font-size: 1.4em;
	margin-bottom: 5px;
}


#gallery form p.send{
	margin: 0 0 10px 0;
}


#gallery form label{
	float: left;
	width: 80px;
}


#gallery form input,
#gallery form textarea{
	float: right;
	width: 264px;
	padding: 2px;
	border: 1px solid #666;
}


#gallery form textarea{
	height: 70px;
	font-family: arial;
	font-size: 12px;
}


#gallery form p.warning{
	font-size: 1.3em;
	color: #990000;
	margin: 0 0 10px 0;
}


#gallery form label.error{
	color: #990000;
	font-size: 0.8em;
	float: right;
	width: 264px;}	
	

#gallery form span.warning{
	float: left;
	width: 264px;
	font-size: 0.8em;
	color: #990000;
}


#gallery form .submit input{
	float: right;
	width: 90px;
	border: none;
	margin: 7px -3px 0 0;
	padding: 0 3px 3px 0;
	font-size: 13px;
	cursor: pointer;
	background: #FF6600 url("../img/send-bg.gif") no-repeat 100% 100%;
	color: #fff;
}


/*------ #mainContent ------*/


#mainContent {
	float: right;
	width: 360px;
	margin: 93px 0 0 0;
}



#mainContent .intro{
	font-size: 1.8em;
	color: #FF3366;
	padding: 0 0 23px 0;
	line-height: 1.1em;
}


.about #mainContent .intro{
	color: #B4CC01;
}


.portfolio #mainContent .intro{
	color: #5A3799;
}



.contact #mainContent .intro{
	color: #FF6600;
}





#mainContent a{
	text-decoration: none;
	color: #FF3366;
	font-weight: bold;
}


.about #mainContent a{
	color: #B4CC01;
}


.portfolio #mainContent a{
	color: #5A3799;
}


.contact #mainContent a{
	color: #FF6600;
}



#mainContent a:hover{
	color: #A8002B;
}


.about #mainContent a:hover{
	color: #708000;
}


.portfolio #mainContent a:hover{
	color: #332057;
}


.contact #mainContent a:hover{
	color: #C14E00;
}



#mainContent p{
	font-size: 1.4em;
	padding: 0 0 20px 0;
	line-height: 1.0em;
}


#mainContent .links{
	float: left;
	width: 350px;
	font-size: 1.4em;
	font-weight: bold;
	}


#mainContent .links li{
	float:left;
	width: 150px;
}


/*------ .terms #content ------*/


.terms #content{
	padding-bottom: 30px;
}



.terms #content h1{
	font-size: 1.8em;
	color: #999;
	margin: 0 0 25px 0;
}


.terms #content h2{
	font-size: 1.4em;
	color: #999;
	font-weight: bold;
	margin: 25px 0 15px 0;
}


.terms #content p{
	color: #333333;
	margin: 0 0 15px 0;
}


/*------ footer ------*/


#footer {
	float: left;
	width: 900px;
	position: relative;
}



#footer h3{
	float: left;
	width: 900px;
	height: 62px;
	color: #FF3366;
	background: url("../img/contact-home.gif") no-repeat 0 0;
}	


.about #footer h3{
	background: url("../img/contact-about.gif") no-repeat 0 0;
}


.portfolio #footer h3{
	background: url("../img/contact-portfolio.gif") no-repeat 0 0;
}


.contact #footer h3{
	background: url("../img/contact-contact.gif") no-repeat 0 0;
}


.terms #footer h3{
	background: url("../img/contact-terms.gif") no-repeat 0 0;
}


#footer h3 a{
	float: left;
	width: 311px;
	height: 47px;
	padding-left: 20px; 
	font-size: 1px;
	text-decoration: none;
	color: #FF3366;
	background: url("../img/contact-home.gif") no-repeat 0 0;
}


.about #footer h3 a{
	color: #B4CC01;
	background: url("../img/contact-about.gif") no-repeat 0 0;
}


.portfolio #footer h3 a{
	color: #5A3799;
	background: url("../img/contact-portfolio.gif") no-repeat 0 0;
}


.contact #footer h3 a{
	color: #ff6600;
	background: url("../img/contact-contact.gif") no-repeat 0 0;
}


.terms #footer h3 a{
	color: #999999;
	background: url("../img/contact-terms.gif") no-repeat 0 0;
}



#footer .box{
	float: right;
	width: 250px;
	margin-left: 30px;
	color: #fff;
}


#footer .box h4{
	font-weight: bold;
	font-size: 1.2em;
}


#footer .box a{
	color: #fff;
	text-decoration: none;
}


#footer .box a:hover{
	text-decoration: underline;
}


#footer .terms{
	position: absolute;
	left: 0;
	bottom: 0;
	font-weight: bold;
	color: #fff;
	background: none;
}


#footer .terms a{
	margin: 0 0 0 12px;
	color: #fff;
	text-decoration: none;
}


#footer .terms a:hover{
	text-decoration: underline;
}
	


/*------ siteBy ------*/


#siteBy {
	float: left;
	width: 900px;
	padding: 23px 0 20px 0;
	text-align: right;
	color: #fff;
	font-weight: bold;
}


#siteBy a{
	color: #fff;
	text-decoration: none;
}


#siteBy a:hover{
	text-decoration: underline;
}