/********************** * css **********************/ 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,strong,sub,sup,tt,var,b,u,i,center,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-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0} /********************** * Typography ***********************/ @font-face { font-family: Titilium; font-weight: bold; src: url('assets/fonts/html'); } html{ overflow: auto; } body{ background: #eeeeee url(img/png) repeat-x; color: #666666; font-family: "Gill Sans", Verdana, sans-serif; font-size: 13px; line-height: 1.5; } a{ color: #336666; font-weight: bold; text-decoration: none; } a:hover{ color: #333333; text-decoration: underline; } em{ color: #555; font-style: italic; } strong{ font-weight: bold; } small{ font-size: 0.72em; } p{ margin-bottom: 9px; } p+p{ text-indent: 9px; } h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a{ color: #4b8099; font-family: Titilium, "Gill Sans", Calibri, "Trebuchet MS", sans-serif; font-weight: bold; line-height: 1.05; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover{ color: #325666; } h1, h1 a{ font-size: 32px; } h2, h2 a{ font-size: 28px; margin: 14px 0; } h3, h3 a{ font-size: 25px; margin: 13px 0; color: #336666; } h4, h4 a{ font-size: 23px; margin: 12px 0; } h5, h5 a{ font-size: 20px; margin: 11px 0; } h6, h6 a{ font-size: 18px; margin: 10x 0; } blockquote{ background: #edf3d9 url(img/png) no-repeat 10px 10px; border-left: 7px solid #ccd8a0; font-style: italic; padding: 15px; text-indent: 35px; } ul li{ background: url(img/gif) no-repeat 0px 3px; padding: 0 0 9px 20px; } .hidden{ display: none; } .align-right{ float: right; margin: 10px 0px 10px 10px } .align-left{ float: left; margin: 10px 10px 10px 0px } .align-center{ display: block; margin: 10px auto; } /************************ * Layout ***********************/ #wrap{ margin: 0px auto; width: 968px; } .column1{ display: inline; float: left; padding: 0px 30px; overflow: hidden; width: 260px; } .column2{ display: inline; float: left; overflow: hidden; padding: 0px 30px; width: 580px; } .column3{ display: inline; float: left; overflow: hidden; padding: 0px 30px; width: 900px; } .button{ background: #4b8099 url(img/png) repeat-x; border: 1px solid #4b8099; color: #FFF; display: inline-block; line-height: 22px; margin: 3px 0px; padding: 0px 10px; text-transform: uppercase; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-shadow: 0px -1px 0px #4c4e4f; } .button:hover{ background-position: 0px -22px; color: #bbb; text-decoration: none; } red{ background: #de2c2c url(img/png) repeat-x; border-color: #de2c2c; } red:hover{ background-position: 0px -22px; } grey{ background: #666 url(img/png) repeat-x; border-color: #666; } grey:hover{ background-position: 0px -22px; } green{ background: #38a230 url(img/png) repeat-x; border-color: #38a230; } green:hover{ background-position: 0px -22px; } read-more{ color: #336666; font-weight: bold; float: right; } read-more:before{ content: "+"; font-weight: bold; font-size: 13px } #header{ background: url(img/png) no-repeat; padding: 5px 4px 0px 4px; position: relative; margin-top: 15px; z-index: 5; } #logo{ display: block; float: left; padding: 15px 10px 15px 30px; } #header h1{ width: 400px; margin-top: 12px; } #header h1 a:hover{ color: #4a6977; text-decoration: none; } #slogan{ color: #616e33; text-shadow: 1px 1px 0px #ffffff; } #call-to-action{ background: url(img/png) no-repeat top left; color: #FFFFFF; display: block; float: right; font-weight: bold; font-size: 22px; line-height: 38px; height: 41px; position: absolute; right: 30px; text-shadow: 0px -1px 0px #336666; text-align: center; top: 25px; width: 200px; } #call-to-action:hover{ background-position: 0 -41px; text-decoration: none; } .ie6 #call-to-action:hover{ background-position: top left; } #call-to-action span{ background: url(img/png) no-repeat top right; display: block; height: 41px; margin-left: 40px; padding: 0px 10px; cursor: pointer; } #call-to-action:hover span{ background-position: right -41px; } #nav{ background: #616161 url(img/png) repeat-x; border-top: 1px solid #666; border-bottom: 1px solid #ccc; height: 34px; clear: both; } #nav li{ background: none; float: left; padding: 0; margin: 4px 0px 4px 10px; position: relative; } #nav li:hover, #nav hover{ background: #4b8099; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } #nav li a{ color: #FFFFFF; display: block; font-size: 12px; line-height: 24px; padding: 0px 20px; margin: 0px; text-shadow: 0px -1px 0px #474747; } #nav li:hover > a{ color: #EEE; text-decoration: none; text-shadow: 0px 1px 0px #333; } #nav ul{ background: #4b8099; margin: 0; padding: 10px 0; position: absolute; top: 22px; z-index: 10; } #nav ul li{ display: block; float: none; margin: 0px; padding: 5px 0px; width: 170px; position: relative; } #nav ul li:hover{ background: #416f85; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; } #nav ul ul{ position: absolute; left: 170px; top: -10px; } #content{ background: url(img/png) repeat-y; padding: 0px 4px; height: 1%; position: relative; z-index: 1; } #content:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } page-title{ background: #eee url(img/jpg); color:#365868; display: block; font-size: 48px; line-height: 1; padding: 40px 30px 10px 30px; margin: 0 0 30px 0; text-shadow:0 1px 0 #DDDDDD; } /*************** * Homepage **************/ #slider{ background: #eee url('img/jpg') no-repeat; height: 300px; overflow: hidden; position: relative; width: 100%; } #slider li{ background: none; color: #fff; float: left; padding: 0; position: relative; padding: 10px 0px; overflow: visible; width: 100%; } #slider h3{ color: #365868; text-shadow: 0px 1px 0px #ddd; } #slider p{ color: #111; text-shadow: 0px 1px 0px #ddd; } #slider li img{ box-shadow: 0px 1px 3px #333; -moz-box-shadow: 0px 1px 3px #333; -webkit-box-shadow: 0px 1px 3px #333; } #slider-control{ background: #666; background: rgba(0,0,0,0.5); bottom: 10px; display: none; left: 0; height: 20px; margin: 0px 10px; position: absolute; width: 940px; z-index: 999; } #slider-pager{ float: right; margin-right: 30px; } #slider-pager a{ color: #ccc; font-size: 24px; line-height: 18px; padding: 0pc 8px; } #slider-pager a:hover{ text-decoration: none; } #slider-pager activeslide{ color: #FFF; } #cta-bar{ border-bottom: 1px solid #dbdbdb; margin-bottom: 20px; height: 1%; } #cta-bar:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } #cta-bar .column1{ background: url(img/png) repeat-x; border-left: 1px solid #dbdbdb; border-right: 1px solid #ffffff; margin: 0 -1px; padding-top: 10px; padding-bottom: 10px; } #cta-bar .column1:hover{ background: url(img/png) repeat-x; } #cta-bar first{ border-left: 0; margin-left: 0;} #cta-bar last{ border-right: 0; margin-right: 0;} #cta-bar a:hover{ text-decoration: none; } #cta-bar .icon{ float: left; margin-right: 10px; } #cta-bar .title{ color: #4b8099; display: block; font-weight: bold; font-size: 18px; line-height: 1.05; margin-top: 5px; text-shadow: 0px 1px 0px #fff; } #cta-bar .description{ font-weight: normal; line-height: 0.5; } #from-blog{} #from-blog li{ background: none; padding: 0; margin-bottom: 10px; } #from-blog .title{ line-height: 1; margin: 0; } #from-blog .title a{ color: #8A9D45; font-size: 16px; text-shadow: none; } #from-blog .meta{ font-size: 9px; } /********************** * Portfolio *********************/ #portfolio{ } #portfolio .item{ display: inline; float: left; padding: 0px 30px; margin-bottom: 60px; position: relative; width: 250px; } #portfolio .thumb{ border: 1px solid #999; display: block; height: 166px; margin: 0 -1px; width: 250px; } #portfolio .meta{ background: #326780; background: rgba(50, 103,128, 0.9); cursor: default; font-size: 12px; position: absolute; left: 29px; height: 130px; margin: 1px; padding: 10px; top: 0px; width: 240px; } #portfolio .meta dl{ color: #fff; line-height: 24px; overflow: hidden; } #portfolio .meta dt{ color: #66cccc; font-weight: bold; float: left; margin-right: 5px; } #portfolio .item h3{ color: #fff; font-size: 21px; line-height: 21px; margin: 5px 0; } /********************** * Blog *********************/ #blog{ } .blog-post{ float: left; margin-bottom: 30px; } .blog-post .thumb{ background: #ffffff; border: 1px solid #4b8099; display: block; float: right; margin: 0 0 10px 10px; padding: 4px; } excerpt .thumb{ float: left; margin: 5px 10px 10px 0; } .blog-post .meta{ color: #68792c; background: #cfd2a3; display: inline-block; margin-bottom: 10px; padding: 0 5px; text-shadow: 0px 1px 0px #e2e5c5; width: 400px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .blog-post .meta a{ color: #68792c; font-weight: normal; } .blog-post .meta span{ display: block; float: left; padding: 0 18px 0 18px; line-height: 23px; } .blog-post .meta .date{ background: url(img/png) no-repeat left center; } .blog-post .meta .category{ background: url(img/png) no-repeat left center; } .blog-post .meta .comments{ background: url(img/png) no-repeat left center; } excerpt .post-content{ float: left; width: 410px; } .comments{ } .comment{ float: left; overflow: visible; margin: 0 0 30px 0; width: 100%; } .comment .meta{ background: #cfd2a3; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } admin .meta{ background: #4b8099; } .comment .meta span{ color: #5f614c; line-height: 25px; text-shadow: 0 1px 0 #e2e6b3; } admin .meta span{ color: #78cdf5; text-shadow: 0 -1px 0 #2f5161; } .comment .meta .order{ color: #ffffff; font-size: 18px; font-weight: bold; float: left; padding: 0 6px 0 4px; text-shadow: 0px 1px 1px #888a6b; } .comment .meta .gravatar{ background: #ffffff; border: 2px solid #cfd2a3; float: left; padding: 2px; margin: 8px 0 0 0; vertical-align:top; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } admin .meta .gravatar{ border: 2px solid #4b8099; } .comment .meta .author{ font-size: 18px; margin-left: 15px; } .comment .meta .author a{ color: #5f614c; } admin .meta .author a{ color: #ffffff; } .comment .meta .time{ float: right; padding: 0 6px 0 4px; } .comment .content{ padding: 8px; margin: 10px 0 0 120px; } .comment .content blockquote{ background-image: none; border-left: 3px solid #CCD8A0; padding: 9px 9px 1px 9px; text-indent: 0; } /********************** * Comment form *********************/ #commentform p{ text-indent: 0; margin: 0; } #commentform label{ clear: both; display: block; float: left; margin-top: 15px; width: 290px; } #commentform input{ display: block; margin-bottom: 10px; float: left; } #commentform text{ background: url(img/png) no-repeat 0 0; border: 0; height: 17px; margin: 0; padding: 4px; width: 290px } #commentform text:focus{ background-position: 0 -26px; } #commentform textarea{ background: url(img/png) no-repeat; border: 0; height: 138px; padding: 6px; width: 568px; } #commentform #submit{ background: url(img/png) no-repeat; border: 0; color: #b0b0b0; font-size: 15px; font-weight: bold; height: 30px; margin-top: 0px; text-shadow: 0 1px 0 #ffffff; width: 580px; } #commentform span{ float: left; line-height: 24px; } /********************** * Price table *********************/ #prices{ width: 100%; } #prices td{ border-bottom: 1px solid #ddd; color: #8b9e46; font-size: 12px; text-align: center; padding: 10px 0; vertical-align: middle; } #prices th{ border-bottom: 1px solid #ddd; font-size: 15px; font-weight: bolder; padding: 10px 0; text-shadow: 1px 1px 0px #fff; } #prices th .button{ font-size: 13px; float: none; } #prices .labels{ width: 25%; } #prices col{ width: 25%; } #prices em{ background: #eee; } #prices .label{ color: #666; text-align: left; } #prices .subhead td{ border-bottom: 3px solid #ddd; font-weight: bold; } #prices .subhead small{ color: #666; } /********************** * Contact *********************/ #contact{ } #contact-form{ } #contact-form p{ text-indent: 0; } #contact-form label{ clear: both; display: block; float: left; margin-top: 15px; width: 290px; } #contact-form input{ display: block; margin-bottom: 10px; float: left; } #contact-form text{ background: url(img/png) no-repeat 0 0; border: 0; height: 18px; margin: 0; padding: 4px; width: 290px } #contact-form text:focus{ background-position: 0 -26px; } #contact-form textarea{ background: url(img/png) no-repeat; border: 0; display: block; float: left; height: 138px; margin: 0; padding: 6px; width: 568px; overflow: auto; } #submit{ background: url(img/png) no-repeat; border: 0; color: #b0b0b0; display: block; font-size: 15px; font-weight: bold; height: 30px; margin: 0px; text-shadow: 0 1px 0 #ffffff; width: 580px; _margin-top: -20px; } #contact-form error{ background: url(img/png) no-repeat 0px 5px; display: block; font-size: 11px; float: right; line-height: 11px; padding: 3px 0px 3px 25px; width: 250px; } #contact .info{ background: #b9bd70; color: #fff; font-size: 18px; padding: 5px; margin-bottom: 15px; border-radius: 5px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /********************** * Sidebar & widgets *********************/ #sidebar{ border-left: 1px solid #eeeeee; color: #777777; margin-left: -1px; } #sidebar a{ color: #888888; font-weight: normal; } #sidebar a:hover{ color:#8a9d45; } #sidebar li, #footer-widgets li{ background: none; padding: 0; } #sidebar widget { background: none; margin-bottom: 20px; padding: 0; } #sidebar ul{ margin-left: -30px; } #sidebar ul li{ background: url(img/gif) no-repeat 13px center; border-bottom: 1px solid #eeeeee; padding: 10px 0px 10px 30px; } #sidebar ul li:hover{ background:url(img/gif) no-repeat 13px center; } .ie67 #sidebar .widget h2{ margin-left: -15px; } #testemonial-widget blockquote{ background: #fff url(img/png) no-repeat; border: 0; font-style: italic; line-height: 20px; padding: 0; } #testemonial-widget p{ padding: 41px 20px 1px 20px; } #testemonial-widget .by-line{ background: url(img/png) no-repeat; color: #8b9e46; height: 24px; margin-top: -9px; padding: 7px 25px; text-align: right; } .ie6 #testemonial-widget .by-line{ margin-top: 0px; } #comments-widget{ } #comments-widget author{ color:#8b9e46; font-weight: bold; } #comments-widget p{ font-style: italic; padding-left: 8px; } .widget h2, .widget h2 a{ color: #8b9e46; font-family: "Gill Sans", Calibri, "Trebuchet MS", sans-serif; font-size: 18px; text-transform: uppercase; margin: 0 0 10px 0; } .widget h3{ font-size: 18px; margin: 6px 0px; text-shadow: none; } /********************** * Footer **********************/ #footer-widgets{ background: url(img/png) no-repeat 0px 1px; border-top: 1px solid #dddddd; float: left; padding-top: 20px; margin: 25px 0; width: 960px; } #footer-widgets h2{ line-height: 18px; margin-bottom: 0px; } #footer-widgets .description{ display: block; font-size: 11px; margin-bottom: 15px; } #footer-widgets ul li{ background: transparent url(img/gif) no-repeat scroll 3px center; padding: 5px 16px; border-bottom: 1px solid #eeeeee; } #footer-widgets ul li:hover{ background:url(img/gif) no-repeat 3px center; } #newsletter-address{ background: url(img/png) no-repeat left top; border: 0; color: #666666; display: block; float: left; height: 16px; padding: 5px; width: 180px; } #newsletter-submit{ background: url(img/png) no-repeat left top; border: 0; color: #8b9e46; display: block; font-size: 11px; font-weight: bold; float: left; height: 26px; padding: 2px; text-shadow: 0px 1px 0px #ffffff; width: 65px; } #twitter{ position: relative; } #twitter ul li{ background: none; border: 0; padding: 5px 0; } #twitter ul li:hover{ background: none; } #twitt-bubble{ background: url(img/png) no-repeat; font-size: 11px; height: 150px; padding-top: 5px; width: 260px; } #twitt-bubble ul{ background: #fff; margin: 0px 10px; width: 240px; } #twitt-nav{ position: absolute; right: 45px; bottom: 10px; height: 16px; width: 28px; } #twitt-nav .prev{ background: url(img/png) no-repeat; float: left; height:14px; text-indent: -9999px; width: 9px; } #twitt-nav .next{ background: url(img/png) no-repeat; float: right; height:14px; text-indent: -9999px; width: 9px; } #footer{ background: url(img/png) no-repeat; height: 35px; margin: 0 auto 20px; padding: 5px 30px; width: 908px; } #footer .nav li{ background: none; float: left; padding: 0 20px 0 0; } #footer li a{ display: block; padding: 5px 15px 5px 0px; } #copyright{ display: block; float: right; padding: 5px 15px 5px 0px; }