@import url("reset.css");
@import url("text.css"); 

/* top line and screen background
----------------------------------------------------------------------  */
html{ overflow-y:scroll; height:100%; margin:0; padding:0;}
body { background-image:url(../img/global/top_bg.jpg); background-repeat:repeat-x;}
img.scree_bg {
/* Set rules to fill background */min-height: 100%; min-width: 1024px;			
/* Set up proportionate scaling */width: 100%; height: auto;
/* Set up positioning */position: fixed; top: 8px; left: 0; }

/* content
----------------------------------------------------------------------  */
@media screen and (max-width: 1024px){
img.bg { left: 50%; margin-left: -512px; }  }
		
div#container {
			/* This is the only important rule */
			/* We need our content to show up on top of the background */
			position: relative; 
			/* These have no effect on the functionality */
			width: 960px; margin: 0 auto; padding: 0px;}

/* side left
----------------------------------------------------------------------  */
#side { float:left; width:230px; height:768px;}
#side .name { float:left; width:230px; height:330px; background-image:url(../img/global/name.png); background-repeat:no-repeat; text-indent:-9999px; overflow:hidden;}
#side .icon_email {display:block; position:absolute; top:270px; left:20px; font-size: 11px; width:190px;}
#side .icon_email a { display:block;}
#side .icon_email a:hover { display:block; background-color:#cde1ee;}
#side .icon_email img { margin:0 5px 0 5px; vertical-align:middle;}

/* header navigation
----------------------------------------------------------------------  */
#header { float:right; width:700px; margin:8px 10px 0 0; padding:5px; font-size:11px; color:#F00;}
#navigation { float:left; width:700px; height:35px; margin:90px 0 40px 20px;}
		.work { float:left; display: block; width: 100px; height: 35px; background:url('../img/global/nav_work.png')  0 0 no-repeat; outline: 0; margin:0 20px 0 0; text-indent:-9999px; overflow:hidden;}
		a.work span{display:none; }
		a.work:hover {background:url('../img/global/nav_work.png') 0 35px;}
		.workactive { float:left; display: block; width: 100px; height: 35px; background:url('../img/global/nav_work.png') 0 35px; outline: 0;  margin:0 20px 0 0; text-indent:-9999px; overflow:hidden;}

		.about { float:left; display: block; width: 100px; height: 35px; background:url('../img/global/nav_about.png')  0 0 no-repeat; outline: 0; margin:0 20px 0 0; text-indent:-9999px; overflow:hidden;}
		a.about span{display:none; }
		a.about:hover {background:url('../img/global/nav_about.png') 0 35px;}
		.aboutactive {  float:left; display: block; width: 100px; height: 35px; background:url('../img/global/nav_about.png')  0 35px;  outline: 0; margin:0 20px 0 0; text-indent:-9999px; overflow:hidden;}
	
		.contact { float:left; display: block; width: 100px; height: 35px; background:url('../img/global/nav_contact.png')  0 0 no-repeat; outline: 0; margin:0 20px 0 0; text-indent:-9999px; overflow:hidden;}
		a.contact span{display:none; }
		a.contact:hover {background:url('../img/global/nav_contact.png') 0 35px;}
		.contactactive {  float:left; display: block; width: 100px; height: 35px; background:url('../img/global/nav_contact.png')  0 35px;  outline: 0; margin:0; text-indent:-9999px; overflow:hidden;}
		
		.designforsale { float:right; display: block; width: 160px; height: 35px; background:url('../img/global/nav_designforsale.png')  0 0 no-repeat; outline: 0; text-indent:-9999px; overflow:hidden;}
		a.designforsale span{display:none; }
		a.designforsale:hover {background:url('../img/global/nav_designforsale.png') 0 35px;}
		.designforsaleactive  {float:right; display: block; width: 160px; height: 35px; background:url('../img/global/nav_designforsale.png') 0 35px; outline: 0; text-indent:-9999px; overflow:hidden;}

/* content section
----------------------------------------------------------------------  */
#content { float:right; width:720px; margin-bottom:30px;}
#content ul li { float:left; width:340px; height:200px; margin:10px 10px 20px 10px}
#content ul li .txt { float:left; display:block; height:30px; font-size:11px; color:#666; margin:-25px 0 20px 5px;}
#content ul li a { display:block; width:340px; height:220px;}
#content ul li a:hover { display:block; border-bottom-color:#cde1ee;}
 
/* about
----------------------------------------------------------------------  */
.about_txt { float:right; margin:0 10px 0 130px;}

/* single
----------------------------------------------------------------------  */
.single_nav { float:left; width:460px; margin:0 0 10px 10px; font-size:11px;}

.single_nav .back { float:left; width:100px; text-align:center;}
.single_nav .prev { float:left; width:100px; margin:0 0 0 120px; text-align:center;}
.single_nav .next { float:right; width:100px; margin:0 0 0 20px; text-align:center;}

.single_artwork { float:left; width:460px; margin:0;}
.single_artwork img { margin:0 0 20px 10px;}
.description { float:right; width:230px;}


/* go to page top
----------------------------------------------------------------------  */
.scrollpage  { float:right; width:100%; text-align:right; margin:20px 0 0 0; font-size:11px;}
.scrollpage a { font-size:11px; height:30px; width:100px; margin-right:10px; padding:5px;}
.scrollpage img { margin:0 5px 0 5px; vertical-align:middle;}

/* footer
----------------------------------------------------------------------  */
#footer {clear:both; width:100%; border-top: 1px solid #AAB8C3;}
#footer .line { width:100%; border-top: 1px solid #fff;}
.footer_txt { float:left; width:220px; color:#999; font-size:10px; margin:20px 0 0 10px;}
.links_l { float:left; width:340px; margin:20px 0 50px 20px; font-size:11px;}
.links_r { float:right; width:340px; margin:20px 0 50px 0; font-size:11px;}
.links_module  {display:block; margin:0 0 10px 0;}
.links_module a { display:block;}
.links_module img { margin:0 5px 0 5px; vertical-align:middle;}


/* contact form
----------------------------------------------------------------------  */
#contact_txt {width:520px; margin:0 0 0 130px;}
#contact-wrapper {width:560px; margin:0 0 0 130px;}
#contact-wrapper div { clear:both; margin:1em 0;}
#contact-wrapper label { display:block; float:left; width:120px; margin:10px 0 0 0;}
form#contactform input { float:left; margin:10px 0; border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7; border-style:solid; border-width:1px; padding:5px; color:#333;}
form#contactform textarea {float:left; margin:10px 0; border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7; border-style:solid; border-width:1px;}
.error { color:#D03A68; font-size:11px;}