/* ----------------------------------------------------
Screen Stylesheet for http://www.VisibilityInherit.com

Updated: 08/10/08
Author: Eric Watson
Website: http://www.VisibilityInherit.com
------------------------------------------------------- 
: Site Colors : 
gradient ... top#999999 bottom#161616

: Table Of Contents :
Resets
Defaults
Cursor
Typography
Forms
Layout
Links
Menus
Global Classes
Drop Shadow
Content
---------------------------------------------------- */

/* -------------------- Resets --------------------- */
body, address, blockquote, dl, ol, ul, li, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre {
margin:0;
padding:0;
}
/* --------------- Document Defaults -------------- */
html {
height:100%;
}
body {
height:101%;
font-size:62.5%;
font-family:Tahoma, Arial, Helvetica, 'MS Sans Serif', sans-serif;
background:#161616 url(images/gradient.jpg) 0 0 repeat-x;
color:#000;
}
/* ----------------- Custom Cursor ----------------- */
body {
cursor:url("http://www.visibilityinherit.com/images/arrow.cur"), auto;
}
a, label, .submit, #tools #targetcheckbox, #code-converter input {
cursor:url("http://www.visibilityinherit.com/images/hand.cur"), auto;
}
a:active {
cursor:url("http://www.visibilityinherit.com/images/wait.ani"), auto;
}
p, h2, h3, h4, h5 { 
cursor:url("http://www.visibilityinherit.com/images/text.cur"), auto;
}
/* ------------------ Typography ------------------- */ 
h1 {
font-size:3em;
letter-spacing:2px;
font-weight:normal;
position:relative;
text-align:center;
padding:35px 110px 15px 110px; /* padding-top/bottom + height = height of image */ 
width:500px;
height:50px; 
overflow:hidden;
}
h1 span {
background:url(images/heading.gif) no-repeat left top;
position:absolute;
left:110px;
top:10px;
display:block;
height:100px;
width:500px;
}
h1 a {
text-decoration:none;
}
h2 {
font-size:1.7em;
margin:0 0 1em;
}
h3 {
font-size:1.4em;
margin:0 0 1em;
}
h4 {
font-size:1.3em;
margin:0 0 1em;
}
h5 {
font-size:1.2em;
margin:0 0 1em;
}		
p, li {
font-size:1.2em;
}
p {
margin:0 0 1em;
}
#content {
line-height:1.5;
}
#content ul {
margin:0 0 1em 40px;
list-style:square;
}
/* -------------------- Forms ---------------------- */
#contact label, #contact input, #contact textarea {
font-size:1.2em;
font-family:Tahoma, Arial, Helvetica, 'MS Sans Serif', sans-serif;
float:left;
clear:left;
display:block;
width:250px;
font-weight:bold;
}
#contact input {
padding:.2em;
margin-bottom:.2em; 
}
#contact input#spam {
width:117px;
clear:none;
text-align:center;
padding:.1em 0 .3em;
margin:0;
}
#contact textarea {
height:120px;
margin-bottom:1.4em;
overflow:auto; /* removes IE scrollbar */
padding:.2em;
}	
#contact input.submit {
margin:0 0 0 20px;
clear:none;
width:117px; 
padding:.1em;
}
#contact form label span { 
color:#666;
position:relative; /* positions the star next to label */
top:.2em;
}
#contact form input, #contact form textarea {
background:#999;
}  
#contact input:hover, #contact textarea:hover, #contact input.hover, #contact textarea.hover {
background:#CCC;
}  
#contact input:focus, #contact textarea:focus {
background:#CCC;
outline:0; /* for Safari's blue border */
}  
/* ------------------- Layout -------------------- */
* html #wrapper {
height:100%;
}
#wrapper {
margin:0 auto;
width:720px;
min-height:100%;
background:#CCC;
border-left:1px solid #000;
border-right:1px solid #000;
}
#header {
height:120px;
border-bottom:1px solid #3FC;  
}
#nav { 
position:relative;
background:#7b7b7b;
text-align:center;
width:722px;
margin:0 -1px;
}
#content {
padding:60px 80px 52px; /* only use padding on #content, not margin, or it moves the top border */ 		
border-top:1px solid #3FC;
}
#clearfooter {
height:70px;
}
#footerborder {
height:1px;
width:640px;
background:#000; 
margin:0 40px;
border-bottom:1px solid #3FC;
overflow:hidden;
}
#footer {
height:70px;
width:720px;
text-align:center;
margin:-71px auto 0;
position:relative;
}
/* ------------------- Links ---------------------- */
a {
text-decoration:underline;
color:#000;
outline:0;
}
a:active, a:focus, a:hover {
text-decoration:none;
}
a img {
border:none;
}
/* --------------------- Menus ---------------------- */
/* Main Menu */
#nav ul {
padding:0 0 1px;
list-style:none;
}
#nav li {
position:relative;
display:inline;
font-weight:bold;	
padding:0 15px;
}
#nav li a {
text-decoration:none;
color:#000;
}
#nav li a:active, #nav li a:focus, #nav li a:hover {
color:#3FC; 
border-top:1px solid #000; 
border-bottom:1px solid #000; 
padding:0 0 1px;
}
body#home a#homenav, body#about a#aboutnav, body#portfolio a#portfolionav, body#testimonials a#testimonialsnav, body#begin a#beginnav, body#worksheet a#beginnav, body#contract a#beginnav, body#prices a#beginnav, body#tools a#toolsnav, body#code a#toolsnav, body#contact a#contactnav {
color:#3FC; 
}
body#home a#homenav:hover, body#about a#aboutnav:hover, body#portfolio a#portfolionav:hover, body#testimonials a#testimonialsnav:hover, body#begin a#beginnav:hover, body#tools a#toolsnav:hover, body#contact a#contactnav:hover {
color:#3FC;
border-top:1px solid #000; 
border-bottom:1px solid #000; 		
}
/* Footer Menu */
#footer ul {
margin-top:20px;
list-style:none;
}
#footer li {
display:inline;
margin:0;
font-size:1em;
}
#footer a {
text-decoration:none;
}
#footer a:active, #footer a:focus, #footer a:hover {
text-decoration:underline;
}
/* ---------------- Global Classes ----------------- */
.center {
text-align:center;
}
.clear {
clear:both;
line-height:0;
height:0;
font-size:0;
}
.nomargin {
margin:0;
}
.marginbottom {
margin:0 0 1em;
}
.marginbottom2 {
margin:0 0 2em;
}
/* ------------------ Drop Shadow ------------------ */
.shadow {
background:url(images/rightcorner.png) right top no-repeat;
float:left;
display:inline;
} 
.shadow div {
background:url(images/leftcorner.png) left bottom no-repeat;
padding:8px 0 0 8px;
} 
.shadow span {
background:url(images/shadow.png) bottom right;
display:block;
}
.shadow b {
position:relative;left: -8px; top: -8px;
display:block;
}
.shadow img {
vertical-align:bottom;
}
* html .shadow {
background:url(images/rightcorner.gif) right top no-repeat;
} 
* html .shadow div {
background:url(images/leftcorner.gif) left bottom no-repeat;
} 
* html .shadow span {
background:url(images/shadow.gif) bottom right;
}
/* ----------------- Content/Pages ----------------- */
/* ------ About Page ------ */
#about .shadow {
margin:5px 7px 0 0;
}
#about .shadow b {
width:150px;
height:214px;
background:url(images/family-photo-alt.jpg) 0 0 no-repeat;
}
/* ------ Begin Page ----- */
#begin #content li {
margin:0 0 .71em;
}
/* ------ copyright ------ */
#copyright { 
font-size:1em;
margin-top:1px;
}
/* ---- copyright page ---- */
#copyrightpage .shadow {
margin:5px 7px 0 0;
}
/* ------ Code Pages ------ */
pre {
display:block;
border:#999 solid 1px; /* IMPORTANT same background and border as code converter, php copyright date, and js copyright date */
overflow:auto;
max-height:340px;
font-size:12px;
width:535px;
padding:5px 10px 10px 10px;
background:#eee; /* old background was #E0E0E0 */
margin:2em 0;
line-height:1.415; /* or use normal, prevents firefox bug from cutting off bottom border */
cursor:text;
}	
#code span {
color:#666;
}
#code .spacerdiv {
width:475px;
height:2px;
margin:4em auto 3em auto;
background:#999;
overflow:hidden;
}
#code h3 {
font-size:1.5em;
}
/* code converter */
#code-converter textarea {
width:545px;
height:200px;
padding:5px;
background:#eee;
border:#999 solid 1px;
overflow:auto;
}
#code-converter pre {
height:200px;
margin-top:0;
}
#code-converter input#submit {
padding:4px 5px;
font-weight:bold;
margin:15px 0;
}
/* ----- Contact Page ----- */
#contact form {
float:right;
width:261px;
}
#contact #left {
float:left;
width:240px;
margin:;
display:inline;
}
/* ------- #footer -------- */
#footer #greensymbols {
position:absolute;
top:20px;
right:40px;
} 
#footer #purplesymbols {
position:absolute;
top:20px;
right:40px;
} 
#footer img {
margin:0 0 0 5px;
}
/* ------- heading -------- */
#header img {
margin:10px 110px;
}
/* -------- Prices -------- */
#prices #content li {
margin:0 0 .2em;
}
/* ---- Portfolio page ---- */
#portfolio .shadow {
margin:0 22px 40px;
}
#portfolio .shadow img {
padding:4px;
background:#666;
}
#portfolio .shadow img:hover, #portfolio .shadow img.hover { /* .hover for IE6 */
background:#444;
outline:#444 solid 1px;
}
#portfolio #content {
overflow:hidden; /* contain floats */
}
/* ---- Thank You Page ---- */
#thankyou h2 {
text-align:center;
margin:90px 0 0;
font-size:2.5em;
font-weight:normal;
}
/* ------ Tools Page ------ */
#tools #content {
padding:60px 80px;
}
#tools #right {
float:right;
padding:0 0 0 21px; /* needed for IE6, otherwise it cuts off the h2 */
}
#tools h2 {
margin-left:-20px;
} 
#tools #content ul {
margin:0 0 1.2em 20px;
list-style:none;
}
#tools #content li li {
font-size:100%;
font-weight:normal;
}
#tools #content h3 {
margin:0;
}
#tools #content li h3 {
font-size:1.2em;
}
#tools #content ul a { /* needed to create haslayout in IE7 so links react faster */
display:inline-block;
min-height:0;
}
#tools #targetcheckbox, #tools #targetlabel {
font-size:1.2em;
min-height:0; /* needed to create haslayout in IE7 so links react faster */
margin:0 9px 0 0;
background:#CCC;
}
#tools #targetform {
margin:0 0 0 -20px;
}
#tools #content a {
text-decoration:none;
}
#tools #content a:visited {
text-decoration:line-through;
}
#tools #content a:active, #tools #content a:focus, #tools #content a:hover {
text-decoration:underline;
}
/* Affiliate Program Ads */
#tools #wrapper {
position:relative;
}
#tools #adleft {
position:absolute;
top:267px;left:-133px;
width:120px;
}
#tools #adleft a {
float:left;
display:inline;
margin-bottom:10px;
}
body#tools {
min-width:985px;
}
/* - Website Creation Worksheet - */
#worksheet span {
color:#666;
}
#worksheet #content img {
float:right;
margin:0 0 0 12px;
}
/* -- Website Design Contract -- */
#contract #content img  {
float:right;
margin:0 0 0 12px;
}
/* ----------- Custom Search Engine ----------- */
/* --- Search Window --- */
#ffresult_win { /* wrap */
z-index:1;
padding:20px 0 16px 0;
border:1px solid #000;
border-top:1px solid #3FC;  
display:none;
position:absolute;
top:0;left:0;
}
#ffresult_bar {
cursor:move;
z-index:5;
position:absolute;
top:0;left:0;
text-align:right;
width:100%;
height:20px;
display:block;
}
#ffrclose { /* Close Window link */
z-index:6;
font-family:arial, verdana, sans-serif;
font-weight:bold;
font-size:12px;
text-decoration:underline;
color:#000;
line-height:1.6;
position:static; /* for Opera */
}
#ffresult_2 {
z-index:7;
position:relative;
height:100%;
background:#ccc;
display:block;
}
#ffresult_cvr {
z-index:0;
position:absolute;
top:0;left:0;
display:block;
width:100%;
height:100%;
}
#ffresult_ifr { /* iframe */
z-index:1;
position:absolute;
top:0;left:0;
}
#ffresult_btm { /* bottom */
position:absolute;
bottom:0;left:0;
display:block;
z-index:18;
background:#ccc;
width:100%;
height:16px;
}
#ffresult_sbx { /* resizer */
cursor:se-resize;
float:right;
width:16px;
height:16px;
}
/* --- Search Window Tooltips --- */
.tooltip { 
position:relative;
font-family:arial, verdana, sans-serif;
font-size:12px;
} 
.tooltip span { 
position:absolute;
left:-999em; 
} 
.tooltip:hover span, .tooltip:focus span {
left:24px;
top:2px;
font-weight:bold;
}
#ffrclose.tooltip:hover span, #ffrclose.tooltip:focus span {
position:relative;
float:left;
background:#ccc;
width:125px;
height:20px;
}
#ffresult_btm .tooltip:hover span, #ffresult_btm .tooltip:focus span {
left:-100px;
top:0;
}
/* --- Search Input Box --- */
.search-box { /*outer background*/
background:url(images/search-box.gif) no-repeat 0 0;
height:26px;
padding:5px 0 0 10px;
width:165px;
float:right;
display:inline;
margin:-4px 37px 36px 0;
}
input.search-field { /*input field */
float:left;
border:0;
margin:0;
font-family:Tahoma, Arial, Helvetica, 'MS Sans Serif', sans-serif;
font-size:12px;
font-weight:bold;
padding:3px 0 0 4px;
height:18px;
background:#fff url(images/search-form.png) no-repeat 100% 0;
width:123px;
outline:0;
}
input.search-go { /*search icon */
float:left;
border:0;
padding:0;
margin:0 0 0 8px;
height:21px;
width:21px;
background:url(images/search-icon.png) no-repeat top left;
cursor:url("http://www.visibilityinherit.com/images/hand.cur"), auto;
}
input.search-go:active, input.search-go:focus, input.search-go:hover {
background:url(images/search-icon.png) no-repeat 0 100%;
}