Professional Documents
Culture Documents
Mycss
Mycss
--------------------------------------------------------------------------------*/
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 19+ */
color: #797570;
}
:-ms-input-placeholder {
color: #797570;
}
body {
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;
}
.wsite-social-item {
width: 24px;
height: 24px;
margin: 0 0 0 8px !important;
background-image: url(social-icons-black.png);
}
#banner-wrap .wsite-social-item,
#footer-wrap .wsite-social-item,
#splash-wrap .wsite-social-item {
background-image: url(social-icons-white.png);
}
#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 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;
}
.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;
}
/* Universal banner
--------------------------------------------------------------------------------*/
#banner {
background-color: rgba(29,29,23,0.75);
margin-bottom: 25px;
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;
}
.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);
}
.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);
}
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-wrap {
height: 100%;
display: table;
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding-bottom: 34px;
padding-top: 98px;
}
#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;
/* 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 .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;
}
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;
/* 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;
}
/* 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;