/* www.ambientage.com/styles/style.css @author: David Kelly (www.davidkelly.ie) @copyright: Ambient Age, 2009 (www.ambientage.com) @createdDate 5 Jan 09 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus {outline: 0;} /* ===================================== Generic Elements --------------------------------------- */ body{background: #fff; font-family: arial, helvetica, sans-serif; color: #555; font-size: 0.9em;} h1{font-family: arial, helvetica, sans-serif; font-size: 2em; margin: 0.5em 0 1em 0;} h2{font-family: arial, helvetica, sans-serif; font-size: 1.6em; color: #526363; border-bottom: 2px solid #f60; margin-bottom: 1em; padding-bottom: 10px;} h3{font-family: arial, helvetica, sans-serif; font-size: 1.3em; margin: 1em 0;} h4{font-family: arial, helvetica, sans-serif; font-size: 1em; margin-bottom: 1.4em;} h5{color: #fff; border-bottom: 2px solid #666; font-size: 1.3em; margin: 1em 0px; padding-bottom: 5px;} a:link{color: #526363; text-decoration: underline; border-bottom: none;} a:visited{color: #526363; text-decoration: underline; border-bottom: none;} a:hover{text-decoration: none; border-bottom: 1pt solid #f60;} a:active{text-decoration: none; border-bottom: 1pt solid #f60;} p{line-height: 1.75em; font-size: 0.9em; margin-bottom: 1.5em;} blockquote{ margin-left: 2em; font-family: 'Palatino Linotype', 'Book Antiqua', 'Palatino', serif;} img{border: 0px; border-bottom: none !important ;} strong{} address{font-size: .9em; margin: 0px 0px 1em 1em; line-height: 1.5em;} sup{font-size: .8em; } ul{font-size: 0.9em; margin: 1em 3em;} ul li{margin-bottom: 1.15em; line-height: 1.5em;} ol{font-size: 0.9em; margin: 1em 3em;} ol li{margin-bottom: 1.15em; line-height: 1.5em;} dl{ margin-left: 1em; clear: both; float: left; font-size: .9em; line-height: 1.5em;} dt{float: left; display: inline; clear: left;} dd{float: left; display: inline; clear: right; margin-left: 5px;} /*====================================== Generic Classes --------------------------------------- */ .serif{font-family: 'Palatino Linotype', 'Book Antiqua', 'Palatino', serif;} .light{color: #fff;} .indent{margin-left: 40px;} .left{float: left;} .right{float: right;} .t-right{text-align: right;} .no-hover:hover{border-bottom: 0px;} /* remove border from linked images on :hover */ .no-hover:active{border-bottom: 0px;} /* remove border from linked images on :hover */ .button{margin-top: 1em; clear: both; float: left;} span.error{float: left; display: block; clear: both; width: 90%;} /* ======================================= Generic Page structures ------------------------------------------ */ #wrapper{width: 975px; margin: 0px auto 0px auto; clear: both;} #header{ float: left; clear: both; width: 100%;} #header #logo{float: right; margin-right: 2em;} #access{position: absolute; top: 5px; right: 10px; color: #ccc; font-size: .8em; width: 100px; height: 30px;} #access a {color: #ccc; font-size: .9em;} #home-container{margin: 15px 0px 2em 0px; float: left; clear: both;width: 100%;} #home-content{} #container{margin: 25px 0px 2em 0px; float: left; clear: both;width: 95%; min-height: 650px;} #content{ width: 66%; float: left; margin-top: 0em} /* Sidebars */ #static-sidebar, #blog-sidebar{float: right; width: 300px; margin-top: 3em;} div.static-side-item{ padding-bottom: 2em; float: right; width: 200px;} h4.static-side-title{font-size: 24px; color: #999; margin-bottom: 1em; border-bottom: 1pt solid #f60;} #static-side-blog-list{margin-left: 1em; margin-right: 0} #static-side-blog-list li{list-style-type: none; margin-bottom: 1em;font-size: .9em; width: 100%; margin-right: 0} #static-side-blog-list li a{text-decoration: none;} /* Footers */ #footer{width: 100%; background: #333 url('../images/footer.jpg') repeat-x; min-height: 350px; clear: both;} #footer-content{width: 975px; margin: 0px auto; font-size: .9em; color: #fff;} #footer-contact, #footer-legal, #footer-about{width: 420px; } #footer-contact div{float: left; clear: both; width: 95%} #footer-contact dl{width: 100%; display: block; float: left;} #footer-contact dl dt{width: 50px; display: block; float: left; clear: left;} #footer-contact dl dd{width: 180px; display: block; float: left; margin-left: 10px; clear: right;} #footer-contact-form{display: none;} #footer-contact-form div{margin-bottom: 1em;} #footer-contact-form div label{float: left; width: 80px;margin-right: 2em;} #footer-contact-form div input, #footer-contact-form div textarea{float: left; width: 300px} #footer-legal ul#footer-legal-nav li{display: inline; list-style-type: none; margin-left: 5px; color: #ccc;} #footer-legal-reg{margin: 1em 0px 0px 40px; font-size: .9em; color: #ccc;} #footer a:link{color: #FFF; text-decoration: underline; border-bottom: none;} #footer a:visited{color: #fff; text-decoration: underline; border-bottom: none;} #footer a:hover{text-decoration: none; border-bottom: 1pt solid #f60;} #footer a:active{text-decoration: none; border-bottom: 1pt solid #f60;} /* ============================================= Specific Page Structures *********************************************** */ /*---------------------------------------------- Navigation -----------------------------------------------*/ #nav-main{} #nav-main ul.home{text-align: center; margin: 3.5em 3em 0px 0px;} #nav-main ul.home li{display: inline; list-style-type: none; margin-left: 1.6em; margin-right: 0px;} #nav-main ul.home li a:link{color: #ccc; text-decoration: none; border-bottom: none; font-weight: 500; font-size: 1.5em; color: #fff; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; letter-spacing: 0px;} #nav-main ul.home li a:visited{color: #ccc; text-decoration: none; border-bottom: none; font-weight: 500; font-size: 1.5em; color: #fff; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; letter-spacing: 0px;} #nav-main ul.home li a:hover{color: #ccc; text-decoration: none; border-bottom: none; font-weight: 500; font-size: 1.5em; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; letter-spacing: 0px;} #nav-main ul.home li a:active{color: #ccc; text-decoration: none; border-bottom: none; font-weight: 500; font-size: 1.5em; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; letter-spacing: 0px;} #nav-main ul {text-align: left; margin: 3em 3em 0px 0px;} #nav-main ul li{display: inline; list-style-type: none; margin-right: 1.5em;} #nav-main ul li a:link{color: #ccc; text-decoration: none; border-bottom: none; font-weight: 500; font-size: 1.5em; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; letter-spacing: 0px;} #nav-main ul li a:visited{color: #ccc; text-decoration: none; border-bottom: none; font-weight: 500; font-size: 1.5em; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; letter-spacing: 0px;} #nav-main ul li a:hover{color: #666; text-decoration: none; border-bottom: none; font-weight: 500; font-size: 1.5em; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; letter-spacing: 0px;} #nav-main ul li a:active{color: #666; text-decoration: none; border-bottom: none; font-weight: 500; font-size: 1.5em; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; letter-spacing: 0px;} /*---------------------------------------------- Homepage ----------------------------------------------- */ div#home-panel{width: 974px; height: 300px; background-color: #333; clear: both;} #home-panel-left{float: left; width: 487px; height: 300px; background: #333 url('../images/home_panel_left.jpg') top no-repeat;} #home-panel-left h3{margin: 2em 0px 1em 2em;} #home-panel-left ul#home-listing{margin: 0px 3em 1em 4em;} #home-panel-left ul#home-listing li{margin-bottom: 1.8em; list-style-type: none; color: #fff; font-size: 0.9em;} #home-panel-right{float: left; width: 487px; height: 300px; background: #333 url('../images/home_panel_right.jpg') top no-repeat;} h3.home-pitch-q{color: #fff; font-size: 24px; font-style: italic; margin: 1em; } h2#home-pitch{color: #fff; font-size: 17px; font-weight: 300; letter-spacing: 0px; text-align: center; margin-top: 4em; border: 0px;} #home-blog{width: 440px; float: left; margin-top: 2em;} .home-blog-post{width: 200px; height: 175px; overflow: hidden; float: left; margin-bottom: 7em;} .home-blog-post p{font-size: .8em; line-height: 1.5em;} .home-post-single{clear: both; padding: 10px 0; width: 100%; float: left;} .home-post-single h4{font-size: 1.25em;} .home-post-single h4 a:link, .home-post-single h4 a:visited{text-decoration: none;} .home-blog-thumb{float: left; width: 75px; height: 75px;} .home-blog-excerpt-text{float: right; width: 320px;} #home-clients, #home-apps{width: 440px; float: right; margin-top: 2em;} div.home-thumb-holder{float: left;} /* ================================================== /blog/ --------------------------------------------------- */ .post{width: 100%; float: left; clear: both; margin-bottom: 2em;} h2.entry-title a:link{text-decoration: none; border-bottom: none;} h2.entry-title a:visited{text-decoration: none; border-bottom: none;} h2.entry-title a:hover{color: #ccc; text-decoration: none; border-bottom: none;} h2.entry-title a:active{color: #ccc; text-decoration: none; border-bottom: none;} a.more-link:link{display: block; background: #fefefe; width: 100%; margin: 1em auto; clear: both; float: left; padding: 5px 10px} a.more-link:visited{display: block; background: #fefefe; width: 100%; margin: 1em auto; clear: both; float: left; padding: 5px 10px} a.more-link:hover{display: block; background: #eee; width: 100%; margin: 1em auto; clear: both; float: left; border-bottom: none; padding: 5px 10px} a.more-link:active{display: block; background: #eee; width: 100%; margin: 1em auto; clear: both; float: left; border-bottom: none; padding: 5px 10px} .entry-date{width: 48%; float: left; margin-top: 0em; font-size: .8em; color: #999} .entry-meta{width: 48%; float: right; margin-top: 0em; text-align: right; font-size: .8em; color: #999} .entry-content{ float: left; clear: both; margin: 1em 0 1em 1em; width: 100%} .single-entry-meta{font-size: .8em; color: #999; margin: 1em; width: 90%; clear: both; line-height: 1.8em; border: 1pt solid #eee; padding: 10px 20px;} div.nav-below{width: 100%; float: left; clear: both; margin: 1em 0;} .nav-previous{width: 45%; float: left; text-align: left;} .nav-next{width: 45%; float: right; text-align: right;} #comments{width: 100%; float: left; clear: both;} .indiv-comment{border-bottom: 1pt solid #eee; margin-bottom: 1em; padding-bottom: 1em;} .comment-meta{margin-bottom: 1em;} .formcontainer textarea{width: 100%;} .formcontainer div.c-input-field{width: 190px; float: left; margin: 1em 0 1em 1.5em;} .formcontainer div.first{margin-left: 0} .formcontainer div.last{float: right; margin-left: 1em} div.c-input-field input{width: 100%;} div.sociable{float: left; clear: both;} /*================================================ /portfolio/ ------------------------------------------------ */ .work_item {clear: both; float: left; font-size: .9em; background-color: #fefefe; border: 1pt solid #ddd; padding: 10px; width: 97%; line-height: 1.6em; margin-bottom: 15px; } /* .work_item img{ margin: 10px 20px 10px 25px;} */ .work_item img{ margin: 10px 6em;} .work_item div{ clear: both;} .work_item div.item_holder{ width: 600px;} .work_item .item_label{ text-decoration: underline; margin-right: 10px;display: block; float: left; width: 30%;} .item{display: block; float: left; width: 65%;} /*================================================= /apps/ ------------------------------------------------- */ .app_desc{width: 100%; float: left; clear: both; margin: 2em 1em; padding-bottom: 1.5em; border-bottom: 1px solid #eee;} .app_desc img{float: left; margin-right: 2em;} /*======================================================= /contact/ ------------------------------------------------------- */ div.contact-details{float: left; width: 45%; margin-right: 2em;} #form_holder{float: left; clear: both;} #form_holder div.form-left{float: left; width: 300px;} #form_holder div.form-right{float: right; width: 300px;} #form_holder div input{ width: 300px; float: left; clear: both;} #form_holder div textarea{width: 620px; float: left; clear: both;} #form_holder div label{float: left; clear: both; margin: 1em 0 0 0;} #contact-location{width: 620px; float: left; clear: both; margin: 20px 0;} #contact-map{width: 300px; float: left;} #contact-map small{font-size: 0.9em;} #contact-map a:link{color: #526363; text-decoration: underline; border-bottom: none;} #contact-map a:visited{color: #526363; text-decoration: underline; border-bottom: none;} #contact-map a:hover{text-decoration: none; border-bottom: 1pt solid #f60;} #contact-map a:active{text-decoration: none; border-bottom: 1pt solid #f60;} #contact-office-pic{float: right; width: 300px;} /** * ============================ * About * ---------------------------- */ div#social-contact{width: 180px; float: right; display: inline-block; border: 1px solid #ccc; background: #fefeee; padding: 20px 0 10px 0;} #social-contact{-moz-border-radius: 3px; -webkit-border-radius: 3px;} #social-contact ul {margin: 0 0 0 5px;} #social-contact ul li{margin: 0 0 10px 15px; list-style-type: none; margin: } #social-contact ul li a{text-decoration: none;} li.twitter{background: url('/images/icon_twitter_16.png') no-repeat center left; padding-left: 20px;} li.linkedin{background: url('/images/icon_linkedin_16.png') no-repeat center left;padding-left: 20px; }