/*element styles*/
body { background: #000; padding: 10px; font: normal 12px HelveticaNeue Roman, Helvetica, Arial, Verdana, sans-serif;  }
h1 {margin:0; padding:0px; font-size:28px; }
h2 {border-bottom: 1px solid #666666; font-size: 12px; line-height:14px; padding: 0 0 2px 0; margin: 3px 0 10px 0;}
h3 {font-size: 20px; font-weight: normal; border-bottom: 1px solid #ccc; padding: 0 0 8px 0; margin: 0 0 9px 0;}
h4 {font-weight: bold; font-size: 40px; line-height:40px;}
h5 {font-weight: bold; font-size: 12px; line-height:14px;}
h6 {}

p { text-decoration: none; border: 0px solid purple; }
img {border: 0; }
ul {list-style: none;}
input, textarea{font-family:HelveticaNeue Roman, Helvetica, Arial, Verdana, sans-serif; font-size:12px; border:0;}
.float { float: left; font-weight:normal; }								
.unfloat { float: left; }
.clear { clear: left; }		
.push { padding: 10px 0; }

/*links and link hovers*/
a img { border: 0; cursor:pointer;  } 
p a {text-decoration:underline; cursor:pointer;  }
a:hover, * a:hover *, li a:hover, p a:hover { cursor:pointer; }

h1 a { color: #FFFFFF; text-decoration: none; cursor: pointer }
h1 a:hover { color: #ffb200; text-decoration: none; cursor: pointer }	

/* color settings */
body.light {color: #000;}
body.light h2 {color: #e51837;}
body.dark {	color: #fff; background-image: url(http://www.petermaslov.com/lib/images/dark_03.jpg); background-repeat:no-repeat; background-position:top left; background-attachment:fixed; }
body.dark, body.dark li a {color: #fff;}
body.dark p, body.dark ul, body.dark li, body.dark a{color:#FFFFFF;text-decoration: none;}

/*general styles*/
.regular-text { padding: 0; margin:0; line-height: 17px; word-spacing: 1px; letter-spacing: 0px;}
.section {clear: both;font-size: 12px; margin: 0 0 -164px; }
.sectionContainer {position:relative; padding:15px;}
.superscript{font-size:0.5em; vertical-align:super;}

/*column styles*/

.base-column{ margin-right: 25px; float: left; min-width:130px;}
.one-half-col{width:45%;  margin: 0 25px 0 0; float: left;zoom:1;}
.one-fourth-col{width:22.15%;  margin: 0 25px 0 0; float:left;}
.five-sixth-col{width:78%; margin: 0 25px 0 0; float:left;}
.no-margin{margin:0 !important;}
.no-right-margin{margin-right:0 !important;}

/*page layout*/

.PageContainer {
	padding: 0px;
	position: relative;
	width: 100%;
	min-width: 995px;
	max-width:1600px;
	border: 0px solid pink;
	}

#step10 { padding-top: 10px;}
#step20 { padding-top: 20px;}
#content {padding:171px 0 0 23px; margin: 0 0 0 0; height:100%;}
#contentArea {float: left; }


/* Project Container */

.sectionContainer { width: 100%; padding: 20px 0 20px 0; margin: 0 20px 0 0; position: relative; border: 0px solid lime; }
.sectionContainer .posts { text-decoration: none; }
.sectionContainer .box { margin-right: 25px; float: left; }
.sectionContainer .img { padding:0; }
.sectionContainer .caption { width: 200px; text-decoration: none; border: 0px solid blue; }
.sectionContainer .caption p { font-size:10px; text-decoration: none; margin: 5px 0 30px 0; border: 0px solid lime; }
                        
.projectPreview	{
	z-index: 1;
	float: left;
	margin-right: 20px;
 	border: 0px solid blue;
}
.projectDescription	{
	z-index: 2;
	margin: 0 20px 0 0px;
	width: 240px;
	float: left;
 	border: 0px solid blue;
}

.projectInfo {width:12%;  margin: 0 25px 0 0; float: left;}

.sectionSubMenu { float: left; padding-right: 20px; width: 18%; z-index:auto; }
.sub { padding: 10px;  background: #000000; }
.sub img { float:left; padding: 0 5px 0 0 ; }
.sub a { z-index:5000; }
.SubsectionContainer { float: left; z-index:auto; padding:0 20px 0 0; min-width: 720px; width:100%;}
.SubsectionContainer .posts { text-decoration: none;  border: 0px solid orange; }
.SubsectionContainer .box { margin-right: 25px; float: left; border: 0px solid blue; }


/*close button*/

.SectionClose {
	background: url(http://www.petermaslov.com/lib/images/sprite_pageClose.png) no-repeat top left;
	z-index:1;
	height: 31px;
	width: 31px;
	margin: -60px 0 0 0;
	outline: none;
	display: block;
	float:right;
	top: auto;
}


body.dark #SectionClose {background-position: 0 0;}
body.light #SectionClose {background-position: 0 -186px;}
body.dark .SectionClose:hover {background-position: 0 -124px;}
body.light .SectionClose:hover {background-position: 0 -310px;}
body.dark .SectionClose.down {background-position: 0 -62px;}
body.light .SectionClose.down {background-position: 0 -248px;}


.logo { background: transparent; position: absolute; top: 25px; right: 25px; }

/* Loader */
.loading { z-index: 5000; position:fixed; left:0px; top:0px; width: 100%; height: 100%; background-color: none; }
#spinner { background: transparent; position: absolute; top: 25px; right: 25px; }
#loader { background: transparent; position: absolute; }

/* Elements */

.border							{ border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 10px 0 }	
.category						{ margin: 10px 3px; 		
								  text-decoration: none;
								  word-spacing: Normal;
								  text-align: left;
								  letter-spacing: 0;
								  text-indent: 0px;
								  line-height: 19px;
								  font-size: 13px;
								  font-style: italic;
								  }

.picked	{ font-style: bold; color: #4faef1 !important }
				
#title { width:960px; padding-bottom: 10px; font-weight: bold; line-height: 34px; word-spacing: -2px; letter-spacing: 0px; }

.transbox { position: absolute; z-index:-1;
width: 100%; height:420px; 
padding: 10px 0 20px 20px; margin-right: -20px; margin-left: -20px; 
border-top: 1px solid #666666; 
border-bottom: 1px solid #666666; 
filter:alpha(opacity=30); opacity:0.3; 
background: #000000; }


/* About / Services */ 

#slash { padding: 5px;}
#bio {
	width: 500px;
	float: left;
	padding-left: 0px;
	margin-right: 20px;
}
#specialties { width: 150px; float: left; margin-right: 20px; }
#contact { width: 250px; float: left; }
#col { width: 150px; float: left; margin-right: 20px; }



/* Projects List */
#sectionName { color: #d576d8; padding-right:10px; font-weight: normal; font-size: 18px; }
#alternativeSectionName			
	{ color: #d576d8;
	  margin-right: 15px; 
	  padding-right: 4px;
	  padding-left: 4px;
	  padding-top: 1px;
	  padding-bottom: 1px;
	  font-family: Arial;
	  text-decoration: none;
	  text-weight: bold;
	  font-size: 14px;
	  background: #222222;
	  filter:alpha(opacity=70);
	  opacity:0.7;
	}

#projectName { line-height: 34px; word-spacing: -2px; letter-spacing: 0px; }
#comma { margin:0; padding-right:10px; color: #FFFFFF; font-weight: bold; font-size: 28px; filter:alpha(opacity=50); opacity:0.5; }


/* News/Blog */


#allNews						{ margin: 10px 0;
								  padding-top: 10px;
								  width: 960px;
								  border: 0px solid red;
								  }

#allNews a						{ font-color: #FFFFFF; }
#allNews p						{ 
								  padding-top: 10px;
								  font-size: 13px;
								  word-spacing: Normal;
								  text-align: left;
								  letter-spacing: 0;
								  text-indent: 0px;
								  line-height: 19px;

								 }
#allNews img					{ padding-bottom: 10px; }

#allNewsBtn						{ }

.newsbox { float: left; width: 500px; padding-right: 30px; padding-bottom: 30px; border: 0px solid red; }
.newsboxEven { float: left; width: 350px; border: 0px solid orange; padding-bottom: 30px; }
.newsboxEven p { margin: 0; font-size:14px; text-decoration: none; }

.poststatus	{ position: absolute; bottom: 0; width: 100%; padding: 5px; background: #e1e1e1; }
.newsTitle { text-decoration: none; }
.timestamp { font-size: 11px;}

#copy					{ padding-top: 10px; }

/* Gallery */


/*Gallery navigation tip*/


.gallery-note {
	z-index:3;
	color: #999999;
	position: absolute;
	right: 50px;
	margin-top: -7px;
	font-size: 10px;
	border: 0px solid red;
}

.arrows-tip {
	z-index:3;
	color: #999999;
	position: absolute;
	right: 10px;
	margin-top: -10px;
	font-size: 10px;
	width:29px; height:19px;
	background:url(http://www.petermaslov.com/test/lib/images/gallery_note.gif) no-repeat;
	border: 0px solid red;
}


/* main vertical scroll */
.main {
	z-index:1;
	position:relative;
	overflow:hidden;
	height: 430px;
 	border: 0px solid black;
}
 
/* root element for pages */
#pages {
	position:relative;
	height:20000em;
	border: 0px solid orange;

}
 
/* single page */
.page {
	height: 430px;
	background: none;
	width:100%;
 	clear: both;
	border: 0px solid blue;
}
 
/* root element for horizontal scrollables */
.scrollable {
	position:relative;
	overflow:hidden;
	width: 100%;
	height: 480px;
	border: 0px solid pink;
}
 
/* root element for scrollable items */
.scrollable .items {
	width:20000em;
	position:absolute;
	clear:both;
	border: 0px solid yellow;
}
 

/* single scrollable item */
.item {
	float:left;
	padding-right:20px;
	width:510px;
	height:420px;
	border: 0px solid grey;
}

.item img { cursor:pointer; padding: 5px; position:relative; }

.photo-caption { width: 430px; position: absolute; border: 0px solid lime; }
.photo-caption p { margin: 0 0 0px 5px; font-size:10px; font-weight:bold; text-decoration: none; }
.highres-link { margin: 0 5px 0 -10px; padding: 0; font-size:10px; color: #666; text-decoration: none; float:right; position:relative; border: 0px solid lime; }
.highres-link a { color: #999 !important;}
.highres-link a:hover { color: #FFF !important; text-decoration: underline; }


/* menu 01 */

.project-menu { z-index:2; float:left;  width: 250px; border: 0px solid white; width: 250px; }
.menu-titles { position:absolute; float:left; z-index:2; padding: 30px 15px 0 0; line-height: 30px; cursor:pointer; text-decoration: none; border: 0px solid lime; }


/* main navigator */
.main_navi {
	float:left; 
	position:relative; 
	margin:0px !important;
	padding: 20px 20px 0 0 !important;
	width:225px;
	font-size: 11px; 
	border: 0px solid pink;
}
 
.main_navi li {
 	z-index:0; 
	background-color: none;
	border-top:1px solid #666;
	clear:both;
	width:230px;
	height:70px;
	list-style-type:none;
	cursor:pointer;
}
 
.main_navi ul { } 
.main_navi li:hover { } 
.main_navi li.active { }
.main_navi b { color: #FFF; font-size: 12px; line-height: 20px; }
.main_navi img { float:left; margin-right:10px; }

/*.main_navi .menu-title { z-index:2; position:absolute; padding: 0px; border: 0px solid white;  }*/

.subNavItemOff { position:absolute; height:70px; width:230px; opacity:0.3;filter:alpha(opacity=30); background-color:black; z-index:-1; }
.subNavItemOn { position:absolute; height:70px; width:230px; opacity:0.6;filter:alpha(opacity=60); background-color:black; z-index:-1; }
.subNavItemActive { position:absolute; height:70px; width:230px; opacity:0.8;filter:alpha(opacity=80); background-color:black; z-index:-1; }
.subNavItem { position:absolute; height:70px; width:210px; color:#666; padding: 8px 0 0 10px; }




/* this makes it possible to add next button beside scrollable */
div.scrollable { clear: both; float:left; border: 0px solid lime; }

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	cursor:pointer;	display:block; float:left;
	width:18px; height:18px;
	background:url(http://www.petermaslov.com/lib/images/left.png) no-repeat;
	margin:5px;
	border: 0px solid yellow;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover { background-position:0px -18px; }

/* disabled navigational button */
a.disabled { visibility:hidden !important; }

/* next button uses another background image */
a.next, a.nextPage { background-image:url(http://www.petermaslov.com/lib/images/right.png); clear:right; border: 0px solid yellow; }



/*********** navigator ***********/

/* position and dimensions of the navigator */

div.navi {
	cursor:pointer;
	width: 300px;
	height:15px;
	padding: 0px;
	margin-left: 5px;
 	clear: both;
	border: 0px solid red;
}


/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(http://www.petermaslov.com/lib/images/navigator.png) 0 0 no-repeat;
	display:block;
	border: 0px solid white;
}

/* mouseover state */
div.navi a:hover { background-position:0 -8px; }

/* active state (current page state) */
div.navi a.active {	background-position:0 -16px; }