/* ---------------------------------------- */ /* CSS RESETS */ /* ---------------------------------------- */ 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%; 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; } /* remember to define focus styles! */ :focus { outline:0; } /* remember to highlight inserts somehow! */ ins { text-decoration:none; } del { text-decoration:line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse:collapse; border-spacing:0; } /* ---------------------------------------- */ /* BODY */ /* ---------------------------------------- */ body{ font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; } /* ---------------------------------------- */ /* HEADER */ /* ---------------------------------------- */ #header{ background-attachment: scroll; background-clip: border-box; background-color: #000000; background-image: url("images/header.jpg"); background-origin: padding-box; background-position: center top; background-repeat: no-repeat; background-size: cover; } #header .wrapper{ margin:0 auto; position:relative; height:293px; width:964px; } #header .logo{ float:left; margin:4px 0 0 88px; } #header h1{ margin:0 auto; padding-top:3px; display:block; clear:both; color:#a5d0df; font-size:60px; text-align:center; } #header h2{ margin:3px auto 0; display:block; color:#fff; font-size:36px; line-height:39px; text-align:center; } #header h3{ margin:18px auto 0; height:32px; width:308px; display:block; background:url(images/creator-v2.0.png); text-indent:-9999px; } /* ---------------------------------------- */ /* TOP NAV */ /* ---------------------------------------- */ #top-nav{ float:right; } #top-nav li{ float:left; position:relative; } #top-nav a{ padding-top:40px; height:51px; display:block; color:#fff; font:bold 18px "Trebuchet MS"; text-align:center; text-decoration:none; text-transform:uppercase; } #top-nav a:hover{ background:url(images/top-nav.png); } #top-nav a.home{ width:103px; } #top-nav a.home:hover, #top-nav a.home.active{ background-position:0 ; } #top-nav a.about{ width:84px; background-position:-103px 0; } #top-nav a.about:hover, #top-nav a.about.active{ background-position:-103px 0; } #top-nav a.services{ width:105px; background-position:-187px 0; } #top-nav a.services:hover, #top-nav a.services.active{ background-position:-187px 0; } #top-nav li:hover a.services{ background-position:-187px 0; } #top-nav a.projects{ width:120px; background-position:-292px 0; } #top-nav a.projects:hover, #top-nav a.projects.active{ background-position:-292px 0; } #top-nav a.blog{ width:79px; background-position:-412px 0; } #top-nav a.blog:hover,#top-nav a.blog.active{ background-position:-412px 0; } #top-nav a.store{ width:83px; background-position:-491px 0; } #top-nav a.store:hover, #top-nav a.store.active{ background-position:-491px 0; } #top-nav a.contact{ width:108px; background-position:-574px 0; } #top-nav a.contact:hover, #top-nav a.contact.active{ background-position:-574px 0; } #top-nav a.active{ color:#fe0af0; } #top-nav li ul{ position:absolute; top:71px; left:0; } #top-nav li li a{ padding: 5px; height:auto; width:160px; display:block; background:url(images/drop-down.png); color:#fe0af0; font:bold 14px "Trebuchet MS"; text-align:left; } #top-nav li li a:hover{ background:#fe0af0; color:#fff; } /* ---------------------------------------- */ /* MIDDLE NAV */ /* ---------------------------------------- */ #middle-nav{ height:55px; background:#d8eff7 url(images/middle-nav.gif) no-repeat center top; border-top:1px solid #b1dfef; border-bottom:1px solid #b1dfef; } #middle-nav .wrapper{ margin:0 auto; height:55px; width:776px; } #middle-nav ul{ margin:11px 0 0 14px; } #middle-nav li{ float:left; } #middle-nav a{ padding-top:8px; height:23px; display:block; background:#fff; color:#ff0dee; font-size:14px; font-weight:bold; text-align:center; text-decoration:none; text-transform:uppercase; } #middle-nav a.design{ margin-left:30px; width:139px; } #middle-nav a.hosting{ margin-left:31px; width:139px; } #middle-nav a.domain{ margin-left:31px; width:196px; } #middle-nav a.request{ margin-left:34px; width:162px; } #middle-nav a:hover{ background:#fff url(images/middle-nav-tip.gif) no-repeat center bottom; color:#ff0dee; } #middle-nav a.active{ background:#ff0dee; color:#fff; } /* ---------------------------------------- */ /* CONTENT */ /* ---------------------------------------- */ #content{ background-attachment: scroll; background-clip: border-box; background-color: #E9F5FB; background-image: url("http://www.dmaireroa.com/images/content.jpg"); background-origin: padding-box; background-position: center top; background-repeat: no-repeat; background-size: cover; } #content .wrapper{ margin:0 auto; padding-bottom:50px; width:978px; } /* ---------------------------------------- */ /* FOOTER */ /* ---------------------------------------- */ #footer{ background-attachment: scroll; background-clip: border-box; background-color: #0B0C0C; background-image: url("images/footer.jpg"); background-origin: padding-box; background-position: center top; background-repeat: no-repeat; background-size: cover; color: #FFFFFF; } #footer .wrapper{ margin:0 auto; height:450px; width:1000px; } #footer a{ color:#fff; text-decoration:none; } #footer a:hover{ text-decoration:underline; } #footer .main{ float:left; margin:22px 0 0 35px; display:inline; width:130px; } #footer .service{ float:left; margin:22px 0 0 34px; display:inline; width:130px; } #footer .main h2, #footer .service h2{ font-size:14px; line-height:20px; } #footer .service h2.other{ margin-top:48px; } #footer .main li, #footer .service li{ border-top:1px dashed #999; font-size:12px; line-height:24px; } #footer .follow{ margin:22px 0 0 61px; float:left; width:272px; } #footer .follow h2{ margin-left:5px; width:130px; border-bottom:1px dashed #999; font-size:14px; line-height:20px; } #footer .follow ul{ margin-top:19px; } #footer .follow li{ height:70px; padding-left:76px; font-size:24px; font-weight:bold; } #footer .follow li.blog{ background:url(images/icon-blog.png) no-repeat 0 0; } #footer .follow li.tweet{ background:url(images/icon-tweet.png) no-repeat 0 0; } #footer .follow a{ font-size:12px; font-weight:normal; } #footer .news{ float:right; margin-top:22px; width:246px; } #footer .news h2{ width:130px; border-bottom:1px dashed #999; font-size:14px; line-height:20px; } #footer .news li a{ font-size:12px; line-height:21px; } #footer .copy{ float:right; margin:34px 0 0 -50px; width:230px; padding:6px 0 0 110px; background:url(images/footer-logo.png) no-repeat 0 0; font-size:12px; } #footer .copy p{ line-height:14px; } #footer .copy p.loc{ margin:17px 0 0 -17px; } #footer .subscribe{ float:right; margin:17px 1px 0 0; width:605px; } #footer .subscribe h2{ margin-left:2px; font-size:24px; line-height:35px; } #footer .subscribe p{ margin:0 0 6px 2px; font-size:14px; line-height:17px; } #footer .subscribe input{ margin:0 0 11px 1px; padding:8px 12px; height:18px; width:200px; background:#fff; border:0; color:#666; } #footer .subscribe .button{ margin:2px 0 0; padding:0; height:34px; width:139px; background:url(images/btn-subscribe.png); cursor:pointer; } #footer .subscribe .button:hover{ background-position:0 -34px; } #footer #subscribeForm label.error{ margin-left:10px; padding:5px; width:auto; border:2px dashed red; background:#fff; display:inline; color:red; font-size:14px; } /* ---------------------------------------- */ /* CAPTCHA */ /* ---------------------------------------- */ .captcha{ padding-left:231px; } /* ---------------------------------------- */ /* CONTENT - BLOG */ /* ---------------------------------------- */ #blog{ padding-top:46px; overflow:hidden; } #blog h2{ color:#054686; font-size:28px; } #blog-box{ margin:30px 0 0; padding:21px 22px 32px; min-height:874px; width:935px; background:url(images/blue-bg.png); overflow:hidden; font:normal 80%/160% verdana,arial,helvetica,sans-serif;} /* Tables still need 'cellspacing="0"' in the markup */ #blog-box table {border-collapse: separate; border-spacing: 0;} #blog-box caption, #blog-box th, #blog-box td {text-align: left; font-weight: normal;} #blog-box blockquote:before, #blog-box blockquote:after, #blog-box q:before, #blog-box q:after {content: "";} #blog-box blockquote, #blog-box q {quotes: "" "";} #blog-box hr {margin-top: 20px; margin-bottom: 20px; border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-top-color: #CCC; border-right-color: #CCC; border-bottom-color: #CCC; border-left-color: #CCC;} /* TOOLBOX */ #blog-box .floatleft {float:left} #blog-box .floatright {float:right} #blog-box .clear {clear:both} #blog-box .button {border: 1px solid #002134; background: #ffffff; padding: 3px 8px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #002134;} #blog-box .button:hover {background: #002134; color: white;} #blog-box .block {display: block;} /* BLOG POST */ #blog-box .require { color: #600; text-decoration: none; } /* IMAGE */ #blog-box img {border: none} #blog-box .border-image {border: solid 3px #002466;} /* FORM */ #blog-box form {padding-left: 10px; padding-top: 10px; padding-bottom: 10px;} #blog-box form#searchform {float: right; margin-bottom: 10px; margin-right: 20px;} #blog-box #form1 {width: 700px;} #blog-box #form1 table tr td #logo {width: 300px;} /* TYPOGRAPHY */ #blog-box p#intro-paragraph {font-size: 2.0em; font-style: italic; line-height: 1.4em; margin-top: 5px;} #blog-box p#intro-paragraph span {font-size: 2.4em; font-weight: bold;} #blog-box p#intro-paragraph span em {color: #990;} #blog-box #structure h1 {font-size: 3.6em; font-weight: normal; font-family: Verdana, Geneva, sans-serif; color: #600; line-height: 1.2em;} #blog-box #structure h2 { font-size: 2.5em; line-height: 100%; font-weight: normal; margin-bottom: 10px; font-family: Verdana, Geneva, sans-serif; color: #002466; text-decoration: none; margin-bottom: 10px; border-top-width: 7px; border-top-style: solid; border-top-color: #E3E3E3; width: 615px; padding-top: 5px; padding-bottom: 5px; } #blog-box #structure h3 {font-family: Verdana, Geneva, sans-serif; color:#002466; font-size: 1.8em; font-weight: normal; line-height: 2.1em; border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: #F1F1F1; text-decoration: none; margin-bottom: 10px;} #blog-box #structure h4 {font-family: Verdana, Geneva, sans-serif; color:#002466; font-size: 1.8em; font-weight: normal; line-height: 2.1em;} #blog-box #structure h5 {font-family: Verdana, Geneva, sans-serif; color:#002466; font-size: 2em; line-height: 1.25em;} /* LINKS */ #blog-box #structure a:link, #structure a:visited {color:#069; text-decoration: none;} #blog-box #structure a:hover, #structure a:active {color:#069; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #000;} /* STRUCTURE */ #blog-box #structure {width:900px; margin:0 auto 15px; text-align:left; padding:10px 15px 15px; background:#fff; overflow:hidden; } #blog-box .columnWrapper {overflow:hidden; /* wrap floats */ width:100%; /* trip haslayout, wrap floats IE */ background:#FFF; padding:15px 0;} #blog-box #structure ul {list-style-type: none; list-style-image: none;} #blog-box #structure ul li {padding-left: 30px; list-style-type: none; list-style-image: none;} /* WP SIDEBAR */ #blog-box #structure #sidebar {float: right; width: 270px; padding:5px 0 0; text-align: left; border-left-width: thin; border-left-style: dashed; border-left-color: #39C;} #blog-box #structure #main {float: left; width: 615px; text-align: left;} #blog-box #structure #wordpress {float: left; width: 750px; text-align: center; padding-left: 50px; margin-top: 50px;} /* CONTENT */ #blog-box {} #blog-box .banner p {font-family: Verdana, Geneva, sans-serif; font-size: 18px; color: #FFF; text-decoration: none; padding-right: 20px; padding-left: 380px; width: 450px; padding-top: 120px; line-height: 100%; font-weight: bold;} #blog-box .column {float:left; display:inline; /* fix IE double margin */ width:411px; margin-left:15px;} #blog-box p {text-align:justify; padding:0 10px 1em;} /* HOMEPAGE NEWS */ #blog-box .newsList {padding:0 10px 1em 0; list-style:none;} #blog-box .newsList li {padding:0 0 1em 40px; background:url(http://www.dmaireroa.com/blog/wp-content/themes/dmaireroa/image/bullet-news.jpg) 15px 2px no-repeat;} #blog-box .newsList strong {color:#800;} /* BLOG ENTRIES */ #blog-box post { float:left; width:540px; } #blog-box .post h2 {} #blog-box .datebox {width: 40px; float: left; padding: 5px; background: #002466; color: white; text-align: center; margin-top: 0; margin-right: 10px; margin-bottom: 0; margin-left: 0; display: block; line-height: 100%;} #blog-box .day {font-size: 2.0em; font-weight: bold; margin: 0; line-height: 1.0em;} #blog-box .month {font-size: 1.4em; font-weight: bold; text-transform: uppercase; margin: 0; line-height: 1.0em;} #blog-box .year {font-size: 1.2em; font-weight: bold; margin: 0; line-height: 1.0em;} /* COMMENTS */ #blog-box .avatar {margin-top: 20px; padding: 2px; height: 40px;} #blog-box ol.commentlist {list-style: none;} #blog-box .comment-bubble {background: #C1F4F9; color: #000; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; width: 520px; border: 1px solid #71D0E0; padding-top: 10px; padding-right: 10px; padding-left: 10px; padding-bottom: 10px;} #blog-box ol.commentlist li p {font-size: 1.0em;} #blog-box .commentlist li .tip {left: 40px; top: -45px; position: relative;} #blog-box label {display: block; margin-bottom: 10px;} #blog-box textarea {display: block; margin-bottom: 10px;} /* SUB NAV */ #blog-box #subnav {background-image: url(http://www.dmaireroa.com/blog/wp-content/themes/dmaireroa/image/barLinkfooter.jpg); background-repeat: repeat-x; height: 50px; width: 838px; margin-left: 15px;} #blog-box #subnav h4 {font-size: 180%; line-height: 50px; font-weight: bold; color: white; padding-left: 20px; float: left; width:auto; margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px;} #blog-box #subnav ul {list-style-image: none; list-style-type: none; float: right; padding-right: 10px; padding-top: 15px; width:auto;} #blog-box #subnav ul li {padding-right: 8px; padding-left: 8px; padding-top: 0px; padding-bottom: 0px; display: inline; float: right; font-size: 95%; text-decoration: none; border-left-width: 1px; border-left-style: solid; border-left-color: #FFF; width:auto;} #blog-box #subnav ul .border {border: 0; display: inline;} #blog-box #subnav ul li a:link, #subnav ul li a:visited {color: white; text-decoration: none;} #blog-box #subnav ul li a:hover, #subnav ul li a:active {text-decoration: underline;} /* RESOURCE */ #blog-box #resources ul {list-style:none; padding:0 15px 10px; line-height:40px;} #blog-box #resources li {display:block; height:40px; margin-bottom:5px;} #blog-box #resources ul img {float:left; padding-right:10px;} #blog-box #resources ul a {display:block; height:40px; color:#FFF; text-decoration:none; background:#69A url(http://www.dmaireroa.com/blog/wp-content/themes/dmaireroa/image/resourcesAnchorBackground.png) 0 0 repeat-x;} #blog-box #resources ul a:active, #blog-box #resources ul a:focus, #blog-box #resources ul a:hover {background-position:0 -50px; background-color:#7AB;} /* CATEGORIES */ #blog-box .imageOver1 {background-image: url(http://www.dmaireroa.com/blog/wp-content/themes/dmaireroa/image/icon-homeOva.jpg); height: 70px; width: 70px; background-repeat: no-repeat;} #blog-box .imageOver2 {background-image: url(http://www.dmaireroa.com/blog/wp-content/themes/dmaireroa/image/icon-serviceOva.jpg); height: 70px; width: 70px; background-repeat: no-repeat;} #blog-box .imageOver3 {background-image: url(http://www.dmaireroa.com/blog/wp-content/themes/dmaireroa/image/icon-workOva.jpg); height: 70px; width: 70px; background-repeat: no-repeat;} #blog-box .imageOver4 {background-image: url(http://www.dmaireroa.com/blog/wp-content/themes/dmaireroa/image/icon-contactOva.jpg); height: 70px; width: 70px; background-repeat: no-repeat;} /* GOOGLE */ #blog-box .middle {padding-left: 15px; /*** For Google Adsense ***/} #blog-box .middle p {padding-bottom: 15px;}