/* ~-~-~~-~-~ CSS Document -~-~-~-~-~ *\ | | | Created for | | WebsitesinaFlash.com | | by Ashton Sanders | | | \* ~-~-~~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */ /* ~-~-~~-~-~-~-~-~-~-~-~-~-~-~-~ GENERAL FORMATTING -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */ /* ~-~-~~-~-~~-~-~~-~-~ MULTI USE FORMATING ~-~-~~-~-~-~-~-~-~-~ */ .fourth {width:21%; padding:0 2%} .third {width:29%; padding:0 2%} .third.left {text-align:center;} .left { float:left} .right { float:right} .aleft { text-align:left} .aright { text-align:right !important} img.center { margin:0 auto; } .center {text-align:center} .clear {clear:both;} .eclear {clear:both; font-size:1px;} /* ~-~-~~-~-~~-~-~~-~-~ TEXT ~-~-~~-~-~-~-~-~-~-~ */ h1 { color: #FFF;} h1, h2 { margin:0 0 10px; font-weight:100;} h3 { color:#1D3D4E; font-weight:100;} p, ul, ol, blockquote { font-size:14px; } blockquote {margin:4px 12px; padding: 8px 25px 8px 50px; border: solid #034E65; border-width: 1px 0; background: url('../images/icons/quote.jpg') no-repeat top left} #pagecontent blockquote.zip {margin:12px 70px; padding: 20px 15px 20px 100px; border: solid #98C1D8; border-width: 1px; background: url('../images/icons/zip.jpg') no-repeat left center} blockquote.zip a { font-weight:900; } .white h2, .white p, .white blockquote, .white ul , .white ol { color:#1D3D4E !important; font-weight:100; } .white h2, #rnav h3 { border-bottom: 1px solid #1D3D4E; margin: 0 0 10px; font-weight:100;} a { color:#04637F; text-decoration:none } a:hover { color:#04637F; text-decoration:underline } a:hover img {text-decoration:none !important;} .input { width: 350px;} /* ~-~-~~-~-~-~-~-~-~-~-~-~-~-~-~ PAGE LAYOUT -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */ html, body {margin:0;padding:0; text-align:center; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif} .container { width:1000px; margin:0 auto; text-align:left; position:relative; clear:both} /* ~-~-~~-~-~~-~-~~-~-~ HEADER ~-~-~~-~-~-~-~-~-~-~ */ #header { background: url('http://www.websitesinaflash.com/images/layout/hdr-rp.jpg') #FFF bottom left repeat-x; height: 115px; width:100%; } #header .container { height:115px;} #header #logo { position: absolute; bottom:12px;} /* ~-~-~~-~-~ NAVIGATION BAR ~-~-~-~-~ */ ul#navbar { position: absolute; right:0; bottom:0; margin:0; padding:0 2px 0 0; background: url('http://www.websitesinaflash.com/images/layout/nav-divider.jpg') bottom right no-repeat; } ul#navbar li { display:block; float:right; padding-left:2px; background: url('http://www.websitesinaflash.com/images/layout/nav-divider.jpg') bottom left no-repeat; } ul#navbar li a { display:block; padding:23px 23px; text-decoration:none; font-size: 20px; color: #024558; background: url('http://www.websitesinaflash.com/images/layout/nav-hover.jpg') repeat-x; background-position: 0 -80px; } ul#navbar li a:hover, ul#navbar li a.selected{ background-position: bottom left;} /* ~-~-~~-~-~~-~-~~-~-~ BLUE ~-~-~~-~-~-~-~-~-~-~ */ #blue { background: url('http://www.websitesinaflash.com/images/layout/blue-top.jpg') #04637F top left repeat-x;} #blue2 { background: url('http://www.websitesinaflash.com/images/layout/blue-btm.jpg') bottom left repeat-x;} #blue h1 { padding: 20px 0; margin:0; font-size:32px; background: url('http://www.websitesinaflash.com/images/layout/h1-sparkler-3.jpg') no-repeat top right; } #blue h1 a { color:#FFFFFF ;} #blue #searchbox { float:right; color:#FFFFFF ; width: 265px; margin-top:40px; } /* ~-~-~~-~-~~-~-~~-~-~ BROWN ~-~-~~-~-~-~-~-~-~-~ */ /* ~-~~~-~-~ Old color: A7A37E~-~-~~-~-~-~-~-~-~-~ */ .brown {} .brownsmall {padding: 10px 0 16px; background:url('http://www.websitesinaflash.com/images/layout/gold-s.jpg') bottom repeat-x #E4CC6A;} .brownsmall .container p {color:#8C772D; margin:0 30px 2px 0px; font-size:16px;} /* ~-~-~~-~-~~-~-~~-~-~ WHITE ~-~-~~-~-~-~-~-~-~-~ */ .white { padding:15px 0 30px;} .white .third { background: url('http://www.websitesinaflash.com/images/layout/vline.gif') 0 10px no-repeat;} .white .third:first-child { background: none; margin-left:10px;} .white .third p { font-size:14px} .white .third p, .white .third h3{ margin: 0 30px 10px; text-align:left} .white p{ margin: 0 10px 10px; text-align:left} #websitedisplay div.left { width:220px; margin: 0 14px;} /*#pagecontent img, #rightnav img { border: 5px solid #A7A37E}*/ /* ~-~-~~-~-~~ Right NAV SIDEBAR ~-~-~-~-~ */ #rnav { background: url('http://www.websitesinaflash.com/images/layout/rnav-rp.jpg') 0 67px repeat-y #034659; width: 300px; max-width:300px; float:right; position:relative; top: -21px; } #rnav_top {background: url('http://www.websitesinaflash.com/images/layout/rnav-top.jpg') left top no-repeat; width: 300px; max-width:300px;} #rnav_btm {background: url('http://www.websitesinaflash.com/images/layout/rnav-btm.jpg') left bottom no-repeat; width: 230px; max-width:300px; padding: 1px 35px 70px;} #rnav h3, #rnav h4, #rnav p, #rnav li, #rnav a {color:#FFFFFF !important} #rnav p { margin-left:3px ;} #rnav a { text-decoration:underline;} #rnav h3 { border: 0; padding: 10px 0 ; margin:20px 0 0; } #rnav h4 { padding:0; margin:0 0 10px;} #rnav ul {margin: 0; padding:0} #rnav li { list-style: none; background: url('http://www.websitesinaflash.com/images/layout/rnav-li.jpg') 0 8px no-repeat ; padding-left:15px; margin: 0 0 10px; font-size:15px; } #rnav li li{ font-size:12px; margin: 7px 0 0; background-position:0 5px; } #rnav .adbox { margin: 0 -30px 0 -15px;} #rnav .adbox img { float:left; margin: 0 10px 10px 0 } /* ~-~-~~-~-~~ WHITE PAGE STYLING ~-~-~-~-~ */ #pagecontent { width:670px; float:left; } .blueborder { border: 5px solid #034E65;} blockquote p.right { margin-top: -15px;} textarea#comment { width: 650px; } div#website_gallery h3 { display:block; color:#FFFFFF; background: url('http://www.websitesinaflash.com/images/layout/blue-top.jpg') #04637F top left repeat-x !important; padding: 5px; width: 100%; height:25px; font-size: 18px } div#website_gallery img { float:right; margin:0 0 0 25px; border: 5px solid #034E65; margin-top:-40px; } /* Website Services Page */ .single_website_s { float:left; width:488px; margin:0; } .single_website_s p.right {clear:right; padding-top:8px;} /* ~-~-~~-~-~~-~-~~-~-~ FOOTER ~-~-~~-~-~-~-~-~-~-~ */ #footer { background: url('http://www.websitesinaflash.com/images/layout/footer-rp.jpg') #034D62 top left repeat-x; padding-top:30px;} #footer * {color:#FFFFFF; text-align:left;} #footer .left {min-width: 10%; max-width:30%; margin-left:30px;} #footer .left:first-child {margin-left:0px;} #footer #twitter_div {width:230px; line-height:15px;} #footer h3 { font-size:14px; margin-bottom:10px; font-weight:900} #footer ul { margin:0; padding-left:10px; list-style:none} #footer li, #footer p, #footer span { font-size:12px; margin:0;} #footer #copyright { float: right; font-size:12px; width: 350px} a.more-link { display:block; margin:15px 5px 20px; font-weight:900}