/* Theme Name: Starkers Theme URI: http://viewportindustries.com/products/starkers Description: The totally nude Wordpress theme! Version: 4.0 Author: Elliot Jay Stocks & Keir Whitaker Author URI: http://viewportindustries.com Tags: starkers, naked, clean, basic */ /* =========================== CONTENTS: 01 Sensible defaults 02 Typography 03 Media queries =========================== */ /* ---------------------------------------------------------------------------------------------------------- 01 Sensible defaults ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* CSS RESET */ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}h1,h2,h3,h4,h5,h6{font-weight:400}a{color:blue}a:focus{outline:thin dotted}li{list-style:none}abbr[title]{border-bottom:none}b,strong{font-weight:700}i,em,dfn{font-style:italic}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:700}pre,code,kbd,samp{font-family:monospace,monospace;_font-family:'courier new',monospace}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:"";content:none}small{font-size:85%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}label{cursor:pointer}input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal;*overflow:visible}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}input[type="checkbox"],input[type="radio"]{box-sizing:border-box}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top;resize:vertical}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top} div, article, section, header, footer, nav, li { position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ } .group:after { display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ } body { background:#fff; /* Don't forget to style your body to avoid user overrides */ } ::-moz-selection { background:#ff0; color:#333; } ::selection { background:#ff0; color:#333; } /* ---------------------------------------------------------------------------------------------------------- 02 Typography ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* 14 / 16 = 0.875em (14px equivalent) 16 / 16 = 1em (16px equivalent) 18 / 16 = 1.125em (18px equivalent) 21 / 16 = 1.3125em (21px equivalent) 24 / 16 = 1.5em (24px equivalent) 30 / 16 = 1.875em (30px equivalent) */ body, input, textarea { /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ } h1, h2, h3, h4, h5, h6 { font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ } body {background-color: #e9e6e1; color: #666; font-family: Arial, Helvetica, sans-serif;} #content {background-color: #fff; width: 100%; margin: 0 auto; margin-bottom: 12px;} .content-row {overflow: hidden;} #footer-top {border-top: 2px solid #0b2a4a; color: #999; margin-top: 15px; padding-top: 15px; text-align: center;} #footer-top h4 {color: #999; margin-bottom: 0;} #footer-top h3 {color: #777; margin-bottom: 10px;} #footer-top a {color: #999;} #footer-top ul {margin-bottom: 20px;} #middle #footer-top ul {margin-bottom: 10px;} #middle #footer-top ul li {display: inline-block; font-size: 12px; margin: 0 8px 5px 8px;} #footer-social {margin-bottom: 15px;} #footer-social img {border-radius: 4px; margin: 0 4px; width: 35px;} #footer {max-width: 800px; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; color: #333; font-size:9px; text-align:center; text-transform: uppercase;} #footer ul {margin-bottom: 15px;} #footer li {display: inline; margin-left: 16px; font-size: 12px} #footer a { color: #40a8cb; font-size:9px; text-align:center; text-transform: uppercase; text-decoration:none; } #equal-housing-icon {float: right; margin: 0 0 10px 20px;} header {margin-top: 5px; padding-top: 15px;} #header-name {max-width: 80%;} #header-title {display: block;} #header-image {width: 100%; overflow: hidden;} #header-image img {width: 100%;} #mobile-toggle {float: right; height: 26px; margin-top: 15px; position: relative; width: 30px;} #mobile-toggle input {position: absolute; top: -3px; left: -3px; width: 100%; height: 100%; z-index: 1; opacity: 0; cursor: pointer;} #mobile-toggle input:checked + span {background: transparent;} #mobile-toggle input:checked + span:after {transform: rotate(45deg) translate(-1px, -8px);} #mobile-toggle input:checked + span:before {transform: rotate(-45deg) translate(-4px, 12px);} #mobile-toggle span {position: absolute; width: 100%; height: 5px; background: #ccc; margin-top: 10px;} #mobile-toggle span:before, #mobile-toggle span:after {content: ""; position: absolute; width: 100%; height: 5px; background: #ccc; top: -9px; transition: 0.3s;} #mobile-toggle span:after {top: 9px;} #nav-menu {border-top: 2px solid #0b2a4a; border-bottom: 2px solid #0b2a4a; margin-top: 15px; padding: 3px 0;} #nav-menu .menu {background: #0b2a4a; display: none; margin-bottom: 3px; overflow: hidden; text-align: center; width: 100%;} #nav-menu .menu li {border-bottom: 1px solid #9d978b; box-sizing: border-box; font-weight: bold; height: 35px;} #nav-menu .menu li:first-child {margin-top: 0;} #nav-menu .menu li {} #nav-menu .menu li:hover {background: rgba(190,184,158,1);} #nav-menu .menu li a {box-sizing: border-box; color: #fff; display: block; height: 23px; padding: 10px 0; text-decoration: none; text-transform: uppercase;} #nav-menu .menu li.current-menu-item a {color: #ddd;} p {margin-bottom: 1em;} #middle {overflow: hidden; padding: 0 10px;} #middle h1 {margin: 0.67em 0;} .NavBarImg { width: 180px; height: 30; margin: 0 0 0 8px; } #NavBarUL { float: left; width: 180px; height:210px; } .SpacerLine1 { float: left; clear: both; width: 780px; height: 11px; margin:0px 0px 0px; } #BrianParkinsonTag { float: left; clear: both; width: 770px; height: 75px } .NavBarImage { float: left; clear: both; width: 600px; height: 208px } #leftnavdiv {float: left; clear: both; margin: 12px 24px 12px 0; width: 100px;} #leftnavdiv img {height: auto; max-width: 100%;} #leftnavdiv2 { float: left; clear: both; width: 220px; } #rightcontentdiv { width: 592px; float: left; } #rightcontentdiv2 { width: 580px; float: left; } #BPatWork { width: 180px; height: 120px; } .leftnavP { margin: 12px auto; text-align:center; } .leftnavP2 { margin: 12px auto; width: 200px; text-align:center; } a { color: #2E2F24; font-size:12px; text-decoration: underline; margin:0; } h1 {color: #0b2a4a; font-size:24px; font-family: "Times New Roman", Times, serif; font-weight: bold; letter-spacing: 1px;} h2 { color: #51523F; font-size:20px; font-family: "Times New Roman", Times, serif; letter-spacing: 1px; font-weight: bold; margin-top:3px; margin-bottom:6px; } h3 { color: #282921; font-size:11px; text-transform: uppercase; margin-top:0px; margin-bottom: 3px; } h4 { color: #51523F; font-size:16px; font-family: "Times New Roman", Times, serif; letter-spacing: 1px; font-weight: bold; margin-top:3px; margin-bottom:3px; text-transform:uppercase; } #content p, #content ul, #content ol {font-size: 14px; line-height: 1.4em;} #content p + h2, #content ul + h2, #content ol + h2 {margin-top: 30px;} #content hr {margin: 20px 0;} #content img.alignleft {float: left; margin: 0 15px 15px 0;} #content img.alignright {float: right; margin: 0 0 15px 15px;} #content blockquote {display: block; overflow: hidden;} #content input[type=text], #content input[type=email], #content input[type=search], #content textarea {border: 1px solid #ccc; padding: 4px;} #content textarea {height: 100px; min-width: 90%;} #content input[type=radio], #content select {margin-left: 10px;} #content input[type=submit] {background: #3b99fc; border: 0; color: #fff; margin-bottom: 20px; padding: 6px 20px;} #blog-list h2 {margin-top: 30px;} #blog-list h2 a {font-size: 20px; text-decoration: none;} #blog-list h2 a:hover {font-size: 20px; text-decoration: underline;} time {display: block; font-size: 12px; font-style: italic; margin-bottom: 10px;} #postPagination {margin: 40px 0; text-align: center;} #postPagination a {background: #00aeff; border-radius: 18px; color: #fff; margin: 0 5px; padding: 6px 10px; text-decoration: none;} #content #sidebar input[type=submit] {margin-bottom: 0; padding: 5px;} #sidebar {margin-top: 20px;} #sidebar .widget {margin-bottom: 20px;} #sidebar img {margin-bottom: 5px; max-width: 100%;} ul {margin: 0; padding: 0; list-style: none;} .contactInfo { display: inline; margin-left: 16px; font-size:12px; } .marginleft { margin-left: 8px; margin-right:8px; } .floatLeft { float: left; margin: 6px; } .floatRight { float: right; margin: 6px; } .smallblack, .testimonialleft, .smallstandard, .loanprocesstitle { text-align:left; } #middle {color: #505140; font-size:12px;} #middle ul, #middle ol {margin-bottom: 20px;} #middle ul li {list-style-type: disc; margin: 0 0 5px 30px;} #topImageSwitch {display: none;} /* ---------------------------------------------------------------------------------------------------------- 03 Media queries (using a mobile-first approach) ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ /* 400 and up */ @media screen and (min-width:400px) { { /* Place your styles here for all widths greater than 400px */ } } @media screen and (min-width:600px) { #leftnavdiv {width: 180px;} #footer-top-name {float: left; text-align: left; width: 80%;} #middle #footer-top ul li {display: inline-block; font-size: 12px; margin: 0 10px 3px 0px;} #footer-social {float: right; text-align: right; width: 20%;} } @media screen and (min-width:800px) { #content {width: 800px; margin: 0 auto; margin-top: 10px; padding: 10px;} #header-image {} #header-image img {width: 100%;} #header-name {margin: 0 10px;} #header-title {display: inline; margin: 5px 0 0 15px;} #mobile-toggle {display: none;} #nav-menu .menu {box-sizing: border-box; display: block !important; letter-spacing: 0.02em; padding: 6px 0 3px 12px; text-align: left; width: 100%;} #nav-menu .menu li {border: 0; display: inline; height: auto; padding: 2px 16px 2px 9px;} #nav-menu .menu li a {display: inline; padding: 3px 0;} #nav-menu .menu li:hover {background: inherit;} #nav-menu .menu li a:hover {color: #e9e6e1;} #blog-left-content {box-sizing: border-box; padding-right: 20px; float: left; width: 73%;} #blog-right-content {box-sizing: border-box; float: right; padding-left: 20px; width: 27%;} } /* Retina Display */ @media screen and (-webkit-min-device-pixel-ratio:2) { { /* Place your styles here for all 'Retina' screens */ } }