/* Resets --------------------------------------------------------------------------------*/ ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input { margin: 0; padding: 0; } ul { list-style: none; } fieldset { border: 0; } a img { border: 0; } .clear { clear: both; } /* General Styling and Structure --------------------------------------------------------------------------------*/ body { background-color: #063364; background: url(http://158430977104430755.weebly.com/uploads/1/3/2/7/13272868/3485303_orig.png); font-family: "Lucida Grande", arial, sans-serif; font-size: 12px; color: #01265a; margin: auto; padding: 0; } #wrapper { width: 970px; margin: auto; background-color: #063364; } #header { font-family: "Times New Roman", Times, serif; margin: 0 auto; margin-left: 1px; width: 948px; border-top: 6px solid #063364; border-left: 6px solid #063364; border-right: 6px solid #063364; min-height: 60px; padding: 5px 0px; margin-bottom: 10px; font-weight: bold; background: url(http://158430977104430755.weebly.com/uploads/1/3/2/7/13272868/857643_orig.png); } #logo, #logo a { font-size: 40px; font-weight: bold; color: #063364; font-family: Garamond; text-shadow: none; letter-spacing: 3px; } a { color: #01265a; text-decoration: none; } a:hover { color: #ffffff; } p { line-height: 1.5; color: #01265a; font-size: 13px; padding: .5em 0; } h1 { font-size: 24px; font-weight: bold; color: #01265a; line-height: 1.5; padding: 5px 0 5px 0; } h2 { font-family: "Lucida Grande"; font-size: 22px; color: #01265a; font-weight: normal; line-height: 1.5; padding: .3em 0; } blockquote { font-style:italic; border-left:4px solid #01265a ! important; margin:10px 0 10px 0; padding-left:20px; line-height:1.5; color:#01265a; } #banner { margin: 0 auto; width: 960px; height: auto; border: none; background-position: top center, } #content { padding: 10px; font-family: Lucida Grande; min-height: 400px; height: auto !important; border: 6px solid #063364; background: url(http://158430977104430755.weebly.com/uploads/1/3/2/7/13272868/3485303_orig.png); } /* Navigation --------------------------------------------------------------------------------*/ #navigation { font-family: "Times New Roman", Times, serif; width: 956px; height: 51px; clear: both; margin-bottom: 5px; margin-top: 10px; border: 6px solid #063364; background: url(http://158430977104430755.weebly.com/uploads/1/3/2/7/13272868/857643_orig.png) repeat-x; } #navigation li { float: left; text-transform: uppercase; height: 51px; } #navigation li a { display: inline-block; height: auto; width: auto; padding: 20px 20px 12px 20px; color: #01265a; border-left: none; font-size: 14px; font-weight: bold; text-align: center; text-decoration: none; } #navigation li a:hover { background: #8e8c8d; text-decoration: none; } #navigation li#active a { background: url() repeat-x; } /* Navigation Drop-Down Menu Customization --------------------------------------------------------------------------------*/ #wsite-menus .wsite-menu li a { border: none; border-bottom: 1px solid #D6D6D4; background: #063364; text-decoration: none; font-size: 16px; color: #D6D6D4; padding: 5px 8px 5px 12px; } #wsite-menus .wsite-menu li a:hover { background: #737272; } /* Header Area ----------------------------------------------------------------------------*/ #header { width: 100%; height: 60px; } #header, #header table { border-collapse: collapse; border-spacing: 0; } #header td { vertical-align: middle; text-align: left; } #logo { padding: 2px 0px 5px 30px; } #header-right { padding: 0 0 0 10px; } #header-right table { float: right; width: 1px; } #header-right td { padding: 0; } /* TOP RIGHT: Phone Number --------------------------------------------------------------------------------*/ #header-right .phone-number .wsite-text { color: #333333; font-size: 13px; font-family: Arial; font-weight: bold; text-decoration: none; display: block; white-space: nowrap; margin: 0 0 0 15px; } /* TOP RIGHT HEADER social-media --------------------------------------------------------------------------------*/ #header-right .social { } #header-right .wsite-social { vertical-align: middle; margin: 0 0 0 12px; } .wsite-social-item { width: 23px; height: 23px; margin: 0 0 0 3px; background-image:url(social-grey.png); } .wsite-social-facebook {background-position:0 0;} .wsite-social-facebook:hover {background-position:0 -23px;} .wsite-social-facebook:active {background-position:0 -46px;} .wsite-social-pinterest {background-position:-23px 0;} .wsite-social-pinterest:hover {background-position:-23px -23px;} .wsite-social-pinterest:active {background-position:-23px -46px;} .wsite-social-twitter {background-position:-46px 0;} .wsite-social-twitter:hover {background-position:-46px -23px;} .wsite-social-twitter:active {background-position:-46px -46px;} .wsite-social-linkedin {background-position:-69px 0;} .wsite-social-linkedin:hover {background-position:-69px -23px;} .wsite-social-linkedin:active {background-position:-69px -46px;} .wsite-social-mail {background-position:-92px 0;} .wsite-social-mail:hover {background-position:-92px -23px;} .wsite-social-mail:active {background-position:-92px -46px;} .wsite-social-rss {background-position:-115px 0;} .wsite-social-rss:hover {background-position:-115px -23px;} .wsite-social-rss:active {background-position:-115px -46px;} .wsite-social-flickr {background-position:-138px 0;} .wsite-social-flickr:hover {background-position:-138px -23px;} .wsite-social-flickr:active {background-position:-138px -46px;} .wsite-social-plus {background-position:-161px 0;} .wsite-social-plus:hover {background-position:-161px -23px;} .wsite-social-plus:active {background-position:-161px -46px;} .wsite-social-vimeo {background-position:-184px 0;} .wsite-social-vimeo:hover {background-position:-184px -23px;} .wsite-social-vimeo:active {background-position:-184px -46px;} .wsite-social-yahoo {background-position:-207px 0;} .wsite-social-yahoo:hover {background-position:-207px -23px;} .wsite-social-yahoo:active {background-position:-207px -46px;} .wsite-social-youtube {background-position:-230px 0;} .wsite-social-youtube:hover {background-position:-230px -23px;} .wsite-social-youtube:active {background-position:-230px -46px;} /* TOP RIGHT HEADER search box --------------------------------------------------------------------------------*/ #header-right .search { clear: none; } #header-right .wsite-search { vertical-align: middle; margin: 0 0 0 15px; } #header-right .wsite-search-input { width: 129px; height: 26px; border: none; font-size: 12px; padding: 0 7px 0 7px !important; background: url(input-bg.png) no-repeat; } #header-right .wsite-search-button { width: 62px; height: 26px; border: none; cursor: pointer; position: relative; background: url(submit.png) no-repeat; } /* PAGE TYPE: tall-header-page --------------------------------------------------------------------------------*/ .tall-header-page .wsite-header { width: 960px; height: 576px; background: url(http://i1152.photobucket.com/albums/p489/malacka1/ban1anim2960_zpsbea0a603.gif) top center no-repeat ; } /* PAGE TYPE: landing-page --------------------------------------------------------------------------------*/ #bannerleft { float: left; width: 518px; height: 291px; background: url() no-repeat; } .landing-page .wsite-header { width: 518px; height: 291px; background: url() no-repeat; } #bannerright { float: left; width: 368px; height: 241px; background: transparent; padding: 50px 35px 0 35px; } #banner #bannerright h2 { color: #01265a; margin: 0; text-align: left; font-size: 26px; font-family: Arial; padding: 0 !important; font-weight: bold; } #banner #bannerright p { color: #01265a; font-size: 14px; font-family: Arial; text-align: left; padding: 14px 0 0 0; } #bannerright .wsite-button { margin: 30px 0 0 0; } /* PAGE TYPE: short-header-page --------------------------------------------------------------------------------*/ .short-header-page .wsite-header { width: 956px; height: 131px; background: url() no-repeat; } /* PAGE TYPE: splash --------------------------------------------------------------------------------*/ .splash-page #wrapper { width: 600px; padding: 0; margin: 0 auto; } .splash-page #header { width: 600px; } .splash-page #banner { width: 596px; border-bottom: none; } .splash-page .wsite-header { width: 596px; height: 131px; background: url() no-repeat; } .splash-page #content { width: 600px; padding: 25px 0 35px 0; } .splash-page #footer { width: 600px; } /* Footer --------------------------------------------------------------------------------*/ #footer { width: 960px; margin: 0 auto; background: url(http://158430977104430755.weebly.com/uploads/1/3/2/7/13272868/857643_orig.png); color: #01265a; font-size: 14px; clear: both; border-top: none; padding: 11px 0 20px 0; text-align: right; margin-top:10px; padding-top:25px; } #footer blockquote { font-size:14px; } .wsite-footer { /* make sure enough space between element footer and attribution */ margin-bottom: 15px; } #footer h2 { font-size:17px; border-bottom:none; } /* Footer Form Customization --------------------------------------------------------------------------------*/ .wsite-form-container { margin-top:0px !important; text-align:left !important; } .wsite-footer .wsite-form-label { font-size: 1em !important; padding: 5px 0 2px 0 !important; } .wsite-footer .wsite-form-field { width:330px !important; } .wsite-footer .form-radio-container { font-size:1em !important; } .wsite-footer .wsite-form-input { font-size: 1em !important; width: 100% !important; } .wsite-footer .form-select { width: 100% !important; } /* Form Customization --------------------------------------------------------------------------------*/ .wsite-form-label { display: inline-block; color: #01265a; font-size: 13px; font-weight: bold; padding: 10px 0 8px 0; } .form-radio-container { color: #01265a; font-size: 13px; } .wsite-form-input, .wsite-search-element-input { background: #c6c5c3; color: #01265a; border: 1px solid #d2d2d2; border-radius: 3px; font-size:12px; } .form-select { width: 380px; color: #01265a; background: #c6c5c3; border: 1px solid #01265a; border-radius: 3px; } /* Buttons --------------------------------------------------------------------------------*/ /* Buttons are styled with background image sprites. There are 4 unique image files: - small & normal-colored (button_small_grey.png) - large & normal-colored (button_large_grey.png) - small & highlight-colored (button_small_orange.png) - large & highlight-colored (button_large_orange.png) Each of these 4 types of buttons must define a :hover state (when user's mouse is over) as well as an :active state (when the user presses down). Look at the CSS (especially the inner .wsite-button-inner wrapper), as well as the image files to understand how the liquid-width nature of these buttons work. */ /* small */ .wsite-button { color: #b5b3b4 !important; height: 34px; display: inline-block; font-size: 12px; border: none; font-weight: bold; text-decoration: none; text-transform: uppercase; padding: 0 10px 0 0; background: url() no-repeat 100% -105px; background-color: #063364; text-shadow:0 -1px 1px rgba(0,0,0,0.9); -moz-box-shadow: 0px 0px 6px x000000; -webkit-box-shadow: 0px 0px 6px #000000; box-shadow: 0px 0px 6px #000000; } .wsite-button:hover { background-position: 100% -140px; } .wsite-button:active { background-position: 100% -175px; } .wsite-button-inner { color: #b5b3b4 !important; height: 34px; line-height: 34px; display: block; font-size: 12px; font-weight: bold; border: none; text-decoration: none; padding: 0 10px 0 20px; background: url() no-repeat 0 0; background-color: #063364; } .wsite-button:hover .wsite-button-inner { background-position: 0 -35px; } .wsite-button:active .wsite-button-inner { background-position: 0 -70px; } /* large */ .wsite-button-large { height: 41px; background: url() no-repeat 100% -126px; padding: 0 10px 0 0; background-color: #063364; -moz-box-shadow: 0px 0px 6px x000000; -webkit-box-shadow: 0px 0px 6px #000000; box-shadow: 0px 0px 6px #000000; } .wsite-button-large:hover { background-position: 100% -168px; } .wsite-button-large:active { background-position: 100% -210px; } .wsite-button-large .wsite-button-inner { height: 41px; line-height: 41px; padding: 0 10px 0 20px; background: url() no-repeat 0 0; background-color: #063364; } .wsite-button-large:hover .wsite-button-inner { background-position: 0 -42px; } .wsite-button-large:active .wsite-button-inner { background-position: 0 -84px; } /* highlight */ /* Making the highlighted versions of the buttons is easy because we just need to switch out the background images. This works because the different button states (normal, :hover, :active) have their sprite coordinates in the same places. */ .wsite-button-large.wsite-button-highlight { background-image: url(); background-color: #063364; -moz-box-shadow: 0px 0px 6px x000000; -webkit-box-shadow: 0px 0px 6px #000000; box-shadow: 0px 0px 6px #000000; } .wsite-button-large.wsite-button-highlight .wsite-button-inner { background-image: url(); background-color: #063364; } .wsite-button-highlight { background-image: url(); background-color: #063364; } .wsite-button-highlight .wsite-button-inner { background-image: url(); background-color: #063364; }