/***************************************************************** * netstuff stylesheet * * designed and coded by: john grieco * * january 2009 * *****************************************************************/ body { background: #666 url(/images/bg.jpg) repeat-x left top; margin: 0 0 0 0; font-family: "Trebuchet MS", Arial; color: #fff; font-size: 16px; } h1 { font-size: 24px; } h2 { font-size: 20px; } h3 { font-size: 17px; } h1, h2, h3 { font-weight: bold; } h1.blue, h2.blue, h3.blue { color: #37c7fb; } h1.yellow, h2.yellow, h3.yellow { color: #dfc52a; } h1.pink, h2.pink, h3.pink { color: #fe4272; } #container { width: 800px; margin: 0 auto; } #header { position: relative; height: 154px; } #logo { position: absolute; top: 20px; left: 0px; } #top_name { position: absolute; text-align: right; top: 6px; right: 0px; color: #666; font-size: 18px;} #top_name a { color: #37c7fb; font-weight: bold; text-decoration: none; } #top_name a:hover { background-color: #333; } #nav { right: 0px; top: 70px; position: absolute; font-size: 24px; margin: 0; padding: 0;} #nav li { display: inline; padding-right: 40px; } #nav li.last { padding-right: 0px; } #nav li a {color: #DFC52A; text-decoration: none; } #nav li a span { color: #fff; } #nav li a:hover { text-decoration: overline; } #nav li a.current { color: #FE4272; text-decoration: overline; } #home_spread { height: 270px; position: relative; margin: 0 auto; } #slide1, #slide2, #slide3, #slide4, #slide5 { position: absolute; top: 0px; left: 0px; } #slide2, #slide3, #slide4, #slide5 { display: none; } #home_copy { font-size: 14px; color: #fff; margin: 0 10px 0 10px; padding-bottom: 30px; text-align: right;} #home_copy a { color: #fff; text-decoration: underline; font-weight: bold; font-size: 15px; } #home_copy a:hover { text-decoration: overline; } #footer { width: 100%; height: 280px; border-top: 1px solid #fff; position: relative; background-color: #666; z-index: 4; line-height: 14px;} #footer_me { position: absolute; top: 20px; left: 10px; width: 240px; height: 20px; font-weight: bold; color: #fff; border-bottom: 1px solid #DFC52A; } #footer_me_copy { position: absolute; top: 60px; left: 10px; font-size: 12px; width: 240px; text-align: justify; } #footer_me_copy a { color: #fff; text-decoration: underline; } #footer_me_copy a:hover { text-decoration: overline; } #footer_me_copy img {margin: 0 10px 2px 0; border: 1px solid #fff; padding: 2px;} #footer_me2 { position: absolute; top: 20px; left: 280px; width: 240px; height: 20px; font-weight: bold; color: #fff; border-bottom: 1px solid #37c7fb; } #footer_me2_copy { position: absolute; top: 60px; left: 280px; font-size: 12px; width: 240px; text-align: justify; } #footer_links { position: absolute; top: 20px; left: 550px; width: 240px; height: 20px; font-weight: bold; color: #fff; border-bottom: 1px solid #FE4272; } #footer_links_copy { position: absolute; top: 60px; left: 566px; font-size: 12px; width: 210px; text-align: justify; font-size: 12px; list-style-type: square; margin: 0; padding: 0;} #footer_links_copy li { color: #fe4272; padding-bottom: 6px; } #footer_links_copy li span { color: #ccc; } #footer_links_copy li span a { color: #fff; line-height: 15px;} #footer_links_copy li span a:hover { text-decoration: overline; } #copyright { width: 100%; height: 50px; border-top: 1px solid #fff; font-size: 11px; } #copyright p { padding-left: 10px; } #copyright a { color: #fff; } #copyright a:hover { text-decoration: overline; } #madeonamac { margin: 0 auto; width: 139px; height: 80px;} /********* services page ************/ #services_container { height: inherit; width: 800px; position: relative; margin: 0 10px 0 10px;min-height: 540px; } #services_center { position:absolute; height: 500px; width: 360px; top: 0px; left: 180px; font-size: 13px; padding: 0 20px 40px 20px; border-left: #fff 1px solid; border-right: #fff 1px solid; text-align: justify; } #services_center a { font-weight: bold; text-decoration: underline; color: #ccc; } #service_body1 { z-index: 2; } #service_body2 { z-index: 1; } #service_body1, #service_body2 { position: absolute; top: 0px; left: 0px; padding: 0 20px 0 20px; display: block;} #services_left { position: absolute; top: 0px; left: 0px; } #services_right { position: absolute; top: 0px; right: 20px; width: 180px; font-size: 12px; text-align: justify;} #services_list { list-style: none; padding: 0; margin: 0; } #services_list li a { font-size: 16px; color: #fff; text-decoration: none;} #services_list li a:hover { background-color: #333; } #services_list li a.current { color: #dfc52a; } /********* contact page *************/ #contact_container { height: 600px; width: 800px; position: relative; margin: 0 10px 0 10px; } #contact_sidebar { position: absolute; top: 6px; left: 0px; } #contact_sidebar .accepting_work { color: #2aff00; } #contact_sidebar .not_accepting_work { color: #f00; } #contact_sidebar a { color: #fff; text-decoration: underline; } #contact_sidebar a:hover { text-decoration: overline; } #vcard { background: url(/images/vcard_icon.png) #757575 no-repeat; background-position: 5px 4px; width: 210px; height: 44px;} #vcard p { padding: 14px 0 0 57px; } #vcard a { width: 100%; height: 100%; color: #fff; text-decoration: none; } #vcard a:hover { text-decoration: underline; } #pay { font-size: 13px; border-left: 1px solid #fff; padding-left: 10px; } #pay input { background-color: #757575; border: 0; padding: 4px; color: #fff; } #pay input.textinfo { width: 130px; } #pay_header b a { color: #fff; text-decoration: underline; font-size: 16px; } #pay_header b a:hover { text-decoration: overline; } #contact_form { position: absolute; top: 0px; left: 240px; font-size: 14px; height: 570px;} #contact_sent { position: absolute; top: 0px; left: 240px; height: 400px;} #contact_form_left { position: absolute; top: 44px; left: 0px; } #contact_form_right { position: absolute; top: 44px; left: 287px; } #contact_form h1 span.required { font-size: 14px; color: #fff; font-weight: normal; } #contact_form input, #contact_form textarea, #contact_form select { background-color: #666; border: 0; color: #fff; padding: 4px; font-size: 18px;} #contact_form select { font-size: 14px; } #contact_form input.textinfo, #contact_form select, #contact_form textarea { width: 245px; } #contact_form textarea { height: 410px; } #contact_submit { position: absolute; top: 520px; left: 0px; } #contact_sent a { color: #fff; text-decoration: underline; } #contact_sent a:hover { text-decoration: overline; } /******** portfolio page ********/ #portfolio_container { height: inherit; width: 800px; position: relative; } #folio { width: 800px; height: 400px; overflow: hidden; position: relative; } #folio_holder { position: absolute; top: 0px; left: 0px;} div.folio_entry { width: 800px; height: 400px; position: relative; background-color: #333; } div.folio_entry div.thumbs { position: absolute; top: 50px; left: 10px; width: 400px; } div.folio_entry div.thumbs img { border: 1px solid #fff; margin: 5px; padding: 2px;} div.folio_entry h2 { margin: 0 auto; width: 780px; border-bottom: 1px solid #fff; padding: 10px 0 5px 0; } div.folio_entry div.info { position: absolute; top: 60px; left: 360px; font-size: 14px; width: 430px;} div.folio_entry div.info ul { padding: 0 0 0 12px; margin: 0 0 0 12px; list-style-type: square; color: #fe4272; } div.folio_entry div.info ul li span { color: #fff; } div.folio_entry div.info div.bullets { display: block; height: 48px; } div.folio_entry div.info ul.services1 { position: absolute; top: 26px; left: 0px; } div.folio_entry div.info ul.services2 { position: absolute; top: 26px; left: 200px; } div.folio_entry span.folio_subtitle { font-weight: bold; font-size: 17px; line-height: 24px; color: #dfc52a; } div.folio_entry a { color: #37c7fb; font-weight: bold; text-decoration: none; font-size: 15px;} div.folio_entry a:hover { text-decoration: underline; } #controls { position: relative; background-color: #000; width: 800px; height: 30px; margin-bottom: 40px; border-top: 2px solid #ccc; text-align: right; vertical-align: middle; font-size: 13px; } #controls div.workno { display: inline; position: absolute; top: 7px; right: 100px; } #controls div.port { display: inline; position: absolute; top: 7px; left: 10px; font-weight: bold; } #controls div.arrow_left { position: absolute; top: 6px; right: 46px; width: 32px; height: 16px; } #controls div.arrow_right { position: absolute; top: 6px; right: 10px; width: 32px; height: 16px;} #controls div.arrow_left a, #controls div.arrow_right a { width: 100%; height: 100%; } /***************** misc ********************/ a img { border: 0; }