@charset "utf-8";
/* CSS Document */

body {
	width:1024px;
	margin: 0 auto;
	padding: 0px;
	font: 11pt "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif;
	color:#000;
	background-color:#FFF;
}

img {
	border: none;
}

/*______________________________________________________logo*/
#logo {
	position:absolute;
	top:60px;
	margin:0 0 0px 20px;
}

#logo img{border:none;}

/*______________________________________________________quotes*/
#quotes{
	width:808px;
	top: 325px;
	position:absolute;
	float:left;
	margin:0 0 0px 20px;
}
/*______________________________________________________navigationbar*/
#navigationBar {
	width: 1024px;
	position: absolute; 
	top: 160px;
	background-color: #000000;
}

ul.menu {
	list-style:none; 
	margin:0; 
	padding:0;
}

ul.menu * {
	margin:0; 
	padding:0;
}

ul.menu a {
	display:block; 
	color:#000; 
	text-decoration:none;
	font-size:12px;
}

ul.menu li {
	position:relative; 
	float:left; 
	margin-right:2px;
	
}

ul.menu ul {
	position:absolute;
	top:36px; 
	left:0; 
	background:#333; 
	color:#FFF; 
	display:none; 
	list-style:none;
}

ul.menu ul li {
	position:relative; 
	border:1px solid #555; 
	border-top:none; 
	width:141px;
	margin:0;
}

ul.menu ul li a {
	display:block; 
	padding:3px 7px 5px 20px; 
	background-color:#333;
	color:#FFF; 
	
}

ul.menu ul li a:hover {
	background-color:#EEE;
	color: #C00;
}

ul.menu ul ul {
	left:141px; 
	top:0px;
}

ul.menu .menulink {
	border:1px solid #000; 
	padding:5px 7px 7px 20px; 
	font-weight:bold; 
	width:114px;
	color: #555;
	font-size:18px;
}

ul.menu .menulink:hover, ul.menu .menuhover {
	background-color: #222; 
	color: #ABABAB;}

ul.menu .sub {background:#333 url(images/arrow.gif) 125px 8px no-repeat; color:#FFF; }

ul.menu .topline {border-top:1px solid #aaa;} 


/*______________________________________________________content*/
#content {
	width:808px;
	position:absolute;
	top:220px;
	float:left;
	padding-left:20px;
}

#content p{
	padding-left:40px;
	padding-right:20px;
}

#content h1{font-size:12pt;}
#content a:link {color: #666666;}
#content a:visited {color: #666666;}
#content a:hover {color:#CC0000;}
#content a{text-decoration:none;}

/*______________________________________________________name*/
#name {
	width: 400px;
	position:absolute;
	top:200px;
	margin: 0 0 0 624px;
	float:left;
	text-align: right;

}

#name h1{font-size:22px;}

/*______________________________________________________basic,intermediate,advanced*/
#col_one,#col_two,#col_three{
	position:absolute;
	float:left;
	width: 328px;
	top:240px;
	margin:0;
	
}

#col_one,#col_two, #col_three, h3{font-size:10pt;}
#col_one{margin:0;}
#col_two{margin:0 0 20px 348px;}
#col_three{margin:0 0 20px 696px;}
	
/*______________________________________________________box*/
#box{
	width:328px;
	-webkit-box-shadow: 4px 6px 12px #333333;
	-moz-box-shadow: 4px 6px 12px #333333;
	background-color:#FFFFFF;
	filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#333333, OffX=4, OffY=6, Positive='true');
}

/*______________________________________________________tutorial*/
#tutorial h4{
	font-size:11pt;
	padding-top:20px;
	padding-left:20px;
	padding-right:20px;
	text-align:left;
}

#tutorial p{
	font-size:10pt;
	padding-left:20px;
	padding-right: 20px;
	padding-bottom:20px;
	text-align:left;
}

#tutorial h2{font-size:10pt;}
#tutorial img{border:none;}

#tutorial a img {
	opacity: 0.2;
	-moz-opacity: 0.2; 
	-khtml-opacity: 0.2; 
	filter: alpha(opacity=20);
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
	-webkit-transition: opacity 1s linear;
}  

#tutorial a:hover img {
	opacity: 1;
	-moz-opacity: 1; 
	-khtml-opacity: 1; 
	filter: alpha(opacity= 100);
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	-webkit-transition: opacity 0.27s linear;
}  


/*______________________________________________________movie*/
#movie {
	position:absolute;
	top:260px;
	margin:0 0 0px 293px;
}
	
/*______________________________________________________description*/
#title {
	width: 245px;
	position: absolute;
	top:260px;
	float:left;
	margin:0 0 0px 20px;
	font-size:14pt;
	text-align: justify;
}

#description {
	width: 245px;
	position: absolute;
	top:285px;
	float:left;
	margin:0 0 0px 20px;
	font-size:10pt;
	text-align:justify;
}

#description a:link {color: #666666;}
#description a:visited {color: #666666;}
#description a:hover {color:#CC0000;}
#description a{text-decoration:none;}	


/*______________________________________________________resources*/
#tools,#designs,#news,#academia,#practice{
	width: 168px;
	top:230px;
	position:absolute;
	float:left;
	padding-left:20px;
}

#tools,#designs,#news,#academia,#practice, li {list-style-type:none;}
#tools,#designs,#news,#academia,#practice, a:link {color: #666666;}
#tools,#designs,#news,#academia,#practice, a:visited {color: #666666;}
#tools,#designs,#news,#academia,#practice, a:hover {color: #CC0000;}
#tools,#designs,#news,#academia,#practice, a{text-decoration:none;}
#tools{margin:0 0px 0px 0px;}
#designs{margin:0 0px 0px 209px;}
#news{margin:0 0px 0px 418px;}
#academia{margin:0 0px 0px 627px;}
#practice{margin:0 0 0px 836px;}

/*______________________________________________________download*/
#templates,#cities,#furniture,#symbols{
	width: 236px;
	top:230px;
	position:absolute;
	float:left;
	padding-left:20px;
}

#templates,#cities,#furniture,#symbols, li {list-style-type:none;}
#templates,#cities,#furniture,#symbols, a:link {color: #666666;}
#templates,#cities,#furniture,#symbols, a:visited {color: #666666;}
#templates,#cities,#furniture,#symbols, a:hover {color: #CC0000;}
#templates,#cities,#furniture,#symbols, a{text-decoration:none;}
#templates{margin:0 0px 0px 0px;}
#cities{margin:0 0px 0px 256px;}
#furniture{margin:0 0px 0px 512px;}
#symbols{margin:0 0px 0px 768px;}

/*______________________________________________________furniture*/
#cat_one,#cat_two,#cat_three,#cat_four,#cat_five{
	position:absolute;
	float:left;
	width: 188px;
	top:240px;
	margin:0;
}

#col_one,#col_two, #col_three, h3{font-size:10pt;}
#cat_one{margin:0;}
#cat_two{margin:0 0 20px 209px;}
#cat_three{margin:0 0 20px 418px;}
#cat_four{margin:0 0 20px 627px;}
#cat_five{margin:0 0 20px 836px;}

/*______________________________________________________box*/
#download_box{
	width:188px;
	-webkit-box-shadow: 4px 6px 12px #333333;
	-moz-box-shadow: 4px 6px 12px #333333;
	background-color:#FFFFFF;
}


/*______________________________________________________gallery*/
#render img{
	padding: 3px;
	background: #333;
	margin: 7px;
	-webkit-box-shadow: 3px 4px 6px #666;
	-moz-box-shadow: 3px 4px 6px #666;
	filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#666, OffX=3, OffY=4, Positive='true');
}

#render a img{
	opacity: 0.5;
	-moz-opacity: 0.5; 
	-khtml-opacity: 0.5; 
	filter: alpha(opacity=50);
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	-webkit-transition: opacity 1s linear;
}

#render a:hover img{
	opacity: 1;
	-moz-opacity: 1; 
	-khtml-opacity: 1; 
	filter: alpha(opacity= 100);
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	-webkit-transition: opacity 0.27s linear;
}  

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/gallery_popup/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/gallery_popup/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/*______________________________________________________contact*/
#contact {
	width:420px;
	position:absolute;
	top:240px;
	float:left;
	padding-left:20px;
	text-align: justify;
	font-size: 10pt;
}

#contact p{
	padding-left:40px;
	padding-right:20px;
}

#contact h1 {font-size:11pt;}
#contact a:link {color: #666666;}
#contact a:visited {color: #666666;}
#contact a:hover {color:#CC0000;}
#contact a{text-decoration:none;}

/*______________________________________________________comment*/
#comment {
	position:absolute;
	top:240px;
	margin:0 0 0px 522px;
	padding-left:20px;
	text-align:left;
}

#comment p{
	padding-left:40px;
	padding-right:20px;
}

#comment h1{font-size:10pt;}
#legal {width: 420px; margin: 50px 0; font-size: 9px;}
/*______________________________________________________contact vertical menu*/
#date{font-size: 8pt;}

.glossymenu{
	margin: 0;
	padding: 0;
	width: 390px; /*width of menu*/
	border-top: 1px solid #ddd;
}

.glossymenu a.menuitem{
	background-color: #fff;
	font-size:10pt;
	color: #000;
	display: block;
	position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
	width: auto;
	padding: 4px 0;
	padding-left: 10px;
	text-decoration: none;
	border-bottom: 1px solid #ddd;
}

.glossymenu a.menuitem:visited {
	color: #000;
}

.glossymenu .menuitem:active{
	color: #C00;
}

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
	position: absolute;
	top: 5px;
	right: 5px;
	border: none;
}

.glossymenu a.menuitem:hover{
	color: #C00;
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
	background: #FFF;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.glossymenu div.submenu ul li{
	background-color: #FFF;
	border: 1px solid #777;
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	padding: 5px 5px 5px 20px;
	text-align:justify;
	font-size: 10pt;
}

.glossymenu div.submenu ul li a{
	display: block;
	font-size: 10pt;
	color: black;
	text-decoration: none;
	padding: 2px 0 0 15px;
}

.glossymenu div.submenu ul li a:hover{color: #FFF;}