Selasa, 07 Juli 2015
/* 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: Helvetica, Arial, sans-serif;
font-size: 12px;
background:#0f1118;
}
#top-wrap {
background: url(header-bg-repeat-blue.jpg) repeat-x top;
}
.container {
margin: 0 auto;
width: 960px;
}
#top-wrap,
#top-wrap-inner,
#header-wrap,
#banner-wrap,
#nav-wrap,
#main-wrap,
#copyright-wrap,
#footer-wrap
{
width:100%;
}
#top-wrap-inner {
min-height:399px;
}
a {
color:#fff ;
}
a:hover {
color:#bcbcbc ;
}
h2 {
font-size:18px ;
padding: .5em 0 .2em 0;
line-height: 1.2;
font-family: 'Capriola', sans-serif;
color:#2a2a2a ;
text-transform:uppercase;
text-shadow: 1px 0px 0px #fff#;
}
p {
line-height: 1.5;
padding: .5em 0;
}
div#content {min-height:400px;}
/* Header
--------------------------------------------------------------------------------*/
#header-wrap {
background:url(header-bg-blue.jpg) no-repeat top center;
height:29px;
padding-top:14px;
padding-bottom:2px;
}
#logo-wrap {
background: url(body-bg.jpg) center repeat;
}
#logo-wrap .container{
background:url(logo-bg-blue.png) repeat-y top left;
position:relative;
}
#logo-wrap #logo-bottom {
background:url(logo-bottom-blue.png) no-repeat top left;
height:38px;
position:absolute;
bottom:-22px;
width:100%;
}
.wsite-logo, .wsite-logo a {
font-family: 'Capriola', sans-serif;
font-size:32px;
font-weight:bold;
text-shadow: 0px 1px 0px rgba(0,0,0,0.89);
text-transform:uppercase;
display:block;
color:#c9d9ef;
}
.wsite-logo {
padding:0 27px;
}
#logo {
position:relative;
top:-18px;
}
/* Header: Phone Number
--------------------------------------------------------------------------------*/
#header-wrap .phone-number {
float:right;
background:url(phone-bg.png) repeat-x ;
border-radius:3px;
padding:4px 8px 3px;
margin-right:9px;
}
#header-wrap .phone-number .wsite-text {
color: #a7c2d2;
display: block;
white-space: nowrap;
line-height:17px;
}
/* Header: Social Links
--------------------------------------------------------------------------------*/
#header-wrap .wsite-social {
float:left;
background:url(phone-bg.png) repeat-x ;
border-radius:3px;
padding:3px 0;
margin-left:9px;
}
.wsite-social-item {
width: 20px;
height: 20px;
margin: 0 2px;
background-image:url(social-no-container-blue.png);
}
#main-wrap .wsite-social-item {
background-image:url(social-dark.png);
}
.wsite-social-facebook {background-position:0 0;}
.wsite-social-facebook:hover {background-position:0 -20px;}
.wsite-social-facebook:active {background-position:0 -40px;}
.wsite-social-pinterest {background-position:-20px 0;}
.wsite-social-pinterest:hover {background-position:-20px -20px;}
.wsite-social-pinterest:active {background-position:-20px -40px;}
.wsite-social-twitter {background-position:-40px 0;}
.wsite-social-twitter:hover {background-position:-40px -20px;}
.wsite-social-twitter:active {background-position:-40px -40px;}
.wsite-social-linkedin {background-position:-60px 0;}
.wsite-social-linkedin:hover {background-position:-60px -20px;}
.wsite-social-linkedin:active {background-position:-60px -40px;}
.wsite-social-mail {background-position:-80px 0;}
.wsite-social-mail:hover {background-position:-80px -20px;}
.wsite-social-mail:active {background-position:-80px -40px;}
.wsite-social-rss {background-position:-100px 0;}
.wsite-social-rss:hover {background-position:-100px -20px;}
.wsite-social-rss:active {background-position:-100px -40px;}
.wsite-social-flickr {background-position:-120px 0;}
.wsite-social-flickr:hover {background-position:-120px -20px;}
.wsite-social-flickr:active {background-position:-120px -40px;}
.wsite-social-plus {background-position:-140px 0;}
.wsite-social-plus:hover {background-position:-140px -20px;}
.wsite-social-plus:active {background-position:-140px -40px;}
.wsite-social-vimeo {background-position:-160px 0;}
.wsite-social-vimeo:hover {background-position:-160px -20px;}
.wsite-social-vimeo:active {background-position:-160px -40px;}
.wsite-social-yahoo {background-position:-180px 0;}
.wsite-social-yahoo:hover {background-position:-180px -20px;}
.wsite-social-yahoo:active {background-position:-180px -40px;}
.wsite-social-youtube {background-position:-200px 0;}
.wsite-social-youtube:hover {background-position:-200px -20px;}
.wsite-social-youtube:active {background-position:-200px -40px;}
/* Header: Search Box
--------------------------------------------------------------------------------*/
#nav-wrap table {
margin-left: 13px;
margin-top:14px;
width:97%;
}
#nav-wrap table td {
vertical-align: top;
}
#nav-wrap table td.search {
padding-top:7px;
}
#nav-wrap .wsite-search-input {
width:138px ;
border:none ;
height:20px;
font-family:Helvetica, sans-serif;
color: #a7c2d2;
font-size:12px ;
background:url(search-left-blue.png) no-repeat top left ;
}
#nav-wrap .wsite-search-button {
position: relative;
width: 28px;
height:26px ;
border: none;
background:url(search-right-blue.png) no-repeat top left ;
}
/* Navigation
--------------------------------------------------------------------------------*/
#nav-wrap {
background:url(nav-bg-blue.png) no-repeat top center;
height:57px;
}
#nav-wrap .nav div {
background:url(nav-list-corner-blue.png) no-repeat 0px 2px;
float:right;
display:block;
}
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
}
#nav-wrap .nav ul {
background:url(nav-list-bg-blue.png) repeat-x 0px 2px;
list-style: none;
float: left;
margin-left:9px;
}
#nav-wrap .container ul li {
list-style: none;
float:left ;
display: block;
}
#nav-wrap .container ul li a {
display: block;
color: #c9d9ef ;
padding: 0px 16px ;
border: 0;
outline: 0;
list-style-type: none;
height:37px;
line-height:37px;
font-family: 'Capriola', sans-serif;
font-size:12px;
font-weight:bold;
text-shadow: 0px -1px 0px #2b424f;
text-transform:uppercase;
}
#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
background: url(nav-active-bg-blue.png) repeat-x;
border: 0;
}
/* Navigation Submenu's
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu {
background:#5b829a;
padding-bottom:8px;
}
#wsite-menus .wsite-menu li a {
color: #c9d9ef ;
font-family: 'Capriola', sans-serif;
font-size:12px;
font-weight:bold;
text-shadow: 1px 0px 0px #161616;
background: #3d5e71;
border: 0;
border-right:7px solid #42667a;
border-bottom:1px solid #647e8d;
border-top:1px solid #314b5a;
}
#wsite-menus .wsite-menu li:first-child a {
border-top:none;
}
#wsite-menus .wsite-menu li a:hover {
background: #0e1f29;
border-right:7px solid #102530;
}
/* Page type: Tall header
--------------------------------------------------------------------------------*/
#banner-wrap {
background:url(banner-bg-blue.png) no-repeat bottom center;
width:100%;
height:276px;
padding-top:57px;
position:relative;
}
#banner-top {
background:url(banner-top-blue.png) no-repeat top center;
height:57px;
width:100%;
position:absolute;
top:0px;
left:0px;
z-index:1;
}
.tall-header-page .wsite-header {
width: 926px;
height: 250px;
background: url(banner-tall.jpg) no-repeat;
margin-left: 17px;
position: relative;
top: -5px;
}
/* Page type: Short header
--------------------------------------------------------------------------------*/
.short-header-page #top-wrap {
background: url(header-short-bg-repeat-blue.jpg) repeat-x top;
}
.short-header-page #banner-wrap {
background:url(banner-short-bg-blue.png) no-repeat bottom center;
height:197px;
}
.short-header-page .wsite-header {
width: 926px;
height: 173px;
background: url(banner-short.jpg) no-repeat;
margin-left: 17px;
position: relative;
top: -5px;
}
/* Page type: No header
--------------------------------------------------------------------------------*/
.no-header-page .wsite-header {
display:none;
}
.no-header-page #top-wrap {
background: url(header-no-bg-repeat-blue.jpg) repeat-x top;
}
.no-header-page #top-wrap-inner {
min-height:100px;
}
.no-header-page #banner-wrap {
background:url(nav-top-blue.png) no-repeat bottom center;
width:100%;
height:46px;
padding-top:0px;
position:relative;
}
.no-header-page #banner-top {
display:none;
}
/* Page type: Landing page
--------------------------------------------------------------------------------*/
.landing-page #banner {
background: none;
padding: 0;
}
#bannerleft {
float: left;
width: 531px;
margin-left: 17px;
position: relative;
top: -5px;
}
.landing-page .wsite-header {
width: 531px;
height: 250px;
background: url(banner-landing.jpg) no-repeat;
}
.landing-banner-outer {
display: table;
#position: relative;
overflow: hidden;
}
.landing-banner-mid {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
.landing-banner-inner {
#position: relative;
#top: -50%;
}
#bannerright {
float: left;
width: 316px;
height: 250px;
padding: 0 40px;
background:url(banner-landing-copy.jpg) no-repeat;
position: relative;
top: -5px;
}
#bannerright h2 {
color: #fff;
font-size: 24px;
font-weight:bold;
padding: 0px;
line-height: 24px;
}
#bannerright p {
color: #b9b9b9;
font-size: 13px;
margin: 0px;
padding: 20px 0px;
line-height: 140%;
}
#bannerright a:hover {
color:#888;
}
/* Main Content
--------------------------------------------------------------------------------*/
#main-wrap {
background: url(body-bg.jpg) center repeat;
padding-top:10px;
margin-top:-10px;
margin-top:0px;
}
#main-wrap .container {
margin-top:25px;
padding:0px 0px 50px;
width:942px;
color:#515151;
font-size:12px;
font-family:Arial, Helevatica, sans-serif;
}
#main-wrap .container h2 {
background:url(heading-border-blue.png) no-repeat bottom left;
padding-bottom:10px;
margin-bottom:10px;
color:#232a3a;
}
#main-wrap .container a {
color: #999;
}
#main-wrap .container a:hover {
color: #000000;
}
#main-wrap .container .paragraph ul {
padding-left:0px !important;
margin:15px 0 !important;
}
#main-wrap .container .paragraph ul li {
list-style:none !important;
background:url(bullet-blue.png) no-repeat 0px 4px;
padding-left:20px !important;
color:#3f5784;
}
blockquote {
background:#2f3746 url(blockquote-bg-blue.gif) repeat-y top left;
-webkit-border-radius: 5px;
border-radius: 5px;
color:#b4fcfc;
font-size:13px;
border-left:none;
font-family:Arial, Helevatica, sans-serif;
padding:15px 30px 15px 22px;
font-style:italic;
line-height:1.5;
margin:25px 0px;
}
#main-wrap .container form .wsite-button {
margin-top:20px;
}
.blog-post p.blog-date, .blog-post p.blog-comments {
margin-top:8px !important;
}
/* Copyright
--------------------------------------------------------------------------------*/
#copyright-wrap {
background:url(copyright-bg.jpg) repeat-x;
height: 32px;
padding-top: 25px;
font-size:11px;
color:#474848;
text-shadow: 1px 1px 1px #fff;
}
#copyright-wrap .container{
width:942px;
}
/* Footer
--------------------------------------------------------------------------------*/
#footer-wrap {
background:#0f1118 url(footer-bg-blue.gif) repeat-x top;
padding:20px 0px 25px;
text-align:right;
}
#footer-wrap .container {
font-size:12px;
width:942px;
color:#747983;
}
#footer-wrap blockquote {font-size:11px; line-height:1.5;}
#footer-wrap .container a {
color:#a8b8c4;
}
#footer-wrap .container a:hover {
color:#fff;
}
#footer-wrap hr {background:#2B2F38 !important;}
#footer-wrap .container h2 {
color:#a8b8c4;
font-size:12px;
border-bottom:1px solid #2b2f38;
margin-top: 10px;
padding-bottom:10px;
}
#footer-wrap .container .wsite-form-container {
text-align:left !important;
margin-top:0 !important;
}
#footer-wrap .container .wsite-form-container h2 {
font-size:14px;
padding:4px 0 10px;
}
#footer-wrap .wsite-form-input, #footer-wrap .wsite-search-element-input {
background:#242831;
border:1px solid #393e46;
border-radius:5px;
color:#747983;
}
#footer-wrap .wsite-search-element-submit {
background: url(search-dark.png) left;
}
/* Form Customization
--------------------------------------------------------------------------------*/
.wsite-form-label {
display: inline-block;
font-weight:normal;
margin:10px 0px 5px;
}
.wsite-form-input, .wsite-search-element-input {
color: #48382d;
background: #fff;
border: 1px solid #c7c7c7;
-webkit-box-shadow: inset 0px 1px 1px 1px rgba(0, 0, 0, .1);
box-shadow: inset 0px 1px 1px 1px rgba(0, 0, 0, .1);
border-radius:5px;
padding:7px 5px !important;
font-size:12px;
}
/* Buttons
--------------------------------------------------------------------------------*/
/* Small structure & regular style */
.wsite-button {
height: 26px;
display: inline-block;
padding:0px 15px 0px 0px ;
background: url(button-dark-blue.png) no-repeat 100% -83px;
}
.wsite-button:hover {
background-position: 100% -111px;
}
.wsite-button:active {
background-position: 100% -139px;
}
.wsite-button-inner {
color: #fff !important;
height: 26px;
line-height:26px ;
display: block;
font-family: 'Capriola', sans-serif;
font-size:12px;
font-weight:bold;
text-shadow: 0 -1px 0 #161616;
text-transform:uppercase;
padding: 0px 0px 0px 15px;
background: url(button-dark-blue.png) no-repeat 0px 0px;
}
.wsite-button:hover .wsite-button-inner {
background-position: 0px -28px;
}
.wsite-button:active .wsite-button-inner {
background-position: 0px -56px;
}
/* Large structure & regular style */
.wsite-button-large {
color: #fff !important;
height: 32px;
background: url(button-dark-large-blue.png) no-repeat 100% -102px;
padding: 0px 15px 0px 0px ;
}
.wsite-button-large:hover {
background-position: 100% -136px ;
}
.wsite-button-large:active {
background-position: 100% -170px ;
}
.wsite-button-large .wsite-button-inner {
height: 32px;
line-height:32px ;
padding:0px 2px 0px 17px ;
font-family: 'Capriola', sans-serif;
font-size:12px;
font-weight:bold;
text-shadow: 0 -1px 0 #161616;
text-transform:uppercase;
background: url(button-dark-large-blue.png) no-repeat 0px 0px;
}
.wsite-button-large:hover .wsite-button-inner {
background-position: 0px -34px;
}
.wsite-button-large:active .wsite-button-inner {
background-position: 0px -68px ;
}
/* Highlighted styles */
.wsite-button-highlight {
background-image: url(button-white-blue.png);
}
.wsite-button-highlight .wsite-button-inner {
background-image: url(button-white-blue.png);
color:#4e5f7f !important;
text-shadow: 0 1px 0 rgba(255,255,255,1);
}
.wsite-button-large.wsite-button-highlight {
background-image: url(button-white-large-blue.png);
}
.wsite-button-large.wsite-button-highlight .wsite-button-inner {
background-image: url(button-white-large-blue.png);
color:#4e5f7f !important;
}
Langganan:
Komentar (Atom)