/* CSS style information for Cobb Computing LLC. */ /* GENERAL AND RESET */ * { margin: 0; padding: 0; } html { height: 100%; } body { font: 62.5% Georgia, 'Nimbus Roman No9 L', serif; background: #793c12 url("../images/midbg.jpg"); text-align: center; min-width: 960px; height: 100%; } /* set font by em, 1em = 10px, 1.6em = 16px and so on */ h1 { font-size: 1.67em; } /* displayed at 20px, non standard */ h2 { font-size: 1.5em; } /* displayed at 18px */ h3 { font-size: 1.25em; } /* displayed at 15px */ h4 { font-size: 1em; } /* displayed at 12px */ select, input, td, td { font-size: 2em; } li li, li p, blockquote p, td p { font-size: 1em; } a { text-decoration: none; color: #2e4aff; outline: none; } a:hover { color: #4d8bc9; } img { border: none; } ul { list-style: none; margin: 0; } hr { clear: both; width: 100%; border: 1px solid #ddd; margin: 20px 0 10px 0; } input, textarea { outline: none; border: 1px solid #000; background: transparent url("../images/formsbg.jpg") top left;} table { border-collapse: separate; border-spacing: 2px; } table td { display: table-cell; } /* PAGE AND DIVS SETUP */ body:before { content: ""; height: 100%; float: left; width: 0; margin-top: -32767px; /* Opera Fix for sticky footer*/ } #wrapallexceptfooter { width: 100%; min-height: 100%; } .clear { clear: both; } .fullwidth { width: 100% !important; } .nearlyfullwidth { width: 87% !important; } .halfwidth { width: 50% !important; } #headerwrap { background: #793c12 url("../images/bg.jpg"); } #header { background: transparent url("../images/header3.png") no-repeat center top; min-width: 960px; height: 189px; color: #FFF; margin: 0 auto;} #headergrad { background: #FFFFFF url("../images/headergrad2.jpg") repeat-x left top; height: 30px;} #middlecontentwrap { padding-bottom: 50px; background: #FFFFFF url("../images/midbg.jpg"); min-width: 960px; } /* Background image midbg.jpg licensed under CC 2.0. Orig. Image: http://www.flickr.com/photos/jbennett/11544483/ */ #middlecontent { width: 896px; margin: 0 auto; } #aboutpage #header { height: 392px; } .panel1 { border: 2px solid rgb(200, 208, 214); border: 2px solid rgba(200, 208, 214, 0.9); padding: 30px; background: rgb(220, 228, 234); background: rgba(220, 228, 234, 0.6); /*-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; */ } .shadowed { -moz-box-shadow: 0 0 15px #999; -webkit-box-shadow: 0px 0px 15px #999; box-shadow: 0px 0px 15px #999; } /* GENERAL TYPOGRAPHY */ #main-content { font: 1em Georgia, 'Nimbus Roman No9 L', serif; color: #333; overflow: auto; padding-bottom: 100px; } /* must be same height as the footer */ p { font-size: 2.0em; text-align: left; padding: 0 10px; margin: 0 0 25px 0; line-height: 1.4em; text-shadow: 1px 1px 0px #FFF;} .titletext { clear: both; text-indent: -9999px; } /*#aboutpage .titletext { font-size: 2.0em; text-align: left; margin: 0px 10px 30px 10px; font-weight: normal; text-shadow: 1px 1px 1px #333; }*/ h2 { font-size: 2.4em; padding: 0 30px 10px 0px; margin: 0; text-align: left; text-shadow: 1px 1px 1px #333;} .articletext h2 { padding-left: 30px; } .articletext p { font-size: 1.8em; padding: 0 30px 30px 30px; } .articlepics p { font-size: 1.1em; padding: 0 00px 0 00px; margin: 0px; } /*.articlepics p { font-size: 1.8em; padding: 10px 0; }*/ p.large { font-size: 3.0em; text-align: center; margin: 0 10px; } p.larger { font-size: 3.6em; text-align: center; margin: 50px 10px 50px 10px; } span.smaller { font-size: 0.8em; } .boldtext { font-weight: bold; } .smlink { font-size: 0.8em; line-height: 2.8em;} .centertext { text-align: center; } .move15down { margin: 15px 0 0 0; } .pullquote blockquote p { font-size: 2.0em; text-align: left; } .pullquote p { float: right; font-size: 1.8em; margin: 5px 0 0 0; width: auto; } .articletext .servicesgroup p { padding-bottom: 0; font-size: 1.8em;} form label { text-align: left; font: 2.0em Georgia, 'Nimbus Roman No9 L', serif; clear: both;} form label.error { color: red; font-size: 1.8em; } form input { font: 2.0em Helvetica, san-serif; } form textarea { font: 2.0em Helvetica, san-serif; } td { font: 2.0em Helvetica, san-serif; } /* LOGO */ .logo { text-indent: -9999px; } #toplogowrap { width: 960px; margin: 0 auto; } #logowrap { width: 960px; margin: 0 auto; position: relative;} #logomain { float: left; background: url("../images/logoleft.png") no-repeat; width: 379px; height: 52px; margin: 40px 0 47px 10px; } #logosub { width: 360px; position: absolute; top: -148px; right: 40px; font: italic 3.0em Georgia, 'Nimbus Roman No9 L', serif; color: #f6c415; font-weight: normal; text-shadow: 1px 1px 1px #000; } #logotag { clear: left; margin: 30px auto 20px auto; font: italic 2.8em Georgia, 'Nimbus Roman No9 L', serif; color: #fff; font-weight: normal; text-shadow: 1px 1px 2px #000; text-align: center; display: none; } #aboutpage #logosub { width: auto; clear: left; position: static; margin: 0 auto; font-size: 4.8em; } #aboutpage #logotag { display: block; } #logotaglinespan { color: #f6c415; } /* NAVIGATION */ #navwrap { clear: both; min-width: 960px; height: 57px; background: transparent url("../images/navbg.png") repeat-x;} ul#nav { width: 960px; margin: 0 auto; } ul#nav li { display: block; float: left; width: 143px; margin: 0px 0 40px 55px;} ul#nav li a { font: italic 1.8em Georgia, 'Nimbus Roman No9 L', serif; color: #fff; padding: 13px 0 0 0px; text-align: center; text-shadow: 1px 1px 2px #000; position: relative; z-index: 1; width: 143px; height: 37px; display: block;} ul#nav li a:hover { color: #f6c415; } ul#nav li#about { padding-left: 52px; } ul#nav2 li { display: block; float: left; height: 24px; width: 50px; margin: 10px 0 20px 150px; } ul#nav2 li a { font: italic 1.3em Georgia, 'Nimbus Roman No9 L', serif; color: #fff; height: 24px; display: block; text-align: center; padding: 10px 0; } #otherpage { overflow-y: scroll; } /* shows the vert scrollbar in FF, Safari, Opera to correct for otherpage nav bar shifting left vs regular pages */ ul#nav2 li a:hover { color: #f6c415; } #nav li.navactive { background: transparent url("../images/navactive.png") no-repeat; position: relative; margin: 0 0 -36px 0; top: 7px; width: 143px; height: 36px;} #otherpage #nav .navactive { display: none; } #aboutpage #nav li#about a { color: #f6c415; } #servicespage #nav li#services a { color: #f6c415; } #testimonialspage #nav li#testimonials a { color: #f6c415; } #contactuspage #nav li#contactus a { color: #f6c415; } #aboutpage .navactive { left: 107px; } #servicespage .navactive { left: 306px; } #testimonialspage .navactive { left: 503px; } #contactuspage .navactive { left: 701px; } /* FOOTER */ #footerwrap { background: #793c12 url("../images/bg.jpg"); /*width: 100%;*/ height: 99px; clear: both; color: #FFF; border-top: 1px solid #000; position: relative; margin-top: -100px; /* negative value of footer height */ } #footer { width: 960px; margin: 0 auto; background: transparent url("../images/footer.png") no-repeat center top; } #footertext { font-style: italic; font-size: 1.3em; clear: left; text-align: center; margin: 0px auto 10px auto; width: 235px; text-shadow: none; } /* ABOUT PAGE */ .floatleft { float: left; } .clearfloatleft { clear: left; float: left; } .articlepics { width: 150px; font-size: 1.1em; float: left;} .textirific { width: 550px; } .articletext { width: 448px; margin: 30px 0 0 0; float: left; } #aboutpage .articletext { float: none; } .articletext hr { width: 87%; margin: 0 auto; } .colorgroup3 { color: #008000; } /* ABOUT PAGE SLIDER */ #slidercontentnavwrap { margin: 0 auto 15px auto; width: 500px; height: 38px; } #slidercontentnav { margin: 0; width: 479px; height: 38px; float: left;} #slidercontentnav li { width: 119px; height: 38px; float: left; display: block; margin: 0; padding: 0; border-right: 1px groove #111; background: transparent url('../images/whitebuttonbg.png'); } #slidercontentnav a { height: 38px; display: block; padding: 10px 0; font-size: 1.6em; color: #2e4aff; text-shadow: 1px 1px 0px #ffffff; } #slidercontentnav a:hover { color: #4d8bc9; } #slidercontentnav #lastbutton { border-right: none; } .leftbutton { background: transparent url('../images/whitebuttonleft.png') top left no-repeat; height: 38px; width: 9px; float: left; } .rightbutton { background: transparent url('../images/whitebuttonright.png') top right no-repeat; height: 38px; width: 9px; float: left; } #contentslidermain { position: relative; border: 1px solid #777777; background: #fefefe; width: 700px; height: 366px; margin: 0 auto; overflow: hidden; } #nocontentsliderscrolling { position: relative; width: 9999px; } /* stops the div from showing hidden overflow content if using scrollwheel on mouse */ /* begin ugly opera hack currently commented out @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { #contentsliderwrap { height: 386px; overflow: scroll; overflow-y: hidden; } This wrapper allows this to work in Opera } end ugly opera hack */ .bottomwideshadow { width: 685px; height: 10px; background: transparent url('../images/wideshadow.png') no-repeat top center; margin: 0 auto; } .slidercontent { position: relative; float: left; display: block; width: 700px; height: 366px; } .slidercontent p { text-shadow: 1px 1px 3px #bbb; } .leftsliderprev { width: 100px; height: 366px; position: absolute; top: 0; left: 0; } .rightslidernext { width: 100px; height: 366px; position: absolute; top: 0; right: 0; } .leftsliderprev:hover { background: transparent url('../images/slidercontentprev.png'); } .rightslidernext:hover { background: transparent url('../images/slidercontentnext.png'); } .textirific p { margin: 0; } #staff1 .articlepics { padding: 68px 0 0 25px; width: 120px; } #staff1 .textirific p { padding: 19px 30px 0 40px; width: 480px; } #certifications .articlepics { padding: 124px 0 0 20px; width: 130px; } #certifications .textirific p { padding: 100px 30px 0 40px; } #mspartner .articlepics { padding: 149px 0 0 20px; width: 130px; } #mspartner .textirific p { padding: 74px 30px 0 40px; } #dellpartner .articlepics { padding: 90px 0 0 20px; width: 130px; } #dellpartner .textirific p { padding: 113px 30px 0 40px; } #intelpartner .articlepics { padding: 109px 0 0 30px; width: 120px; } #intelpartner .textirific p { padding: 100px 30px 0 30px; } #ontrackpartner .articlepics { padding: 147px 0 0 20px; width: 130px; } #ontrackpartner .textirific p { padding: 80px 30px 0 40px;} #cscaffiliate .articlepics { padding: 161px 0 0 20px; width: 130px; } #cscaffiliate .textirific p { padding: 100px 30px 0 40px; } /* SERVICES PAGE */ .servicesgroup { margin: 0px auto; padding: 0; position: relative; z-index: 0; } .servicesgroup div { margin: 0px 10px 20px 10px; padding: 20px 0 20px 0; -moz-box-shadow: 0 0 15px #999; -webkit-box-shadow: 0px 0px 15px #999; box-shadow: 0px 0px 15px #999; } .servicesgroup div:hover { -moz-box-shadow: 0 0 30px #555; -webkit-box-shadow: 0px 0px 30px #555; box-shadow: 0px 0px 30px #555; } .servicesgroup div div { margin: 0; padding: 0; } .servicesgroup div h2 { margin: 0; color: #fff;} .colorgroup1 { /*background: #fefefe;*/ background: #f2bc54; color: #000; border: 1px solid #999; } .colorgroup2 { /*background: #fefefe;*/ background: #9f6900; color: #FFFFFF; border: 1px solid #999; text-shadow: #000 1px 1px 0px;} .articletext .colorgroup1 p { text-shadow: 1px 1px 4px #fff; } .articletext .colorgroup2 p { text-shadow: 1px 1px 4px #000; } .servicesgroup p { padding: 0 30px; margin-bottom: 0;} .colorgroup1 a, .colorgroup2 a { color: #f6c415; } .colorgroup1 a:hover, .colorgroup2 a:hover { color: #ffdf6e; } table { margin: -58px auto 20px auto; padding: 0px; width: 50%; border: 1px solid #333333;} table td { border: 1px solid #333333; } /* SERVICES AND PAY PAGE */ form input#paypalsubmit { width: auto; border: none; background-color: transparent; background-image: none;} /* TESTIMONIALS PAGE */ .pullquote { width: 100%; margin: 0 0 80px 0; padding: 0; background: transparent url('../images/quoteleft.png') no-repeat top left; } .pullquote blockquote { width: 96%; margin: 0; padding: 20px; background: transparent url('../images/quoteright.png') no-repeat bottom right; overflow: auto; } /* CONTACT US PAGE */ #dropoffwrap { float: left; width: 300px; margin: 0 auto; } #hourswrap { float: left; width: 325px; margin: 0 auto 0 10px; } #addresswrap { float: left; width: 260px; margin: 0 auto; } #mapcontactwrap { clear: left; width: 896px; margin: 250px auto 0 auto; } #mapwrap { float: left; width: 325px; } #servwrap { clear: left; float: left; width: 896px; } #formwrap { clear: none; float: left; width: 550px; margin: 0px 0 0 20px; } #mappic { width: 300px; height: 300px; border: 1px solid #777;} #mapwrap p a { font-size: 0.67em; } form#contactform { width: 535px; height: 676px; overflow: visible; margin: 0 auto; } fieldset { border: none; } form label { width: 530px; float:left; border: none; } form label.error { position: absolute; top: 7px; left: 107px; border: none; } form input { width: 530px; } form textarea { width: 530px; height: 254px; overflow: auto; } .formsubmitwrap { width: 180px; height: 28px; padding: 15px; margin: -10px 0 0 auto; position: relative; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } form input.submitbutton { width: 180px; margin: -2px 0 0 0; border: none; background: transparent url("../images/formsubmit.png"); height: 35px; } form input.submitbutton:hover { background: transparent url("../images/formsubmithover.png"); } .contactfocus { background: #f2ca7b; } .contacthover { background: #f2dbaf; } .formfieldwrap { width: 535px; padding: 5px 15px 15px 15px; margin: 0 0 0 -15px; position: relative; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }