/* General Styling and Structure --------------------------------------------------------------------------------*/ h3 { font-size: 20px; margin: 0 0 10px 0; } a { text-decoration: none; color: #C6949F; } a:hover { color: #ffffff; } a img { border: 0; } body { margin: 0 auto; padding-top: 0px; font-family: Monotype Corsiva; font-size: 22px; color: #C6949F; background: #0B0100 url(http://i1152.photobucket.com/albums/p489/malacka1/BAN2_zps853141e3.jpg) top center no-repeat; } h2, h3 { font-size: 22px; margin: 0; padding: .3em 0; line-height: 1.2em; font-family: Monotype Corsiva; font-weight: 400; color: #C6949F; border: none; padding: 10px; } p { font-size: 20px; line-height: 1.5; margin: 0; padding: .5em 0; } blockquote { font-style:italic; border-left:4px solid #C6949F ! important; margin:10px 0 10px 0; padding-left:20px; line-height:1.5; color:#C6949F; } hr { background: #C6949F ! important; } #content p { color: #C6949F; font-size: 20px; border: none; padding: 10px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #container { margin: 0 auto; width: 1000px; } #header { clear: both; padding: 0 0 0 22px; border-bottom: none; margin-bottom: 26px; } .wsite-logo, .wsite-logo a { color: #C6949F; margin: 0; padding: 0; text-decoration: none; } .wsite-logo, .wsite-logo a:hover { color: #ffffff; } #header .wsite-logo { font-size: 48px; color: #C6949F; font-family: Monotype Corsiva; margin: 0; font-weight: 200; padding: 0; -webkit-text-stroke-width: 0.2px; } #header-right a { color: #C6949F; } #header-right a:hover { color: #ffffff; } /* Header Area -------------------------------------------------------------*/ #header { width: 100%; height: auto; } #header, #header table { border-collapse: collapse; border-spacing: 0; } #header td { vertical-align: middle; text-align: left; } #logo { padding: 15px 20px; } #header-right { padding: 0 0 0 10px; } #header-right table { width: 1px; } #header-right table, #header-right .search, #header-right .wsite-search { clear: right; float: right; } #header-right td { padding: 0; } /* TOP RIGHT: Phone Number --------------------------------------------------------------------------------*/ #header-right .phone-number .wsite-text { color: #C6949F; font-size: 15px; font-weight: normal; font-family: Monotype Corsiva; display: block; white-space: nowrap; margin: 5px 0 5px 15px; } /* TOP RIGHT: Content Area --------------------------------------------------------------------------------*/ #header-right .wsite-social { vertical-align: middle; margin: 5px 0 5px 10px; } .wsite-social-item { width: 23px; height: 23px; margin: 0 0 0 3px; background-image:url(social-black.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: Search Box --------------------------------------------------------------------------------*/ #header-right .search { } #header-right .wsite-search { margin: 5px 0 5px 15px; vertical-align: middle; } #header-right .wsite-search-input { width: 177px; height: 14px; border: none; padding: 10px 10px 8px !important; color: #C6949F; font-size: 12px; font-family: Geprgia; background: url(input-bg.png) no-repeat; } #header-right .wsite-search-button { width: 23px; height: 32px; border: none; margin: 0; padding: 0; background: url(submit-bg.png) no-repeat; } /* side-nav --------------------------------------------------------------------------------*/ #avmenu { clear: both; float: right; width: 241px; margin: 0 auto; margin-top: -30px; padding: 0; font-size: 20px; } #avmenu ul { list-style: none; width: 241px; margin: 0; padding: 0; } #avmenu li { list-style: none; } #avmenu li a { font-weight: 300; line-height: 1; text-decoration: none; color: #C6949F; font-family: Monotype Corsiva; font-size: 20px; display: block; padding: 11px 5px 11px 22px; border-bottom: none; background: #0B0100; text-align: center; } #avmenu ul > li:last-child a, #avmenu ul > span:last-child li a { border-bottom: none; } #avmenu li#active a, #avmenu a:hover { color: #C6949F; background: #0B0100; text-decoration: underline; text-align: center; } /* Navigation Drop-Down Menu Customization --------------------------------------------------------------------------------*/ #wsite-menus .wsite-menu { position: relative; top: -1px; border-top: 1px solid #C6949F; } #wsite-menus .wsite-menu li a { padding: 6px 5px 7px 25px; background: #0B0100; border: none; line-height: 18px; border-bottom: 1px solid #C6949F; text-decoration: none; font-family: Monotype Corsiva; font-weight: 400; color: #C6949F; font-size: 20px; } #wsite-menus .wsite-menu li a:hover { color: #ffffff; background: #0B0100; } /* main --------------------------------------------------------------------------------*/ #main-wrap { } #main { float: right; width: 1000px; margin: 0 auto; } #content { margin: 0 auto; margin-left: 10px; padding: 15px 0; width: 980px; min-height: 350px; overflow-x: visible !important; overflow-x: hidden; background: #0B0100; } #banner { } .tall-header-page .wsite-header { width: 681px; height: 520px; background: url() no-repeat; } /* PAGE TYPE: banner-tall --------------------------------------------------------------------------------*/ .short-header-page .wsite-header { width: 681px; height: 480px; background: url() no-repeat; } /* TOP RIGHT: banner-landing --------------------------------------------------------------------------------*/ .landing-page #banner { background: #0B0100; } #bannerleft { clear: left; float: right; width: 381px; } .landing-page .wsite-header { width: 381px; height: 313px; background: url() no-repeat; } #bannerright { float: left; width: 214px; padding: 30px 50px 0 30px; } #bannerright h2 { color: #C6949F; font-size: 28px; font-weight: normal; } #bannerright p { color: #C6949F; padding-bottom: 25px; margin: 0; } #bannerright .wsite-button { margin: 0; } /* TOP RIGHT: banner-short --------------------------------------------------------------------------------*/ .very-tall-header-page .wsite-header { width: 760px; height: 225px; background: url() no-repeat; } /* PAGE TYPE: nobanner --------------------------------------------------------------------------------*/ .no-header-page #banner { height: auto; padding: 0; display: none; } .no-header-page #content { padding-top: 0; background: #0B0100; width: 830px; margin: 0 auto; margin-left: 10px; margin-top: -200px; } /* PAGE TYPE: banner-splash --------------------------------------------------------------------------------*/ .splash-page { margin: 0 auto; padding: 0; background: #0B0100 url() top center repeat-y; } .splash-page #header { width: 570px; } .splash-page #header-right { float: right; padding-right: 8px; } .splash-page #banner { width: 560px; height: 115px; border: none; padding: 5px 0 0 0; } .splash-page .wsite-header { width: 560px; height: 115px; border: none; background: url() no-repeat; } .splash-page #wrap { width: 560px; padding: 0 10px 0 10px; } .splash-page #content { width: 538px; } .splash-page #footer { width: 560px; } /* Footer --------------------------------------------------------------------------------*/ #footer { margin: 0 auto; margin-left: 10px; width: 960px; clear: both; padding: 10px 10px 0px 10px; color: #C6949F; font-size: 18px; font-family: Monotype Corsiva; border-top: 1px solid #C6949F; text-align: right; background: #0B0100; } #footer p { color: #C6949F; } #footer a { color: #C6949F; } #footer a:hover { color: #fff; } #footer span { vertical-align: middle; } #footer h2, h3 { font-size: 20px; margin: 0 0 2px; padding: .2em 0; line-height: 1.5; font-family: Monotype Corsiva; font-weight: 400; color: #C6949F; border: none; } .wsite-footer { /* make sure enough space between element footer and attribution */ margin-bottom: 15px; } /* footer-links --------------------------------------------------------------------------------*/ #footer .wsite-social { vertical-align: middle; } #footer .wsite-social-item { width: 23px; height: 23px; } #footer .wsite-social-rss { background: url(rss.png) no-repeat; } #footer .wsite-social-linkedin { background: url(linkedin.png) no-repeat; } #footer .wsite-social-facebook { background: url(facebook.png) no-repeat; } #footer .wsite-social-twitter { background: url(twitter.png) no-repeat; } /* Form Customization --------------------------------------------------------------------------------*/ .wsite-form-label { display: inline-block; color: #C6949F; font-family: Monotype Corsiva; font-size: 1em; padding: 12px 0 5px 0; } .form-radio-container { color: #C6949F; font-size: 1em; font-family: Arial, Helvetica, sans-serif; } .wsite-form-input, .wsite-search-element-input { font-family: Arial, Helvetica, sans-serif; font-size: 1em; color: #C6949F; background: #0B0100 url() repeat-x !important; border: 1px solid #C6949F; padding: 7px 4px 6px !important; line-height: 1; /* background:url#0C0D08 (); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; */ } .form-select { color: #C6949F; border: 1px solid #C6949F; font-size: 1em; font-family: Arial, Helvetica, sans-serif; padding: 3px 4px; width: 320px; height: 27px; line-height: 27px; background: #0B0100 url() repeat-x; /* -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; */ } /* Footer Form Customization --------------------------------------------------------------------------------*/ .wsite-form-container { margin-top:0px !important; text-align:left; } .wsite-footer .wsite-form-label { font-size: 1em; padding: 5px 0 2px 0; } .wsite-footer .wsite-form-field { width:300px !important; } .wsite-footer .form-radio-container { font-size:1em; } .wsite-footer .wsite-form-input { font-size: 1em; width: 100% !important; } .wsite-footer .form-select { width: 100%; } /* 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: #C6949F !important; font-family: Monotype Corsiva; height: 34px; display: inline-block; font-size: 20px; border: none; font-weight: normal; text-decoration: none; padding: 0 15px 0 0; background: url(http://i1152.photobucket.com/albums/p489/malacka1/button_zpse3c381b9.png) no-repeat 100% -105px; text-shadow:0 -1px 0 rgba(0,0,0,0.9); } .wsite-button:hover { background-position: 100% -140px; } .wsite-button:active { background-position: 100% -175px; } .wsite-button-inner { height: 34px; line-height: 34px; display: block; font-size: 20px; font-weight: normal; border: none; text-decoration: none; padding: 0 10px 0 25px; background: url(http://i1152.photobucket.com/albums/p489/malacka1/button_zpse3c381b9.png) no-repeat 0 0; } .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(http://i1152.photobucket.com/albums/p489/malacka1/button_large_zps839dce22.png) no-repeat 100% -126px; padding: 0 15px 0 0; } .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 25px; background: url(http://i1152.photobucket.com/albums/p489/malacka1/button_large_zps839dce22.png) no-repeat 0 0; } .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(http://i1152.photobucket.com/albums/p489/malacka1/button_large_highlight_zpsd8b3cfc5.png); } .wsite-button-large.wsite-button-highlight .wsite-button-inner { background-image: url(http://i1152.photobucket.com/albums/p489/malacka1/button_large_highlight_zpsd8b3cfc5.png); } .wsite-button-highlight { background-image: url(http://i1152.photobucket.com/albums/p489/malacka1/button_highlight_zpsaa939425.png); } .wsite-button-highlight .wsite-button-inner { background-image: url(http://i1152.photobucket.com/albums/p489/malacka1/button_highlight_zpsaa939425.png); }