You are on page 1of 24

/* 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;
}

::-webkit-input-placeholder {
color: #797570;
}

:-moz-placeholder { /* Firefox 18- */


color: #797570;
}

::-moz-placeholder {

/* Firefox 19+ */

color: #797570;
}

:-ms-input-placeholder {
color: #797570;
}

/* General Styling and Structure


--------------------------------------------------------------------------------*/

body {

font-family: Arial, sans-serif;


font-size: 18px;
line-height: 1.5;
color: #797570;
font-weight: normal;
background-image: url("body-bg.jpg");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
background-attachment: fixed;
height: 100%;
box-sizing: border-box;
}

/* list all page type classes so that it shows up in the editor */


.tall-header-page:before,
.short-header-page:before,
.title-page:before,
.landing-page:before,
.splash-page:before,
.no-header-page:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 507px;
z-index: -1;
background: transparent url("Menu-Shadow.png") top left repeat;
}

html {
height: 100%;
}

.container {

margin: 0 auto;
width: 970px;
}

#header-wrap,
#banner-wrap,
#nav-wrap,
#main-wrap,
#footer-wrap {
width:100%;
}

a {
color: #3b8cdd;
}

a:hover {
color: #86bcf3;
}

h2 {
font-size: 30px;
padding: .5em 0 16px 0;
line-height: 1.25;
color: #494442;
text-transform: uppercase;
font-family: 'Ubuntu', sans-serif;
}

#banner-wrap h2,
#footer-wrap h2,
#splash-wrap h2 {
color: #fff;
border-bottom-color: rgba(0,0,0,0.2);
}

p {
font-size: 18px;
line-height: 1.5;
padding: .5em 0;
}

blockquote {
background: #fff;
font-family: 'Arvo', serif;
font-size: 18px;
line-height: 1.5;
color: #494442;
padding: 1em;
margin: 2em 0;
border: 2px solid #c8c6c4;
border-left: 2px solid #c8c6c4 !important;
font-style: normal !important;
}

#splash-wrap blockquote {
background: transparent;
color: #fff;
border-width: 2px 0 !important;
border-color: rgba(0,0,0,0.2);
font-size: 24px;
line-height: 1.2;
}

div#content {min-height:400px;}

.wsite-image-border-thin img {
border:2px solid rgba (0,0,0,0.1) !important;
}

.styled-hr {
background-color: #eeecea;

box-shadow: none;
height: 2px;
}

#banner-wrap .styled-hr,
#footer-wrap .styled-hr,
#splash-wrap .styled-hr {
background-color: rgba(0,0,0,0.2);
box-shadow: none;
height: 2px;
}

/* Header
--------------------------------------------------------------------------------*/
#logo,
#logo a {
color: #fff;
font-size: 30px;
text-transform: uppercase;
font-family: 'Ubuntu', serif;
font-weight: 700;
}
#header {
border-collapse: collapse;
border-spacing: 0;
width:100%;
}

#header td {
vertical-align: middle;
text-align: left;
}

#header table {
float: right;
width: 1px;

#header td {
padding: 0;
}

/* Header: Social Links


--------------------------------------------------------------------------------*/
.wsite-social {
vertical-align: middle;
}

.wsite-social-item {
width: 24px;
height: 24px;
margin: 0 0 0 8px !important;
background-image: url(social-icons-black.png);
}

.wsite-social-rss { background-position: -220px -13px; }


.wsite-social-rss:hover { background-position: -220px -53px; }
.wsite-social-rss:active { background-position: -220px -95px; }

.wsite-social-linkedin { background-position: -127px -13px; }


.wsite-social-linkedin:hover { background-position: -127px -53px; }
.wsite-social-linkedin:active { background-position: -127px -95px; }

.wsite-social-facebook { background-position: -35px -13px; }


.wsite-social-facebook:hover { background-position: -35px -53px; }
.wsite-social-facebook:active { background-position: -35px -95px; }

.wsite-social-twitter { background-position: -82px -13px; }


.wsite-social-twitter:hover { background-position: -82px -53px; }
.wsite-social-twitter:active { background-position: -82px -95px; }

.wsite-social-mail { background-position: -173px -13px; }

.wsite-social-mail:hover { background-position: -173px -53px; }


.wsite-social-mail:active { background-position: -173px -95px; }

.wsite-social-pinterest { background-position: -357px -13px; }


.wsite-social-pinterest:hover { background-position: -357px -53px; }
.wsite-social-pinterest:active { background-position: -357px -95px; }

.wsite-social-youtube { background-position: -495px -13px; }


.wsite-social-youtube:hover { background-position: -495px -53px; }
.wsite-social-youtube:active { background-position: -495px -95px; }

.wsite-social-plus { background-position: -312px -13px; }


.wsite-social-plus:hover { background-position: -312px -53px; }
.wsite-social-plus:active { background-position: -312px -95px; }

.wsite-social-flickr { background-position: -265px -13px; }


.wsite-social-flickr:hover { background-position: -265px -53px; }
.wsite-social-flickr:active { background-position: -265px -95px; }

.wsite-social-vimeo { background-position: -404px -13px; }


.wsite-social-vimeo:hover { background-position: -404px -53px; }
.wsite-social-vimeo:active { background-position: -404px -95px; }

.wsite-social-yahoo { background-position: -448px -13px; }


.wsite-social-yahoo:hover { background-position: -448px -53px; }
.wsite-social-yahoo:active { background-position: -448px -95px; }

#banner-wrap .wsite-social-item,
#footer-wrap .wsite-social-item,
#splash-wrap .wsite-social-item {
background-image: url(social-icons-white.png);
}

/* Header: Search Box


--------------------------------------------------------------------------------*/
#header .search { float: right; margin-left: 20px; }

#header .wsite-search {
/*width: 224px;*/
vertical-align: middle;
overflow: hidden;
position:relative;
background: #fff;
}

#header .wsite-search-input {
width: 158px;
height: 18px;
border: 0;
padding: 14px 5px !important;
color: rgba(41,41,41,0.4);
font-size: 16px;
font-weight: bold;
font-style: italic;
float: right;
background: none;
border-left: 1px soild #292929 !important;
}

#header .wsite-search-button {
position: relative;
width: 55px;
height: 46px;
border: 0;
margin:

0;

padding: 0;
background: url("submit-bg.png") no-repeat left center;
cursor: pointer;
}

#header .wsite-search-cover {
position:absolute;

width:54px;
height:42px;
right:0px;
top: 0px;
z-index:1;
cursor: pointer;
}

/* Navigation
--------------------------------------------------------------------------------*/
#nav-wrap {
padding: 34px 0;
line-height: 1;
position: relative;
}

#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
}

#nav-wrap .container ul {
list-style: none;
overflow: hidden;
float: right;
}

#nav-wrap .container ul li {
list-style: none;
float: left;
padding-left: 50px;
text-transform: uppercase;
font-family: 'Ubuntu', sans-serif;
font-weight: 700;
}

#nav-wrap .container ul span:last-child li,


#nav-wrap .container ul > li:last-child {
background: none;
}

#nav-wrap .container ul li a {
float: left;
display: block;
color: rgba(255,255,255,0.5);
border: 0;
outline: 0;
list-style-type: none;
font-size: 16px;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}

#nav-wrap .container ul li#active a,


#nav-wrap .container ul li a:hover {
color: #fff;
border: 0;
}

.splash-page #nav-wrap {
position: absolute;
top: 0;
left: 0;
}

/* Navigation Submenu's
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu {
border: solid 2px rgba(0,0,0,0.2);
}

#wsite-menus .wsite-menu li a {
padding: 8px 0;
color: #494442;
background: #fff;
border: 0;
border-bottom: 1px solid #eeecea;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
margin: 0px 1px;
}

#wsite-menus .wsite-menu li:last-child a {


border-bottom-width: 0;
}

#wsite-menus .wsite-menu li a:hover {


color: #797570;
background: #eeecea;
}

#wsite-menus .wsite-menu li a:active {


color: #fff;
background: #797570;
}

/* Universal banner
--------------------------------------------------------------------------------*/
#banner {
background-color: rgba(29,29,23,0.75);
margin-bottom: 25px;
text-align: center;
}

#banner table { width: 100%; border-spacing: 0; border-collapse: collapse }

#banner td { vertical-align: middle !important; text-align: center; }

#bannerright {
padding: 50px 70px;
text-align: center;
line-height: 1;
}

#bannerright h2,
#banner h2 {
color: #fff;
font-size: 36px;
line-height: 1;
padding: 0px 0px 30px;
border-bottom: 2px solid rgba(0,0,0,0.2);
text-transform: uppercase;
font-family: 'Ubuntu', serif;
font-weight: 700;
}

#bannerright p,
#banner p {
color: rgba(255,255,255,0.5);
font-size: 18px;
padding: 20px 0;
}

#banner .button-wrap {
display: inline-block;
}

/* Page type: Tall header


--------------------------------------------------------------------------------*/
.tall-header-page #banner {
margin: 0 0 30px 0;
}

.tall-header-page .wsite-header {
width: 970px;
height: 359px;
background: url(banner-tall.jpg) no-repeat center center;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.2);
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* Page type: Short header


--------------------------------------------------------------------------------*/
.short-header-page #banner {
margin: 0 0 30px 0;
}

.short-header-page .wsite-header {
width: 970px;
height: 287px;
background: url(banner-short.jpg) no-repeat;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.2);
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* Page type: No header


--------------------------------------------------------------------------------*/
.no-header-page .wsite-header

display:none;
}

/* Splash Page
-----------------------------------------------------------------------------*/
.splash-page {
background-repeat: no-repeat;
background-position: 50% 50%;

background-size: cover;
background-attachment: fixed;
}

.splash-page .main-wrap {
display: table-cell;
width: 770px;
margin: 160px auto 0px;
text-align: center;
position: relative;
vertical-align: middle;
}

.splash-page .main-wrap #content-section {


text-align: center;
padding: 40px 70px 70px 70px;
color: rgba(255,255,255,0.5);
background-color: rgba(0,0,0,0.6);
}

#splash-wrap {
height: 100%;
display: table;
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding-bottom: 34px;
padding-top: 98px;
}

/* Page type: Landing page


--------------------------------------------------------------------------------*/
.landing-page #banner {
padding: 0;
}

#bannerleft {
width: 830px;
background: #cfcfcf;
margin-bottom: 40px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.2);
box-shadow: 0 1px 3px rgba(0,0,0,.2);
border: solid 2px #4a4743;
}

.landing-page .wsite-header {
width: 830px;
height: 465px;
background: url(banner-landing.jpg) no-repeat;
}

/*Title-page
----------------------------------------------------------------------------*/
.title-page #banner {
padding:10px 69px;
}

.title-page #banner h2 {
border-bottom: 0;
padding-bottom: 0;
}

.title-page #banner p {
margin-left:55px;
}

/* Main Content
--------------------------------------------------------------------------------*/
#main-wrap .container {
min-height:400px;
background: #fafafa;

padding: 40px 70px 70px 70px;


width: 830px;
}

#main-wrap .paragraph ul, #main-wrap .paragraph ol {


margin: 0 !important;
}
#main-wrap .paragraph li {
list-style: none;
background: url(bullets.png) no-repeat left 8px;
padding-left: 15px !important;
}

/* Footer
--------------------------------------------------------------------------------*/

#footer-wrap {
text-align:right;
margin-top: 30px;
padding-bottom: 34px;
}

#footer-wrap .wsite-form-field,
#footer-wrap .wsite-form-sublabel {
text-align: left;
}

#footer-wrap .container {
background: rgba(0,0,0,0.6);
width: 830px;
padding: 35px 70px 35px 70px;
color: rgba(255,255,255,0.6);
}
#footer-wrap .container h2 {
color: #fff;
font-size: 18px;

padding: 0 0 1em 0;
border-bottom: 2px solid #746e68;
margin-bottom: 15px;
}
#footer-wrap .container p {
color: rgba(255,255,255,0.6);
font-size: 18px;
padding: 0 0 15px 0;
}

#footer-wrap .container blockquote {


background: none;
color: rgba(255,255,255,0.6);
border: 0 !important;
font-family: 'Arvo', sans-serif;
}

#footer-wrap .wsite-search-element-input {
height: 42px;
padding-left: 58px;
background-color: rgba(0,0,0,0.2) !important;
border-color: rgba(255,255,255,0.2);
}

#footer-wrap .wsite-search-element-input::-webkit-input-placeholder,
#footer-wrap .wsite-search-element-input:-moz-placeholder,
#footer-wrap .wsite-search-element-input::-moz-placeholder,
#footer-wrap .wsite-search-element-input:-ms-input-placeholder {
color: rgba(255,255,255,0.2);
font-style: italic;
}

#footer-wrap .wsite-search-element-submit {
right: auto;
left: 2px;
background: rgba(255,255,255,0.2) url("search-footer.png") center center no-repeat;

width: 38px;
height: 38px;
margin-top: -19px;
}

/* Form Customization
--------------------------------------------------------------------------------*/
.wsite-form-container {
border-bottom: 2px solid #eeecea;
margin-bottom: 20px;
padding-bottom: 20px;
}

.wsite-form-field {
margin-top: 20px !important;
line-height: 1.2;
}

.wsite-form-label {
display: inline-block;
color: #797570;
font-size: 18px;
}

.form-radio-container {
color: #797570;
font-size: 16px;
}

.wsite-form-sublabel {
color: #797570;
line-height: 1;
margin-top: 5px;
}

.form-radio-container input, .form-radio-container label {

vertical-align: middle;
}

.form-radio-container input {
margin-right: 12px;
}

.wsite-form-input, .wsite-search-element-input {
color: #797570;
font-size: 18px;
background: #fff;
border: solid 2px rgba(200,198,196,.4);
}

.wsite-form-input:hover, .wsite-search-element-input:hover {
background: #eeecea;
}

.wsite-form-input:focus, .wsite-search-element-input:focus {
background: #fff;
border-color: #797570;
outline: none;
}

.wsite-form-input:active, .wsite-search-element-input:active {
background-color: #eeecea;
border-color: #797570;
}

.form-select {
color: #797570;
font-size: 18px;
background: #fff;
border: solid 2px rgba(200,198,196,.2);
padding: 5px;
height: 40px !important;

line-height: 44px !important;


width: 300px;
}

/* Dark Forms
--------------------------------------------------------------------------------*/
#banner-wrap .wsite-form-container,
#footer-wrap .wsite-form-container,
#splash-wrap .wsite-form-container {
border-bottom-color: rgba(0,0,0,0.2);
}

#banner-wrap .wsite-form-label,
#footer-wrap .wsite-form-label,
#splash-wrap .wsite-form-label {
color: #B6B3AF;
}

#banner-wrap .wsite-form-input, #banner-wrap .wsite-search-element-input,


#footer-wrap .wsite-form-input, #footer-wrap .wsite-search-element-input,
#splash-wrap .wsite-form-input, #splash-wrap .wsite-search-element-input {
background-color: rgba(0,0,0,0.3);
border-color: rgba(255,255,255,0.3);
}

#banner-wrap .wsite-form-input:hover, #banner-wrap .wsite-search-element-input:hover,


#footer-wrap .wsite-form-input:hover, #footer-wrap .wsite-search-element-input:hover,
#splash-wrap .wsite-form-input:hover, #splash-wrap .wsite-search-element-input:hover {
background-color: rgba(0,0,0,0);
}

#banner-wrap .wsite-form-input:active, #banner-wrap .wsite-search-element-input:active,


#footer-wrap .wsite-form-input:active, #footer-wrap .wsite-search-element-input:active,
#splash-wrap .wsite-form-input:active, #splash-wrap .wsite-search-element-input:active {
background-color: rgba(0,0,0,0);
border-color: #fff;

#banner-wrap .wsite-form-input:focus, #banner-wrap .wsite-search-element-input:focus,


#footer-wrap .wsite-form-input:focus, #footer-wrap .wsite-search-element-input:focus,
#splash-wrap .wsite-form-input:focus, #splash-wrap .wsite-search-element-input:focus {
background-color: #4a4a4a;
border-color: #fff;
outline: none;
}

/* Light/Base Buttons
--------------------------------------------------------------------------------*/
.wsite-button,
#wsite-com-checkout-button {
display: inline-block;
background: #fff;
border: 2px solid #86bcf3;
font-size: 18px;
font-weight: bold !important;
color: #3b8cdd !important;
}

.wsite-button:hover,
#wsite-com-checkout-button:hover {
border-color: #3b8cdd;
}

.wsite-button:active {
background-color: #3b8cdd;
color: #fff !important;
}

.wsite-button-inner {
background: transparent !important;
}

/* Highlighted styles */
.wsite-button-highlight {
background: #fff !important;
border-color: #c8c6c4;
color: #797570 !important;
}

.wsite-button-highlight:hover {
border-color: #797570;
}

.wsite-button-highlight:active {
background: #797570 !important;
border-color: #fff;
}

#wsite-com-checkout-button:active {
background-color: #3b8cdd !important;
color: #fff !important;
}

/* Dark Buttons
--------------------------------------------------------------------------------*/
#banner-wrap .wsite-button,
#footer-wrap .wsite-button,
#splash-wrap .wsite-button{
background: transparent;
border: 2px solid #86bcf3;
color: #fff !important;
}

#banner-wrap .wsite-button:hover,
#footer-wrap .wsite-button:hover,
#splash-wrap .wsite-button:hover {
border-color: #3b8cdd;

#banner-wrap .wsite-button:active,
#footer-wrap .wsite-button:active,
#splash-wrap .wsite-button:active {
background-color: #3b8cdd;
border-color: #3b8cdd;
color: #fff !important;
}

/* Highlighted styles */
#banner-wrap .wsite-button-highlight,
#footer-wrap .wsite-button-highlight,
#splash-wrap .wsite-button-highlight {
background: rgba(0,0,0,0.2) !important;
border-color: #7d7d7d;
color: #fff !important;
}

#banner-wrap .wsite-button-highlight:hover,
#footer-wrap .wsite-button-highlight:hover,
#splash-wrap .wsite-button-highlight:hover {
border-color: #fff;
}

#banner-wrap .wsite-button-highlight:active,
#footer-wrap .wsite-button-highlight:active,
#splash-wrap .wsite-button-highlight:active {
background: #fff !important;
color: #494442 !important;
}

/* Blog
--------------------------------------------------------------------------------*/
.blog-sidebar-separator {
padding-right: 0;

.blog-sidebar h2 {
font-size: 24px;
padding-top: 0;
padding-bottom: 0;
}

#main-wrap .blog-title a {
color: #494442;
}

/* Product
--------------------------------------------------------------------------------*/
.wsite-product h2 {
padding-top: 0;
}

/* Transitions
--------------------------------------------------------------------------------*/
.wsite-form-input,
.wsite-search-element-input,
.form-select,
.wsite-button,
.wsite-menu li a,
#nav a {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;

-webkit-transition-property: border-color, background-color, color;


-moz-transition-property: border-color, background-color, color;
-o-transition-property: border-color, background-color, color;
transition-property: border-color, background-color, color;
}

You might also like