@import url("reset.css"); 

#ie6warning{border:2px solid #101010; width:78%; height:55%; padding:10px; color:navy; background-color:#f0f0f0; overflow:auto}

#hot_ball{position:absolute; width:100px; height:100px; background:url(images/hot_ball_single.gif) no-repeat; top:18px; left:40px}

#socket{position:absolute; top:10px; left:32px}

#hot_ball_static{position:absolute; width:120px; height:120px; background:url(images/socket.jpg) no-repeat; top:10px; left:32px}

#header_img{position:absolute; height:100%; width:100%; background:url(backgrounds/header_bg.jpg) repeat-x}

#contact_form{}

form legend, form p{font-weight:bold}

form fieldset{border:2px solid #00009c; padding:10px; color:#00009c}

form label{text-align:right; margin-right:0.5em;    font-weight:bold; font-size:100%; width:35%; float:left}

form input, form select{display:block; color:#00009c; font-size:95%; background-color:#f2efe9}

form input:focus, form textarea:focus, form select:focus{border:1px solid #000080; background-color:#fff}

form textarea{width:100%; background:#f2efe9 url(images/hot_ball_pale.png) bottom right no-repeat}

form .buttonarea input{background:#00009c; color:#fff; font-weight:bold; padding:5px; border:3px solid #fff; margin:auto; cursor:pointer}

form .buttonarea input:hover{color:#f55; border:3px solid #f55}

fieldset ol{ padding:1em 1em 0 1em;  list-style:none}
 
fieldset li{ padding-bottom:1em}

html, body{background-color:#fff}

a:hover{}

a:focus{color:#f00; text-decoration:underline}

#navigation{position:absolute; bottom: 0; left:25%; width:69%; z-index:1}

#nav_home a, #nav_about a, #nav_contact a, #nav_services a, #nav_prices a{padding-top:4.5em; padding-left:2.25em}

#nav_images a{position:relative; float:left; width:75px; background:url("images/hot_ball_button.png") no-repeat}

#nav_images:link{position:relative; left:35px; top:100%}

#nav_images a:hover{background:url("images/cold_ball_button.png") no-repeat}

#nav_images a:active{background:url("images/hot_ball_button_active.png") no-repeat}

#sub_nav{position:absolute; top:10%; right:2%; width:14%; z-index:1}

#sub_nav_lhs{position:absolute; top:10%; left:2%; width:12%}

#nav_story a, #nav_background a, #nav_portfolio a, #nav_testimonials a, 
#nav_brochure a, #nav_small_business a, #nav_ecommerce a, 
#nav_website_types a, #nav_features a, #nav_what_we_offer a, 
#nav_why_us a, #nav_hosting a, .rhs_menu a{padding-top:0.5em; padding-left:3em}

#nav_images_small a{position:relative; float:right; width:110px; height:50px; background:url("images/hot_ball_button_small.png") no-repeat}

#nav_images_small a:hover{background:url("images/cold_ball_button_small.png") no-repeat}

#nav_images_small a:active{background:url("images/hot_ball_button_small_active.png") no-repeat}

#body_home #nav_home a, 
#body_about #nav_about a, 
#body_contact #nav_contact a, 
#body_services #nav_services a, 
#body_prices #nav_prices a{color:green; font-weight:bold; text-decoration:none; cursor:default; background:url("images/hot_ball_button_current.png") no-repeat}

#body_story #nav_story a, 
#body_background #nav_background a, 
#body_portfolio #nav_portfolio a, 
#body_testimonials #nav_testimonials a, 
#body_services #nav_what_we_offer a, 
#body_why_us #nav_why_us a{color:green; font-weight:bold; text-decoration:none; cursor:default; background:url("images/hot_ball_button_small_current.png") no-repeat}

#header{position:absolute; margin-left:20%; margin-right:20%; top:0}

#bodycontent{position:absolute; margin-left:20%; margin-right:20%; top:10%; height:68%; padding:0.5%; overflow:auto; width:60%}

#header h1, h1, legend, h2, h3{font-family:Georgia,Times New Roman,Comic Sans MS,Chiller,Verdana,Helvetica,Arial,sans-serif; text-shadow:5px 5px 6px #00009c; color:#f00; font-weight:bold; font-style:italic; padding:1.5% 0 0.5em 0; font-size:250%}

h1, legend, h2{font-size:200%}

h3{font-size:150%}

p{color:#00009c; line-height:1.5em; padding-bottom:1em; font-size:100%; font-weight:normal}

li{color:#00009c}

a{font-weight:bold}

#body_services #bodycontent h3{color:#00009c; font-size:50%; font-size:0.5em; text-shadow:none}

#footer{position:absolute; bottom:0; right:1%; font-size:75%}

#site_by{position:absolute; bottom: 0; left:1%; font-size:75%}

#offer{position:fixed; top:20%; left:85%; width:13%; max-height:20%}

#offer p{visibility:hidden}

#offer:hover p{visibility:visible}

#our_mission p{font-style:italic; font-weight:bold; margin:auto; text-align:center}

#our_product{margin-left:32%; margin-top:5%; width:45%; z-index:1}

#our_job{width:30%; float:right; margin-right:10%}

#our_info{margin-top:5%; right:40%; width:70%}

#portfolio{position:absolute; overflow:auto; width:300px; height:175px; margin-top:-20%; right:0}

#our_portfolio #portfolio{margin-top:5%; width:592px}

#verified{position:absolute; bottom:5%; right:3.5%}

#xhtml_link, #browsers_link, #verified p{padding:0; line-height:1.5; font-weight:normal; font-size:65%; text-decoration:underline}

#xhtml_badge_text{position:absolute; right:-35%; bottom:100%; width:150%; padding:20%; background-color:#fffaaa; visibility:hidden; font-size:125%; z-index:1}

#browsers_text{position:absolute; right:-74%; top:-180%; width:150%; padding:2%; background-color:#fffaaa; visibility:hidden}

#xhtml_badge_text p, #browsers_text p{text-decoration:none}

#browsers{position:absolute; bottom:20%}

#browsers ul{position:absolute; width:175%}

#browsers li{float:left; padding-left:8%}

#testimonials{position:absolute; bottom:0; left:10%}

#search_engines a:hover, #browsers a:hover{border-bottom:1px solid red}

#body_notfound #bodycontent{background:url(images/BenLawersDog.jpg) center center}

#body_about #about_us li{float:left; padding-left:2%; width:45%}

#body_services h3 span, 
#body_why_us h3 span, 
#body_services li span, 
#body_why_us li span{display:none}

#copyright{position:absolute; background-color:#fffaaa; visibility:hidden; bottom:2%; right:15%; width:46%; padding:1em; overflow:auto}

#copyright a:hover span{display:block}

#service_text{position:fixed; border-top:1px solid #eee; border-right:1px solid #eee; border-left:1px solid #fff555; border-bottom:1px solid #fff555; background-color:#fffeee; color:#00009c; top:25%; left:1%; padding:0.5em; padding-top:0; width:15%; max-width:15%; height:50%; overflow:auto}

#service_text{-webkit-box-shadow:-3px 3px 3px #c88; -moz-box-shadow:-3px 3px 3px #c88; box-shadow:-3px 3px 3px #c88; -webkit-border-radius:1em; -moz-border-radius:1em; border-radius:1em}

#service_text:first-line{font-weight:bold; line-height:2em}

#TMI{position:absolute; top:45%; left:20%; width:55%}

#body_services #get_found:hover span{font-size:50%}

#body_services #get_found:hover span, 
#body_services li:hover span, 
#body_why_us li:hover span{display:block; position:fixed; margin-top:-5em; color:#9c0000; background-color:#eef; width:auto; font-style:normal; font-size:100%; line-height:1.5; text-align:left; text-shadow:none; right:15%; width:35%; max-width:35%; z-index:1}

#brochure_site, #small_business_site, #ecommerce_site, #hosting{width:60%; margin:auto; margin-bottom:3em}

#brochure_site li, #small_business_site li, #ecommerce_site li, #features li, 
#hosting li, #body_why_us #bodycontent li{list-style-type:disc; margin-left:2em; line-height:2em}

#brochure_site{background-color:#fcc}

#small_business_site{background-color:#cfc}

#ecommerce_site{background-color:#ccf}

#hosting{background-color:#fff222}

.catchphrase{font-size:45%; font-style:italic; color:#00009c}

.content{border-top:1px solid #eee; border-right:1px solid #eee; border-left:1px solid #fff555; border-bottom:1px solid #fff555; background-color:#fffeee; margin-bottom:2%; padding:1%}

.content{-webkit-box-shadow:-3px 3px 3px #c88; -moz-box-shadow:-3px 3px 3px #c88; box-shadow:-3px 3px 3px #c88; -webkit-border-radius:1em; -moz-border-radius:1em; border-radius:1em}

.photo_credit{font-size:70%; font-style:italic; color:#00009c; display:block}

.rhs{float:right; margin:2%}

.lhs{float:left; margin:2%}

.rotate_right:hover{-moz-transform:scale(1.5) rotate(10deg); -webkit-transform:scale(1.5) rotate(10deg); -o-transform:scale(1.5) rotate(10deg); transform:scale(1.5) rotate(10deg)}

.rotate_left:hover{-moz-transform:scale(1.5) rotate(-10deg); -webkit-transform:scale(1.5) rotate(-10deg); -o-transform:scale(1.5) rotate(-10deg); transform:scale(1.5) rotate(-10deg)}

.service_block{border-top:1px solid #eee; border-right:1px solid #eee; border-left:1px solid #fff555; border-bottom:1px solid #fff555; background-color:#fffaaa; color:#55c; margin-bottom:2%; padding:1%; width:7em; max-width:7em; text-align:left; cursor:help}

.service_block{-webkit-box-shadow:-3px 3px 3px #c88; -moz-box-shadow:-3px 3px 3px #c88; box-shadow:-3px 3px 3px #c88; -webkit-border-radius:1em; -moz-border-radius:1em; border-radius:1em}

.service_block:hover{color:#f00; background-color:#fff777; margin-top:-0.5em}

.greyed:hover{background-color:#ccc; color:#eee; text-shadow:2px 2px 2px #f00}

.greyed{background-color:#ccc; color:#eee; text-shadow:2px 2px 2px #00009c}

.highlight_text{text-decoration:underline; cursor:help}

.highlight_text:hover:after{content:' (' attr(title) ')'}

#box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8, #box9, #box10, 
#box11, #box12, #box13, #box14, #box15, #box16, #box17, #box18, #box19, #box20, 
#box21, #box22, #box23, #box24, #box25, #box26, #box27, #box28, #box29, #box30{position:absolute}

#box1{left:25.5em; top:1em}
#box2{left:0.5em; top:8em}
#box7{left:5.5em; top:15em; visibility:hidden}
#box8{left:5.5em; top:22em; visibility:hidden}
#box9{left:5.5em; top:29em; visibility:hidden}
#box10{left:5.5em; top:36em; visibility:hidden; background-color:#fff222}
#box28{left:20em; top:36em; visibility:hidden; background-color:#fff222}
#box29{left:30em; top:36em; visibility:hidden; background-color:#fff222}
#box30{left:40em; top:36em; visibility:hidden; background-color:#fff222}
#box11{left:5.5em; top:43em; visibility:hidden; background-color:#f88}
#box21{left:20em; top:43em; visibility:hidden; background-color:#f88}
#box22{left:30em; top:43em; visibility:hidden; background-color:#f88}
#box12{left:5.5em; top:50em; visibility:hidden; background-color:#def}
#box18{left:20em; top:50em; visibility:hidden; background-color:#def}
#box19{left:30em; top:50em; visibility:hidden; background-color:#def}
#box20{left:40em; top:50em; visibility:hidden; background-color:#def}
#box23{left:55em; top:22em; visibility:hidden; background-color:#cff}
#box24{left:55em; top:29em; visibility:hidden; background-color:#cff}
#box25{left:55em; top:36em; visibility:hidden; background-color:#cff}
#box26{left:55em; top:43em; visibility:hidden; background-color:#cff}
#box27{left:55em; top:50em; visibility:hidden; background-color:#cff}
#box3{left:13em; top:8em; background-color:#cfc}
#box4{left:25.5em; top:8em; background-color:#ccf}
#box13{left:30.5em; top:15em; visibility:hidden; background-color:#ccf}
#box14{left:30.5em; top:22em; visibility:hidden; background-color:#ccf}
#box15{left:30.5em; top:29em; visibility:hidden; background-color:#ccf}
#box5{left:38em; top:8em; background-color:#fcc}
#box16{left:43.5em; top:15em; visibility:hidden; background-color:#fcc}
#box17{left:43.5em; top:22em; visibility:hidden; background-color:#fcc}
#box6{left:50.5em; top:8em; background-color:#eeeef0}

#sb_box2, #sb_box4, #sb_box5, #sb_box10, #sb_box11, #sb_box12, #sb_box20, #sb_all{position:absolute; text-decoration:underline; font-size:75%; text-shadow:none; width:11.25em; text-align:right}

#sb_box10, #sb_box11, #sb_box12, #sb_box20{visibility:hidden}

#sb_all{left:15em; top:1em; font-size:125%}
#sb_box2{left:0.5em; top:1em}
#sb_box4{left:0.5em; top:1em}
#sb_box5{left:0.5em; top:1em}
#sb_box10{left:0.5em; top:1em}
#sb_box11{left:0.5em; top:1em}
#sb_box12{left:0.5em; top:1em}
#sb_box20{left:0.5em; top:1em}