/*
-----------------------------------------------------
default stylesheet file for css/main.css
author: kira volvovsky
created: 18.6.2009
++++++++++++++++
(c) 2009 webartdesignerstudio.com
-----------------------------------------------------
*/


/* General rules and typography
------------------------------------------------------------------*/
html, body {
	margin:0;padding:0;
	color: #333333;
	background-color: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small;
}

a:active, a:focus {
  outline: none ! important;
}

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0;}
p { line-height: 1.6em; margin: 0 0 1em 0; }

a img, :link img, :visited img { border: 0; }
a:link, a:visited {color: #296ffe; text-decoration:none;}
a:hover, a:visited:hover, a:active:hover {color: #CC0000; text-decoration:underline;}
 
h1, h2, h3, h4, h5, h6 {
	font-family: arial, sans-serif; 
	font-weight: 300; 
	color: #516064;
	}
	
h2 { font-size: 30px; letter-spacing: -1px;  line-height: 120%; color: #cccccc; font-weight: 300; margin-bottom: 35px;  }
h2 strong { display: block; letter-spacing: -1px; color: #999999; font-weight: 300; margin-bottom:5px;}
h3 { font-size: 30px; letter-spacing: -2px;  line-height: 120%; color: #999999; font-weight: 300; margin-bottom: 10px;  }
h5 { font-family: arial, sans-serif;font-size: 180%; margin-bottom:10px;color:#009900; }

ul,li { list-style-type: none; margin:0; padding:0}
form {padding: 0; margin: 0}


/* Layout
------------------------------------------------------------------*/
#pageContainer{
	width: 830px;
	margin: 0 auto;
	position: relative;
	font-size: small;
}

#mainContent{
	width: 830px;
	margin: 0;
	padding: 0;
	text-align: left;
	position: relative;
}

#topnav  { padding-top:23px; height:30px;font-size: 18px !important; letter-spacing: -1px;color:#cccccc }

#head{
	width: 830px;
	height: 100px;
	position: relative;
	text-align: left;
	padding: 50px 0 0 26px;
	clear: both; 
	display: block;
}

#footer { background:url(../i/botrul.gif) repeat-x; padding-top:10px; height:40px;font-size: 18px !important; letter-spacing: -1px;color:#cccccc }

#bottomline {padding:0 0 20px 0; font:normal 11px arial; color:#666666; line-height:1.6em;}

/* HEAD == per section
------------------------------------------------------------------*/
#head h1 a {
	display:block;
	position:relative;
	overflow:hidden;
	z-index:100;
	float:left;
	width:222px;
	height:68px;	
	margin:0;
	padding:0 0 0 20px;
	font-size:40px;
	font-weight:300;
	line-height:1;
	color:#003366;
	text-decoration:none;
}
#head h1 a span {
	display:block;
	width:242px;
	height:68px;		
	background:url(../i/webart.logo.white.gif) top left no-repeat;
	position:absolute;
	top:0;
	left:0;
	z-index:10;
	cursor:pointer;
}

#head h1 a strong {
	font-size:0.4em;
	font-weight:300;
	letter-spacing:normal;	
}

#head .portfolio {
	width:288px;
	height: 68px; 
	background: #fff url(../i/sect.portfolio.gif) no-repeat 0px 0px;
	margin-left: 242px; padding-left:0;
	display: block;
	text-indent: -9999px;
}

#head .about {
	width:183px;
	height: 68px; 
	background: #fff url(../i/sect.about.gif) no-repeat 0px 0px;
	margin-left: 242px;
	display: block;
	text-indent: -9999px;
}

#head .contact {
	width:227px;
	height: 68px; 
	background: #fff url(../i/sect.contact.gif) no-repeat 0px 0px;
	margin-left: 242px;
	display: block;
	text-indent: -9999px;
}


/* NAVIGATION
------------------------------------------------------------------*/
#navtop a {color:#666666;text-decoration:none;}
#navtop a.webart {color:#cccccc;text-decoration:none}
#navtop a.folio:hover, #navtop a.folioactive {color:#cc00cc;text-decoration:underline;} 
#navtop a.about:hover, #navtop a.aboutactive {color:#0154fd;text-decoration:underline;}
#navtop a.contact:hover, #navtop a.contactactive {color:#ff9900;text-decoration:underline;}
#navtop ul { float:left;display:block;}
#navtop ul li { float:left; display:block;margin:0 40px 0 0; }
#navtop ul li.first { width:251px!important;}
#navtop ul li.last { margin:0; }

#navbot a {color:#666666;text-decoration:none;}
#navbot a.webart {color:#cccccc;text-decoration:none}
#navbot a.folio:hover, #navbot a.folioactive {color:#cc00cc;text-decoration:underline;} 
#navbot a.about:hover, #navbot a.aboutactive {color:#0154fd;text-decoration:underline;}
#navbot a.contact:hover, #navbot a.contactactive {color:#ff9900;text-decoration:underline;}
#navbot ul { float:left;display:block;}
#navbot ul li { float:left; display:block;margin:0 36px 0 0; }
#navbot ul li.first { width:255px!important;}
#navbot ul li.last { margin:0; }


/* SLIDESHOW - style rules
------------------------------------------------------------------*/
#slideshow {
	margin:20px 0 20px 0;
	width:830px;
	height:370px;
	background:#ffffff url(../i/bg_slideshow.gif) no-repeat 0 0;
	position:relative;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:730px;
  height:310px;
  overflow:auto; /* allow scrollbar */
  position:relative;
  padding-top:30px;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:710px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:310px;
}

/* SLIDESHOW - control style rules
------------------------------------------------------------------*/
.control {
  display:block;
  width:44px;
  height:142px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:114px;
  left:0;
  background:transparent url(../i/arr.previous1.gif) no-repeat 0 0;
}
#rightControl {
  top:114px;
  right:0;
  background:transparent url(../i/arr.next1.gif) no-repeat 0 0;
}

.slide h2, .slide p {
  margin: 0 0 1em 0;
  line-height: 1.6em;
}
.slide h2 {
  font-size: 30px; letter-spacing: -1px;  line-height: 120%; color: #cccccc; font-weight: 300; margin-bottom: 35px;
}
.slide img {
  float:right;
  margin:0 15px;
}


/* Common site fixes
------------------------------------------------------------------*/
.blockPadd {padding:0 13px 0 13px;}
.blockMarg {margin-bottom:20px;}
.margL30 {margin-left:30px}
.margT30 {margin-top:30px}
.margB5 {margin-bottom:5px}
.margB55 {margin-bottom:55px}
.margT55 {margin-top:55px}
.margT45 {margin-top:45px}
.blockContainer {border:10px solid #EEEEEE;padding:20px 30px 20px 30px}
.block img {float:right;margin:0 0 0 15px;}
.grey999, a.grey999:link, a.grey999:visited, a.grey999:hover, a.grey999:visited:hover {color:#999999}
.bluel, a.bluel:link, a.bluel:visited, a.bluel:hover, a.bluel:visited:hover {color:#3399cc}
.red, a.red:link, a.red:visited, a.red:hover, a.red:visited:hover {color:#cc0000}
.dashed, a.dashed:link, a.dashed:visited, a.dashed:hover, a.dashed:visited:hover {text-decoration:none;border-bottom:1px dashed}
.lh120 {line-height:120% !important}
.lh140 {line-height:130% !important}
.lh1_6 {line-height:1.6em}
.greyContainer {border:10px solid #EEEEEE;padding:20px 30px 20px 30px;background-color:#eeeeee}
a.people, a.people:hover, a.people:visited:hover {text-decoration:none;border-bottom:1px dashed}
.rem {font:normal 11px arial; color:#999999; line-height:1.5em;}
.bottomline a:link, .bottomline a:visited {color: #3399cc; text-decoration:none;}
.bottomline a:hover, .bottomline a:visited:hover, .bottomline a:active:hover {color: #000;}

#disclaimerRead{ display: none; }

#logosSpot ul{margin:0; padding:0; overflow:hidden }
#logosSpot li{float:left; display:block;margin:0 10px 0 0;}
#logosSpot li.last{float:left; display:block;margin:0;}

.contactPage {
	float:left;
	width:210px;
	height:510px;
	padding:0 60px 0 0;
	margin:0 60px 0 0;
	background:url('../i/divdot_vrt.shadow.gif') right repeat-y;
}


/* Contact form styles
------------------------------------------------------------------*/

#contact {}
#contact .button {}
span.error {color: red; display:none;}
label span {font-style: italic; color: #999999;}
input, textarea {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; color: #666666;}
#contact .formfields {width:210px;border: 1px inset #d1d1d1;}




/* ------------  CLEARING  --
This technique was originally developed by Tony Aslett, 
upgraded by Alex Robinson
-------------------------- */

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

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

.clearboth {clear:both;}
.spacer{display:block; clear:both; height:0; line-height:0; font-size:0; overflow:hidden; }