/* -------------------------------------------------------------- ----------------------------------------------------------------- AUTHOR: Tony Espinosa VERSION: 1.3.2010 CONTENTS: 1 Elements 2 Essentials 3 Head 4 Head Nav 5 Content 6 Folio Slide 7 Foot 8 Form ----------------------------------------------------------------- -------------------------------------------------------------- */ /* 1) Elements */ html { background-color: #032028 } body { font-size: 1em; background-color: #abcee2; background-image: url(../images/layout/pageBkgd.jpg); background-repeat: repeat-x; background-position: left 0; margin: 0; } p { } td { } a { outline-style: none; } a:link, a:visited, a:active { color: #0d5309; outline-style: none; } a:hover { color: #51676b; } /* Fix 'Hidden Input' elements in FireFox */ input[type="hidden"] { position: absolute; top: -9999px; visibility: hidden; margin: 0; padding: 0; display:none; } input[type="image"] { margin: 0; padding: 0; border: 0; } /* 2) Essentials */ #bodyTxt { color: white; font-size: 1em; font-family: "times new roman", times; line-height: 1.2em; text-decoration: none; } .wrap { text-align: center; width: 100%; clear: both; display: block; } /* 3) Head */ #headBkgd { background-image: url(../images/layout/headBkgd.jpg); background-repeat: repeat-x; background-position: center 0; } .headGfx { background-image: url(../images/layout/headGfx.jpg); background-repeat: no-repeat; background-position: center 0; width: 900px; height: 125px; clear: both; margin-right: auto; margin-left: auto; display: block; } #headLogo { background-image: url(../images/layout/headLogo.jpg); background-repeat: no-repeat; position: absolute; width: 193px; height: 90px; float: left; display: block; } #headLogo a { text-indent: -9999px; width: 193px; height: 90px; display: block; } #headLinks { width: 900px; } #headLinks a { text-indent: -9999px; width: 27px; height: 27px; float: right; margin: 0; padding: 0; display: block; } .twitterLink { background-image: url(../images/headlinks/twitter.jpg); background-repeat: no-repeat; width: 27px; height: 27px; float: right; margin-top: 10px; margin-bottom: 15px; display: block; } .linkedinLink { background-image: url(../images/headlinks/linkedin.jpg); background-repeat: no-repeat; width: 27px; height: 27px; float: right; margin-top: 10px; margin-right: 10px; margin-bottom: 15px; display: block; } .payLink { background-image: url(../images/headlinks/payment.jpg); background-repeat: no-repeat; width: 27px; height: 27px; float: right; margin-top: 10px; margin-right: 10px; margin-bottom: 15px; display: block; } /* 4) Head Nav */ ul#nav { font-size: 0.8em; font-family: arial; font-weight: bold; margin: 0; } ul#nav li { list-style-type:none; float:right; margin:10px 8px 0 } ul#nav li:first-child {list-style-type:none;float:right;margin:10px 0 0 8px} ul#nav li a, ul#nav li a:link, ul#nav li a:visited { color: #d8ecb7; text-decoration: none; height: 30px; display:block; outline:none medium; } ul#nav li a:hover { color: #fff72c; text-decoration: none; } ul#nav li a:active { color: white; background-color: transparent; background-image: url(../images/layout/menuMarker.gif); background-repeat: no-repeat; background-position: center bottom; text-decoration: none;} body#pageHome li#navHome a { color: white; background-color: transparent; background-image: url(../images/layout/menuMarker.gif); background-repeat: no-repeat; background-position: center bottom; text-decoration: none;} body#pageAbout li#navAbout a { color: white; background-color: transparent; background-image: url(../images/layout/menuMarker.gif); background-repeat: no-repeat; background-position: center bottom; text-decoration: none;} body#pageContact li#navContact a { color: white; background-color: transparent; background-image: url(../images/layout/menuMarker.gif); background-repeat: no-repeat; background-position: center bottom; text-decoration: none;} body#pageServices li#navServices a { color: white; background-color: transparent; background-image: url(../images/layout/menuMarker.gif); background-repeat: no-repeat; background-position: center bottom; text-decoration: none;} /* 5) Content */ #pageBkgd { background-image: url(../images/layout/pageGfx.jpg); background-repeat: no-repeat; background-position: center 0; clear: both; display: table; } #pageTitle { color: #d2eeff; font-size: 1.4em; font-family: "times new roman", times; line-height: 1.1em; text-decoration: none; text-align: left; text-indent: 20px; width: 900px; margin-right: auto; margin-bottom: 25px; margin-left: auto; } #pageTitle h1 { color: white; font-size: 1.1em; text-decoration: none; letter-spacing: -0.1em; margin: 0; display: inline; } #pageContent { font-family: "times new roman", times; display: block; margin-right: auto; margin-left: auto; width: 900px; height: auto; clear: both; } .leftContent { font-size: 1em; text-align: left; width: 585px; float: left; margin: 0 0 50px; } .leftContent p { color: #354346; font-size: 0.9em; font-family: arial, verdana, helvetica; line-height: 1.4em; text-decoration: none; margin: 0 0 25px; } .leftContent pre { background-color: #daedd1; width: auto; height: auto; margin: 0 0 25px; padding: 10px; border: solid 1px white; } .leftContent p img { float: left; margin: 15px 15px 15px 0; } .leftContent p img:first-child { float: left; margin: 0 15px 15px 0; } .leftContent strong { color: #032028; font-size: 1.5em; font-family: "times new roman", times; line-height: 1.2em; text-decoration: none; letter-spacing: -0.1em; display: block; } .leftContent ul { color: white; margin: 0; } .leftContent li { font-size: 1em; line-height: 1.8em; text-decoration: none; } .rightContent { color: #354346; font-size: 1em; line-height: 1em; text-align: left; width: 280px; float: right; margin: 0 0 50px; } .vCardTop { background-image: url(../images/layout/blueBoxTop.png); background-repeat: no-repeat; background-position: center 0; width: 280px; height: 15px; clear: both; margin-right: auto; margin-left: auto; display: block; } .vCard { color: #053b4a; background-image: url(../images/layout/blueBoxMid.png); text-align: center; width: 280px; clear: both; margin: 0 auto; display: block; } .vCard a:link, .vCard a:active, .vCard a:visited, .vCard a:hover { color: white; text-decoration: none; } .vCardBot { background-image: url(../images/layout/blueBoxBot.png); background-repeat: no-repeat; background-position: center 0; width: 280px; height: 15px; clear: both; margin-right: auto; margin-bottom: 25px; margin-left: auto; display: block; } .appBoxTop { background-image: url(../images/layout/rightColBkgdTop.png); background-repeat: no-repeat; background-position: center 0; width: 280px; height: 15px; clear: both; margin-right: auto; margin-left: auto; display: block; } .appBoxBot { background-image: url(../images/layout/rightColBkgdBot.png); background-repeat: no-repeat; background-position: center 0; width: 280px; height: 15px; clear: both; margin-right: auto; margin-bottom: 25px; margin-left: auto; display: block; } .appBox { color: #053b4a; background-image: url(../images/layout/rightColBkgd.png); text-align: center; width: 280px; clear: both; margin: 0 auto; display: block; } .appBox strong { color: white; font-size: 1.5em; font-weight: bold; line-height: 1.5em; display: block; } .appBox p { font-size: 0.8em; line-height: 0.8em; text-decoration: none; text-align: left; text-indent: 25px; vertical-align: middle; width: 250px; margin: 10px auto 0; display: table; } .appBox p:first-child { font-family: arial, verdana, helvetica; background-image: url(../images/icons/appbox.png); background-repeat: no-repeat; text-decoration: none; text-align: left; text-indent: 90px; vertical-align: middle; width: 250px; height: 60px; margin: 0 auto; padding: 0 0 5px; border-bottom: 1px solid #c2c0ac; display: table; } .appBox img { float: left; } .appBox b { color: #c1e9ff; font-size: 1.4em; font-family: arial, verdana, helvetica; font-weight: bold; line-height: 1.5em; display: block; } .toolBoxTop { background-image: url(../images/layout/toolBoxTop.png); background-repeat: no-repeat; background-position: center 0; width: 280px; height: 15px; clear: both; margin-right: auto; margin-left: auto; display: block; } .toolBoxBot { background-image: url(../images/layout/toolBoxBot.png); background-repeat: no-repeat; background-position: center 0; width: 280px; height: 15px; clear: both; margin-right: auto; margin-bottom: 25px; margin-left: auto; display: block; } .toolBox { color: #053b4a; background-image: url(../images/layout/toolBoxMid.png); text-align: center; width: 280px; clear: both; margin: 0 auto; display: block; } /* 6) Folio Slide */ #stage { width:850px; overflow:hidden; height:auto; margin-right: auto; margin-bottom: 25px; margin-left: auto; display: block; } #slideButtons { text-align:center; width:900px; margin-right: auto; margin-left: auto; } #slideButtons a { text-decoration: none; border-style: none; border-width: 0; } #slideList {width:4000px; border:0; margin:0; padding:0;} #slideList li{ font-family: arial, verdana, helvetica; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; list-style:none; padding:0; text-align: left; float:left; width:272px; margin-top: 0; margin-right: 17px; margin-left: 0; border-style: none; border-width: 0; } #slideList li a:link, #slideList li a:active, #slideList li a:visited { color: #0d5309; text-decoration: underline; } #slideList li a:hover { color: #ffdf00; } #slideList li img { margin-bottom: 10px; display: block; } #slideList li strong { color: #032028; font-size: 0.9em; line-height: 0.8em; text-decoration: none; margin-right: 16px; margin-bottom: 4px; margin-left: 16px; display: block; } #slideList li em { color: #d2eeff; font-size: 0.7em; line-height: 0.9em; text-decoration: none; margin-right: 16px; margin-bottom: 5px; margin-left: 16px; display: block; } #slideList li p { color: white; font-size: 0.8em; line-height: 1.4em; text-decoration: none; margin: 0 16px; display: block; } /* 7) Foot */ .footwrap { color: #c1e9ff; font-size: 0.8em; line-height: 2em; background-color: #032028; text-decoration: none; text-align: center; width: 100%; clear: both; margin: 0; padding-top: 15px; display: block; } .footwrap a:link, .footwrap a:visited, .footwrap a:active { color: #b8def3; text-decoration: none; } .footwrap a:hover { color: #f4e000; } .foot { color: #c2c0ac; font-family: "times new roman", times; width: 900px; height: auto; margin-right: auto; margin-left: auto; border-top: 1px dotted #053b4a; border-right-width: 0; border-left-width: 0; display: table; } .foot a:link, .foot a:visited, .foot a:active { color: #b8def3; text-decoration: none; } .foot a:hover { color: #f4e000; border-bottom: 1px solid #053b4a; } .foot p { line-height: 1.5em; text-align: left; text-indent: 0; width: 204px; float: left; margin: 0 0 40px; padding: 0 10px; border-left: 1px dotted #053b4a; } .foot img { margin-bottom: 5px; } .foot p strong { color: white; font-size: 1.2em; line-height: 1.5em; text-decoration: none; margin-top: 10px; display: block; } .foot p:first-child { margin: 0; border-style: none; } /* 8) Form */ #contactForm strong { color: white; font-size: 1em; line-height: 1.5em; } #contactForm input, #contactForm textarea, #contactForm select { margin-bottom: 20px; display: block; } #paypalForm strong { color: white; font-size: 1em; line-height: 1.5em; } #paypalForm input, #contactForm textarea, #contactForm select { margin-bottom: 20px; display: block; } form { margin: 0; padding: 0; } label { font-weight: bold; } fieldset { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; } legend { font-weight: bold; font-size:1.2em; } /* Form fields -------------------------------------------------------------- */ input, textarea, select { background-color:transparent; background-image: url(../images/layout/ghost40.png); padding: 5px; border:solid 1px #d2eeff; } input.text, input.title { width: 300px; padding:5px; } input.title { font-size:1.5em; } textarea { width: 390px; height: 250px; padding:5px; } input.checkbox, input.radio { position:relative; top:.25em; } form.inline { line-height:3; } form.inline p { margin-bottom:0; } /* Success, notice and error boxes -------------------------------------------------------------- */ .error, .notice, .success { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; } .error { background: #fbe3e4; color: #8a1f11; border-color: #8a1f11; } .notice { background: #FFF6BF; color: #514721; border-color: #FFD324; } .success { background: #e6efc2; color: #032028; border-color: #c6d880; } .error a { color: #8a1f11; } .notice a { color: #514721; } .success a { color: #264409; }