Chris M. Hatch
/* Resets
--------------------------------------------------------------------------------*/
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote,
fieldset, input {
margin: 0;
padding: 0;
}
a img {
border: 0;
}
a {
text-decoration: none;
}
/* General Styling and Structure
--------------------------------------------------------------------------------*/
body {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
background: #F0F0F0;
position: relative;
}
.container {
margin: 0 auto;
width: 940px;
position: center;
-webkit-box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.4);
}
#header-wrap,
#banner-wrap,
#nav-wrap,
#main-wrap,
#footer-wrap
{
width:100%;
}
a {
color: #359bdc;
}
a:hover {
color: #77c7fa;
}
h2 {
font-size: 22px;
padding: .5em 0 .5em 0;
line-height: 1.2;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: #2c2c2c;
background: url(/files/theme/heading-bg.png) no-repeat bottom left;
}
h2.blog-title
p {
line-height: 1.6;
padding: 1em 0;
}
div#content
/* Header
--------------------------------------------------------------------------------*/
#header-wrap .container {
height: 100px;
margin-top: 30px;
background: #3399FF;
margin-bottom: 40px;
padding: 15px 20px;
z-index: 100;
opacity: 0.94;
}
#logo,
#logo a,
#logo a:hover {
height:75px;
width:350px;
color: #000000;
text-decoration: none;
font-size: 36px;
font-family: 'Avenir Next', sans-serif;
font-weight: bold;
}
#header {
margin-: 100px;
border-collapse: collapse;
border-spacing: 0;
width:100%;
}
#header td {
vertical-align: middle;
text-align: left;
}
#header-right table {
float: right;
width: 1px;
color: #FFFFFF;
}
#header-right td {
padding: 0;
}
/* Header: Phone Number
--------------------------------------------------------------------------------*/
#header-right .phone-number .wsite-text {
right:275px;
display: block;
white-space: nowrap;
}
/* Header: Social Links
--------------------------------------------------------------------------------*/
#header-right .wsite-social {
vertical-align: middle;
margin: 0 0 0 5px;
float: right;
}
.wsite-social-item {
width: 30px;
height: 30px;
margin: 0 0 0 5px;
}
.wsite-social-rss {
background: url(/files/theme/social-icons.png) no-repeat -130px 0px;
}
.wsite-social-rss:hover {
background-position: -130px -30px;
}
.wsite-social-rss:active {
background-position: -130px -60px;
}
.wsite-social-linkedin {
background: url(/files/theme/social-icons.png) no-repeat -65px 0px;
}
.wsite-social-linkedin:hover {
background-position: -65px -30px;
}
.wsite-social-linkedin:active {
background-position: -65px -60px;
}
.wsite-social-facebook {
background: url(/files/theme/social-icons.png) no-repeat 0px 0px;
}
.wsite-social-facebook:hover {
background-position: 0px -30px;
}
.wsite-social-facebook:active {
background-position: 0px -60px;
}
.wsite-social-twitter {
background: url(/files/theme/social-icons.png) no-repeat -32px 0px;
}
.wsite-social-twitter:hover {
background-position: -32px -30px;
}
.wsite-social-twitter:active {
background-position: -32px -60px;
}
.wsite-social-mail {
background: url(/files/theme/social-icons.png) no-repeat -97px 0px;
}
.wsite-social-mail:hover {
background-position: -97px -30px;
}
.wsite-social-mail:active {
background-position: -97px -60px;
}
.wsite-social-pinterest {
background: url(/files/theme/social-icons.png) no-repeat -227px 0px;
}
.wsite-social-pinterest:hover {
background-position: -227px -30px;
}
.wsite-social-pinterest:active {
background-position: -227px -60px;
}
.wsite-social-youtube {
background: url(/files/theme/social-icons.png) no-repeat -325px 0px;
}
.wsite-social-youtube:hover {
background-position: -325px -30px;
}
.wsite-social-youtube:active {
background-position: -325px -60px;
}
.wsite-social-plus {
background: url(/files/theme/social-icons.png) no-repeat -195px 0px;
}
.wsite-social-plus:hover {
background-position: -195px -30px;
}
.wsite-social-plus:active {
background-position: -195px -60px;
}
.wsite-social-flickr {
background: url(/files/theme/social-icons.png) no-repeat -162px 0px;
}
.wsite-social-flickr:hover {
background-position: -162px -30px;
}
.wsite-social-flickr:active {
background-position: -162px -60px;
}
.wsite-social-vimeo {
background: url(/files/theme/social-icons.png) no-repeat -260px 0px;
}
.wsite-social-vimeo:hover {
background-position: -260px -30px;
}
.wsite-social-vimeo:active {
background-position: -260px -60px;
}
.wsite-social-yahoo {
background: url(/files/theme/social-icons.png) no-repeat -292px 0px;
}
.wsite-social-yahoo:hover {
background-position: -292px -30px;
}
.wsite-social-yahoo:active {
background-position: -292px -60px;
}
/* Header: Search Box
--------------------------------------------------------------------------------*/
#header-right .wsite-search {
margin:5px 0px ;
vertical-align: middle;
float:right;
}
.wsite-search {
width:174px;
}
.wsite-search-input {
width: 143px;
height: 18px;
border: 0;
font-family: 'Open Sans', sans-serif;
color: #999999;
font-size: 12px;
padding:5px !important;
float:left;
background: url(/files/theme/input-bg.png) no-repeat center left;
}
.wsite-search-button {
position: relative;
width: 21px;
height: 28px;
padding: 0px;
background: url(/files/theme/submit-bg.png) no-repeat center right;
}
/* Navigation
--------------------------------------------------------------------------------*/
#nav-wrap .container {
clear: both;
overflow: hidden;
position: left;
background: #282828;
width: 940px;
height: 45px;
border-bottom: 1px solid #;
opacity: 0.92;
}
#nav-wrap .container ul {
width: 940px;
list-style: none;
float: left;
}
#nav-wrap .container ul li {
list-style: none;
float: left;
background: url(/files/theme/nav-sep.png) repeat-y center right;
padding-right: 0px;
}
#nav-wrap .container ul li a {
display: block;
font-family: 'Avenir next', sans-serif;
font-size: 14px;
font-weight: regular;
color: #fff;
padding: 14px 20px;
border: 0;
outline: 0;
list-style-type: none;
text-transform:uppercase;
}
#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
background: #3399FF;
border: 0;
}
/* Navigation Submenu's
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu li a {
top: -32px;
font-family: 'Avenir next', sans-serif;
font-size: 13px;
color: #fff;
padding: 8px 0px;
color: #fff;
background: #282828;
border: 1;
border-color: #363636;
opacity: 0.94;
text-transform:uppercase;
}
#wsite-menus .wsite-menu li a:hover {
color: #fff;
background: #3399FF;
}
/* Universal banner
--------------------------------------------------------------------------------*/
#banner-wrap .container {
width:1000px;
position: relative;
}
/* Page type: Tall header
--------------------------------------------------------------------------------*/
.tall-header-page #banner {
background: url(/files/theme/banner-tall-bg.png) repeat center left;
width: 1000px;
height: 380px;
}
.tall-header-page .wsite-header {
width: 1000px;
height: 380px;
background: url(/files/theme/banner-tall.jpg) no-repeat;
}
/* Page type: Short header
--------------------------------------------------------------------------------*/
.short-header-page #banner {
background: url(/files/theme/banner-short-bg.png) no-repeat center left;
width: 1000px;
height: 251px;
}
.short-header-page .wsite-header {
width: 1000px;
height: 251px;
background: url(/files/theme/banner-short.jpg) no-repeat;
}
/* Page type: No header
--------------------------------------------------------------------------------*/
.no-header-page .wsite-header {
display:none;
}
/* Page type: Landing page
--------------------------------------------------------------------------------*/
.landing-page #banner {
background: url(/files/theme/banner-landing-bg.png) no-repeat center left;
width: 1000px;
height: 381px;
padding: 0;
}
.landing-page .wsite-header {
width: 1000px;
height:380px;
background: url(/files/theme/banner-landing.jpg) no-repeat;
position: relative;
}
#bannerright {
background: url(/files/theme/banner-landing-text-bg.png) repeat center left;
position: absolute;
width: 470px;
max-height: 380px;
bottom:0px;
left:30px;
padding: 25px 30px 20px 30px;
}
#bannerright h2 {
color: #fff;
font-size: 30px;
background:none;
padding: 0px;
line-height: 30px;
}
#bannerright p {
color: #fff;
font-size: 14px;
padding: 20px 0px;
line-height: 140%;
}
#bannerright .wsite-button {
margin: 0px;
}
/* Main Content
--------------------------------------------------------------------------------*/
#main-wrap {
margin: 40px 0px 0px 0px;
}
.no-header-page #main-wrap {
margin:0px;
}
#main-wrap .container {
background: #fff;
padding: 20px;
margin-bottom:45px;
}
blockquote {
font-size:14px;
font-style:italic;
padding: 1px 30px 0px 30px;
margin:20px 0px;
color:#999 !important;
border-left-color:#359bdc !important;
}
#main-wrap .container #wsite-content {
margin: 0 10px;
}
/* Footer
--------------------------------------------------------------------------------*/
#footer-wrap {
visibility:hidden;
text-align:right;
}
#footer-wrap .container {
visibility:hidden;
background: #fff;
padding: 20px;
}
#footer-wrap h2
#footer-wrap .container .wsite-footer {
margin: 0 10px;
}
#footer-wrap .wsite-form-container {
text-align:left;
}
/* Form Customization
--------------------------------------------------------------------------------*/
.wsite-form-label {
display: inline-block;
color: #2c2c2c;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-weight: bold;
margin:15px 0px 5px;
}
.form-radio-container {
color: #666666;
font-size: 13px;
font-weight: bold;
font-family: 'Open Sans', sans-serif;
}
.wsite-form-input, .wsite-search-element-input {
color: #888888;
background: #fff;
border: 1px solid #bebebe;
padding: 10px 7px !important;
box-sizing:border-box;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px !important;
font-size:12px;
-webkit-box-shadow: inset 0px 0px 1px 1px #ececec;
box-shadow: inset 0px 0px 1px 1px #ececec;
}
.form-select {
color: #888888;
font-size: 13px;
padding: 2px 0px 2px 5px;
width: 390px;
background: #fff;
border: 1px solid #bebebe;
-webkit-box-shadow: inset 0px 0px 1px 1px #ececec;
box-shadow: inset 0px 0px 1px 1px #ececec;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* Buttons
--------------------------------------------------------------------------------*/
/* Small structure & regular style */
.wsite-button {
height: 47px;
line-height:47px;
display: inline-block;
padding: 0px 26px 0px 0px;
background: url(/files/theme/button_highlight.png) no-repeat 100% -144px;
}
.wsite-button:hover {
background-position: 100% -192px;
}
.wsite-button:active {
background-position: 100% -240px;
}
.wsite-button-inner {
color: #fff !important;
height: 47px;
line-height: 45px;
display: block;
font-size: 14px;
font-weight: bold;
text-shadow:0 1px 1px rgba(0,0,0,0.6);
padding: 0px 0 0px 26px;
background: url(/files/theme/button_highlight.png) no-repeat 0px 0px;
}
.wsite-button:hover .wsite-button-inner {
background-position: 0px -48px;
}
.wsite-button:active .wsite-button-inner {
background-position: 0px -96px;
}
/* Large structure & regular style */
.wsite-button-large {
color: #fff !important;
height: 66px;
background: url(/files/theme/button_large_highlight.png) no-repeat 100% -200px;
padding: 0px 30px 0px 0px;
}
.wsite-button-large:hover {
background-position: 100% -266px;
}
.wsite-button-large:active {
background-position: 100% -332px;
}
.wsite-button-large .wsite-button-inner {
height: 66px;
line-height: 63px;
padding: 0px 0 0px 30px;
background: url(/files/theme/button_large_highlight.png) no-repeat 0px 0px;
}
.wsite-button-large:hover .wsite-button-inner {
background-position: 0px -66px;
}
.wsite-button-large:active .wsite-button-inner {
background-position: 0px -132px;
}
/* Highlighted styles */
.wsite-button-highlight {
background-image: url(/files/theme/button_blue.png);
}
.wsite-button-highlight .wsite-button-inner {
background-image: url(/files/theme/button_blue.png);
}
.wsite-button-large.wsite-button-highlight {
background-image: url(/files/theme/button_large_blue.png);
}
.wsite-button-large.wsite-button-highlight .wsite-button-inner {
background-image: url(/files/theme/button_large_blue.png);
}
