/*-----------------------------------------------------------------------------
Stylesheet For www.digitaleyesdesign.com

version:   2.1
author:    JoAnn Meloy
email:     hanako_seki@sbcglobal.net
website:   http://www.digitaleyesdesign.com
-----------------------------------------------------------------------------*/





/* =General
-----------------------------------------------------------------------------*/
/* Clear padding and margins */
* {margin: 0; padding: 0;}

/* Add padding and margins where desired */


/* Clear floats */
.clear {clear:both;}

/* Remove border around linked images */
img {border: 0;}


/* =Body
-----------------------------------------------------------------------------*/
body {
  background: #101020 url(img/bodybg.jpg) repeat-x top center;
  font:75% Verdana, sans-serif;
}

html, body{ height: 100%;}

#wrapper{
width: 652px;
min-height: 89%;
position: relative;
margin: 0 auto;
background: #000000 url(img/wrapper.jpg) repeat-y top left;
}

p {
color:#E3D3DB;
line-height: 1.25em;
}

h1, h2, h3, h4, h5, h6 {
font-size: 105%;
color: #8C8C8C;
}

/*///
/////h1 - Basic Header
/////h2 - Module Type 1 Header // Portfolio Entry Header
/////h3 - Module Type 2 Header  
/////h4 - Form Headers
/////h5 - IR Headers
///*/


/* =Header
-----------------------------------------------------------------------------*/

#header{
width: 652px;
height: 210px;
position: relative;
margin: 0 auto;
background: #101020 url(img/header.jpg) no-repeat top center;
}

/*IR for Logo*/
#header h5 {
  width:227px; height: 74px;
  position:relative;
  left: 425px; top:136px;
  overflow:hidden;
}
#header span {
background: url(img/logo.jpg) no-repeat;
position:absolute;
width: 100%; height:100%;
}



/* =Links
-----------------------------------------------------------------------------*/
.offsitelink{
background: url(img/offsitelink.gif) no-repeat top right;
padding-right: 10px;
}

#footer .offsitelink{
background: url(img/offsitelink_footer.gif) no-repeat top right;
padding-right: 10px;
}


/*Base Link Styles*/
a:link {color: #9C4ADC; text-decoration:none; font-size:100%;}
a:visited {color: #9C4ADC; text-decoration:none; font-size:100%;}
a:hover {color: #CCC; text-decoration:underline; font-size:100%;}
a:active {color: #CCC; text-decoration:none; font-size:100%;}


/*/////////////////////////////////////*/
/*Main & Bottom Nav Link Styles*/


#mainnav a:link, #bottomnav a:link {color: #FFFFFF; font-weight: normal; text-decoration:none;}
#mainnav a:visited, #bottomnav a:visited {color: #FFFFFF; font-weight: normal; text-decoration:none;}
#mainnav a:hover, #bottomnav a:hover {color: #AB6CE0; font-weight: normal; text-decoration:none;}
#mainnav a:active, #bottomnav a:active {color: #AB6CE0; font-weight: normal; text-decoration:none;}

/*Main Nav Styles - Current Page*/
#home .home a, #services .services a, #portfolio .portfolio a, #faq .faq a, #contact .contact a {color: #AB6CE0; background: url(img/mainnav_marker.gif) no-repeat bottom center;}

/*/////////////////////////////////////*/


/*///////////Back To Top Link Styles////////////*/
#back_to_top {
background: url(img/arrow_right.jpg) no-repeat right .3em;
width: 400px;
margin: 20px 10px;
border-bottom: 1px solid #333;
clear:both;
float: left;
padding: 0 15px 0 0;
}

#back_to_top a{
float: right;
margin: 2px;
font-size: .9em;
}

#back_to_top a:link {color:#FFFFFF;}
#back_to_top a:visited {color:#FFFFFF;}
#back_to_top a:hover {color:#8749BB; text-decoration: none;}
#back_to_top a:active {color:#8749BB; text-decoration: none;}

/*//////////////////////////////////////////////*/



/*/////////////////////////////////////*/
/*Footer Link Styles*/

#footer a:link {color: #EFDA91; font-weight: bold; text-decoration:none; font-size:100%;}
#footer a:visited {color: #EFDA91; font-weight: bold; text-decoration:none; font-size:100%;}
#footer a:hover {color: #F5D257; font-weight: bold; text-decoration:underline; font-size:100%;}
#footer a:active {color: #F5D257; font-weight: bold; text-decoration:none; font-size:100%;}

/*/////////////////////////////////////*/


/* =Main Nav
-----------------------------------------------------------------------------*/
#mainnav{
width: 600px;
margin: 0 auto;
white-space: nowrap;
}
#mainnav ul {
list-style-type: none;
width: 600px;
height: 35px;
margin:0; padding:0;
background: #000000 url(img/mainnav_bg.jpg) repeat-x;
border-right: #333333; border-left: #333333;
}
#mainnav li {
display: inline;
margin: 0;
padding: 0px 15px 0px 15px;
font: 80% Arial,Tahoma, Verdana, sans-serif;
background: url(img/mainnav_div.jpg) no-repeat right top;
}
#mainnav li a{
line-height: 30px;
padding: 3px 0;
text-transform: uppercase;
}



/* =Bottom Nav
-----------------------------------------------------------------------------*/
#bottomnav {

}
#bottomnav ul{
float:left;
margin-top: -20px;
list-style-type: none;
margin-left: 10px;
}
#bottomnav ul li{
display: inline;
font-size: 80%;
}
#bottomnav ul li a{
padding: 4px;
}


/* =Sub Nav
-----------------------------------------------------------------------------*/





/* =Modules
-----------------------------------------------------------------------------*/



/*/////////////////////////////////////*/
/*Styles for MODULES - Type 1*/

.module_type1{
width: 190px; 
float: left;
border: 1px solid #1A1A1A;
background: #000 url(img/module_type1_bg.jpg) repeat-x;
margin: 0 5px 25px 10px;
}

.module_type1 h2{
height: 75px;
margin:0; padding:0;
}

.module_type1 span{
position:relative;
top: 25px; left: 10px;
}

#content .module_type1 p{
font: .8em arial;
color: #AAA;
margin: -15px 25px 0 10px;
}

.module_type1 ul{
color: #FFF;
font: .8em arial;
margin: 0 0 10px 20px;
list-style-type: none;
}

.module_type1 ul li{
background: url(img/bullet_type1.jpg) no-repeat left center;
padding-left: 5px;
}


	/*Icons*/
#affordable h2{
background: url(img/icons/affordable.jpg) no-repeat top right;}
#quality h2{
background: url(img/icons/quality.jpg) no-repeat top right;}

/*/////////////////////////////////////*/






/*/////////////////////////////////////*/
/*Styles for MODULES - Type 2*/

.module_type2 {
width: 100%;
border-bottom: 2px solid #000;
border-top: 1px solid #272727;
padding: 10px 0;
border-right: 1px solid #212121;
}

#content .module_type2 h3{
width: 90px;
padding-left: 5px;
min-height:25px;
}

#content .module_type2 p{
font-size: .8em;
line-height: 1.2em;
padding: 10px 6px 5px 6px;
}

#content .module_type2 a{
font-size: .8em;
padding: 0 0px 5px 18px;
margin-left: 6px;
background: url(img/arrow_right2.jpg) no-repeat left center;
}



	/*Icons*/
	#module_budget {background: url(img/icons/wallet.jpg) no-repeat top right;}
	#module_earth {background: url(img/icons/globe.jpg) no-repeat top right;}
	#module_quote {background: url(img/icons/form.jpg) no-repeat top right;}

/*/////////////////////////////////////*/


/* =Main Content
-----------------------------------------------------------------------------*/

#content{
width: 585px;
margin: 0 0 0 25px;;
min-height: 100%;
padding: 0;
}

#content p {
padding: 5px 10px;
color: #666;
font-size: .95em;
}

#content h1 {
color:#FFF;
font-size: 1em;
margin: 25px 10px 2px 10px;
padding: 0 0 4px 15px;
background: url(img/arrow_right.jpg) no-repeat center left;
border-bottom: 1px solid #333;
}

#content h2 {
font-size: 1em;
color:#DDD;
padding: 0 0 5px 10px;
}

#content h3 {
font-size: .9em;
color: #DDD;
border-bottom: 1px solid #333;
padding-bottom: 8px;
}




	/*/////Span Font Colors for Emphasis/////*/
	p span {color: #999; border-bottom: 1px dotted;}
	
	p span.italic {border:0; font-size: .9em; 
	font-style: italic; font-weight: normal;
	color: #777;}

	p span.small {border:0;
	font: .8em arial, sans-serif;
	font-weight: normal; color: #888;}

	p span.small_purple {border:0;
	font: .8em arial, sans-serif;
	font-weight: normal; color: #9C4ADC;}


	/*///////////////////////////////////////*/



	/*/////Specially Styled p Elements/////*/
	#content p.note {
	font-weight:bold;
	font-size: 85%;
	color: #9D9B9B;
	}

	#content p.footnote {
	font-size: .75em;
	font: arial, sans-serif;
	}




/*////////////Column Styles//////////////*/
.column_left{
float: left;
width: 150px;
border-right: 1px solid #212121;
border-bottom: 1px solid #272727;
background: #161616;
min-height: 100%;
}

.column_right{
float: right;
margin-top: 0px;
width: 420px;

}

/*///////////////////////////////////////*/


/*////////////----- Page Styles////////////*/



/*///////////////////////////////////////*/


/*///////////Portfolio Page Styles////////////*/

#portfolio_entries div{
float: left;
border-bottom: 1px solid #222;
padding: 10px 0 0 0;
margin-left: 10px;
position: relative;
}

#portfolio_entries img{
margin: 10px 20px 10px 0px;
float: left;
}

#portfolio #content h2{
width: 185px;
float: left;
padding: 15px 0 10px 0;
}

#portfolio_entries ul{
width: 185px;
list-style-type: none;
float: left;
color: #BBB;
font: .9em verdana, sans-serif;
padding-bottom: 3em;
}

#portfolio_entries ul li{
background: url(img/bullet_type1.jpg) no-repeat left center;
padding-left: 5px;
}

#portfolio_entries a{
position: absolute;
bottom: 5px; right: 0;
background: url(img/arrow_right.jpg) no-repeat 0 .2em;
padding-left: 15px;
}


/*////////////////////////////////////////////*/


/* =Footer
-----------------------------------------------------------------------------*/
#footer{
width: 652px; height:85px;
margin:0 auto;
background: #000000 url(img/footer.jpg) no-repeat top center;
}

#footer p{
font-size: .8em;
}

#copyright{
text-align: right;
padding-right: 30px;
position: relative; top:65px; 
}

#validation{
text-align: right;
padding-right:30px;
padding-top: 15px;
}

#fineprint{
text-align: left;
padding-left: 30px;
position: relative; top:-10px; 
}


/* =Forms
-----------------------------------------------------------------------------*/

/* Removes fieldset borders. even on Opera 7 */
fieldset {
  border: 1px solid transparent;
}

.form p{
clear: left;
}

.form label{
color: #555;
font-weight:bold;
float: left;
width: 135px;
}

	/*Text Box Styles*/
.form input[type="text"]{
background: #000;
border-bottom: 1px solid #444;
border-top:0;
border-left:0;
border-right:0;
font-weight: bold;
font-size: .95em;
color: #8749BB;
padding: 3px;
margin-top: -3px;
}

.form .textbox_small input[type="text"]{
border: 1px solid #444;
width: 2em; height: 1.25em;
padding: 1px 3px;
}

.textbox_small label { /*apply class to containing p element*/
width: 300px;
}



	/*Text Area Styles*/
.form textarea{
background: #000 url(img/module_type1_bg.jpg) repeat-x;
border: 1px solid #333;
color: #8749BB;
font: 1em arial, sans-serif;
padding: 4px;
overflow: auto;
float: right;
margin-top: 4px;
width: 250px;
}

	/*Button Styles*/
.form_button{
border: 1px solid #000;
background: #333 url(img/mainnav_bg.jpg) repeat-x;
color: #BBB;
padding: 3px;
margin-left: 12px;
}

	/*Checkbox and Radio Styles*/
.form_checkbox{ /*apply to containing ul element*/
list-style-type: none;
float: right;
font-size: .75em;
margin: 0 0 10px 0;
}
.form_checkbox li{
float: left;
width: 125px; 
}
.form_checkbox label{
float: left;
color: #888;
width: 100px;
padding: 2px 2px 10px 3px;
}
.form_checkbox input {
float: left;
}




/*Checkbox/Radio List Style - Vertical List Full Width*/
.form_checkbox_long{ /*apply to containing ul element*/
list-style-type: none;
font-size: .85em;
}
.form_checkbox_long li{
padding: 5px 10px;
width: 375px;
}
.form_checkbox_long label{
color: #888;
float: none;
}


/*Checkbox/Radio List Style - Yes/No*/
.form_checkbox_yesno{ /*apply to containing ul element*/
list-style-type: none;
float: left;
font-size: .75em;
}
.form_checkbox_yesno li{
float: left;
width: auto;
padding: 5px 5px 5px 10px;
color: #888;
}
.form_checkbox_yesno label{
float: none;
color: #888;
}





/*///////Simple Contact Form//////*/

#form_contact #contact_form_bottom_section label {
font-weight: normal;
width: 135px;
margin-left: 6em;
}

#form_contact h4{
font-size: 100%;
float: left;
margin-left: 22px;
padding-top: 10px;
background: url(img/hr.jpg) repeat-x;
}



/*///////Cost Estimate Form//////*/

#form_quote_body label{
}

#form_quote_body div{
width: 395px;
border: 1px solid #222;
margin: 10px 10px 3em 10px;;
padding: 10px 2px;
position: relative;
float: left;
}

#form_quote h4{
position:absolute;
top: -1.8em; left: -2px;
background: #1A1A1A;
padding: 3px 8px;
width: auto;
}

#content #form_quote #form_quote_body p{
padding: 5px 10px;
font-weight: bold;
color: #555;
}

#form_quote_body textarea{ /*override*/
width: 352px;  
margin: 10px auto;
}

#form_quote_body div#quoteform_bottom {
margin-top: -2.5em;
}
#quoteform_bottom label{ /*override*/
width: auto;
font-size:.9em;
padding: 2px 10px 0 0;
}
#quoteform_bottom p .form_button{
float: right;
}




/* =Tables
-----------------------------------------------------------------------------*/

table { 
  border-spacing: 0;
  border-collapse: collapse;
  border: 1px solid #333;
  width: 400px;
  margin: 15px 0 0 10px;
  color: #999;
  font: .9em arial, sans-serif;
}

th{
font-size: 1em;
color: #BBB;
padding: 5px;
border-bottom: 1px solid #272727;
text-align: left;
}

thead {
background: #161616;
}

td {
  text-align: left;
  font-weight: normal;
  padding: 3px 5px;
  border-bottom: 1px solid #222;
}

tr:hover {background: #161616;}

.additionalinfo {
width: 150px;
}


/* =Other
-----------------------------------------------------------------------------*/