Beste mensen,
Ik heb een probleem bij de CSS van mij website.
De footer is onderaan de pagina gepostioneerd maar een kleine strook van de background komt er onder vandaan.
Hoe los ik dit op?
De code ziet er als volgt uit:
/* 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;
font-size: 0;
height: 0;
}
a {
color: #446d96;
text-decoration: none;
}
a:hover {
color: #608ebd;
text-decoration: none;
}
/* General Styling and Structure
--------------------------------------------------------------------------------*/
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #666666;
margin: 0;
padding: 0;
min-height: 100%;
position: relative;
background: #9f9f9f url(atletiekbaanl.jpg) repeat-x;
}
p {
line-height: 1.5;
padding: .5em 0;
}
h1,
h2,
h3,
h4 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
}
h1 {
font-size: 30px;
line-height: 1;
color: #fff;
}
h2,
h3 {
line-height: 1.3;
padding: .3em 0;
color: #333;
}
h4 {
font-size: 14px;
line-height: 1.2;
margin-bottom: 5px;
}
blockquote {
font-style:italic;
border-left:4px solid #ddd;
margin:10px 0 10px 0;
padding-left:20px;
line-height:1.5;
color:#888;
}
#header-wrap,
#banner-wrap,
#navigation-wrap,
#main-wrap,
#footer-wrap {
min-width: 960px;
height: 100%;
}
#header,
#banner,
#navigation,
#main,
#footer {
width: 960px;
margin: auto auto 0;
}
#header-wrap {
background: #3b67fb;
background: url(body-bgcopy.png) repeat-x top;
}
#header-top {
width: 960px;
margin: 0 auto;
}
#logo,
#logo a {
text-decoration: none;
font-size: 28px;
color: #333333;
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
}
/* Navigation
--------------------------------------------------------------------------------*/
#navigation-wrap {
background-color: ##0e71bf;
min-height: 15px;
}
#navigation {
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 1;
background: none;
}
#navigation ul {
}
#navigation li {
float: left;
position: relative;
padding: 0;
margin: 0 15px 0 0;
}
#navigation li a {
float: left;
display: block;
color: #fff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 15px 12px;
margin: 0;
border: 0;
outline: 0;
}
#navigation li:hover a,
#navigation li#active a {
color: #ffffff;
background: #1189d5; color="#db0000""#3b67fb"color="#1397e1" color="#0e71bf"
}
/* Navigation Drop-Down Menu Customization
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu li a {
padding: 8px;
color: #fff;
background: #9f9f9f;
border: 0;
border-bottom: 1px solid #3b67fb;
}
#wsite-menus .wsite-menu li a:hover {
color: #fff;
background: #1189d5;
}
/* Header Area
----------------------------------------------------------------------------*/
#header {
width: 100%;
height: 90px;
}
#header,
#header table {
border-collapse: collapse;
border-spacing: 0;
}
#header td {
vertical-align: middle;
text-align: left;
}
#logo {
padding: 25px 0 25px 10px;
}
#header-right {
padding: 0 10px 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;
text-align: right;
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
display: block;
white-space: nowrap;
margin: 0 0 0 10px;
}
/* TOP RIGHT: Content Area
--------------------------------------------------------------------------------*/
#header-right .wsite-social {
vertical-align: middle;
margin: 0 0 0 12px;
}
.wsite-social-item {
width: 20px;
height: 20px;
margin: 0 0 0 3px;
background-image:url(social-midgrey.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;}
/* TOP RIGHT: Search Box
--------------------------------------------------------------------------------*/
#header-right .search {
}
#header-right .wsite-search {
margin: 0 0 0 15px;
vertical-align: middle;
width: 205px;
height: 26px;
background: transparent url(searchForm-bg.png) no-repeat;
}
#header-right .wsite-search-input {
width: 150px;
height: 12px;
border: 0;
padding: 7px 10px 7px !important;
background: none;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
vertical-align: middle;
font-size: 12px;
}
#header-right .wsite-search-button {
vertical-align: middle;
width: 35px;
height: 26px;
border: 0;
margin: 0;
padding: 0;
cursor: pointer;
font-size: 0;
background: none;
}
/* Footer
--------------------------------------------------------------------------------*/
#footer-wrap {
background: #9f9f9f;
background: url(body-bg.png) repeat-x;
margin: 0;
}
#footer {
padding: 25px 20px 40px;
margin-top: 0px;
margin-bottom: -20px;
height:73px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #666666;
font-size: 12px;
border: none;
text-align: right;
}
#footer-right {
float: right;
width: 240px;
text-align: right;
display: none;
}
.rights {
line-height: 19px;
vertical-align: middle;
}
.wsite-footer { /* make sure enough space between element footer and attribution */
margin-bottom: 0px;
}
#footer h2 {
font-size:16px;
color:#555;
border-bottom:1px solid #ccc;
}
/* 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:575px !important;
}
.wsite-footer .form-radio-container {
font-size:1em !important;
}
.wsite-footer .wsite-form-input, .wsite-footer .wsite-search-element-input {
font-size: 1em !important;
width: 100% !important;
background-color:#fff;
}
.wsite-footer .form-select {
width: 100% !important;
background-color:#fff;
}
/* main contents styles
--------------------------------------------------------------------------------*/
#main-wrap {
background: #FFFFFF;
}
#main {
padding: 0;
}
#banner-wrap {
background: #0f325c url(banner-wrap.png) repeat-x;
padding: 0px 0;(!25)
border-top: 1px solid #98999b;
border-bottom: 1px solid #98999b;
}
#banner {
position: relative;
}
#banner-detail,
#bannerleft {
border: 1px solid #989c9b;
margin: 1px;
}
.wsite-header {
}
#content {
min-height: 400px;
padding: 25px 18px;
background: #fff;
}
/* PAGE TYPE: tall-header
--------------------------------------------------------------------------------*/
.tall-header-page .wsite-header { /* the user-editable image */
height: 246px;
background: url(banner-tall.jpg) no-repeat 50% 50%;
}
/* PAGE TYPE: short-header
--------------------------------------------------------------------------------*/
.short-header-page .wsite-header { /* the user-editable image */
height: 146px;
background: url(banner-short.jpg) no-repeat;
}
/* PAGE TYPE: no-header-header
--------------------------------------------------------------------------------*/
.no-header-page #banner-wrap {
display: none;
}
.no-header-page #banner {
display: none;
}
.no-header-page .wsite-header { /* the user-editable image */
}
.no-header-page #banner-top {
display: none;
}
.no-header-page #banner-bot {
display: none;
}
/* PAGE TYPE: landing
--------------------------------------------------------------------------------*/
.landing-page #banner a {
color: #a3d5f9;
}
.landing-page #banner a:hover {
color: #a5c7e9;
}
.landing-page #banner {
padding: 0;
border-left: none;
}
#bannerleft {
float: left;
width: 531px;
}
#bannerleft .wsite-header { /* the user-editable image */
height: 246px;
background: url(banner-landing.jpg);
}
#bannerright {
float: right;
width: 360px;
padding: 0px 25px 0 25px;
height: 249px;
}
#bannerright h2 {
font-size: 24px;
color: #fff;
padding: 0px;
line-height: 24px;
}
#bannerright p {
padding: 20px 0px;
line-height: 140%;
color: #fff;
}
.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%;
}
/* PAGE TYPE: splash
--------------------------------------------------------------------------------*/
.splash-page .wsite-header { /* the user-editable image */
height: 146px;
background: url(banner-splash.jpg) no-repeat;
}
.splash-page #header-wrap,
.splash-page #main-wrap,
.splash-page #footer-wrap {
min-width: 600px;
}
.splash-page #header,
.splash-page #main,
.splash-page #footer {
width: 600px;
}
.splash-page #banner {
width: 600px;
}
.splash-page #banner-bot {
background: none;
}
.splash-page #banner-top {
background: none;
}
.splash-page #header {
padding: 0;
}
.splash-page #title {
padding: 0;
}
.splash-page .social {
}
.splash-page .search {
display: none;
}
.splash-page .phone-number {
}
.splash-page #navigation {
display: none;
}
.splash-page #content {
height: auto !important;
min-height: 300px;
}
.splash-page #footer .wsite-social {
display: none;
}
.splash-page #footer {
text-align: center;
}
/* Form Customization
--------------------------------------------------------------------------------*/
.wsite-form-label {
display: inline-block;
color: #333333;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
font-weight: bold;
padding: 12px 0 5px 0;
}
.form-radio-container {
}
.wsite-form-input, .wsite-search-element-input {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
background: url(field.png) repeat-x;
color: #666666;
border: 1px solid #dadada;
padding: 8px 5px 5px !important;
line-height: 1;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.form-select {
background: url(field.png) repeat-x;
color: #666666;
border: 1px solid #dadada;
font-size: 14px;
padding: 3px;
height: 27px;
line-height: 27px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
/* Buttons
--------------------------------------------------------------------------------*/
/* small */
.wsite-button {
color: #fff !important;
height: 34px;
display: inline-block;
font-size: 14px;
border: none;
font-weight: bold;
text-decoration: none;
padding: 0 17px 0 0;
background: url(button.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: 14px;
font-weight: bold;
border: none;
text-decoration: none;
padding: 0 10px 0 20px;
background: url(button.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(button_large.png) no-repeat 100% -126px;
padding: 0 10px 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 20px;
background: url(button_large.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(button_large_highlight.png);
}
.wsite-button-large.wsite-button-highlight .wsite-button-inner {
background-image: url(button_large_highlight.png);
}
.wsite-button-highlight {
background-image: url(button_highlight.png);
color: #fff !important;
}
.wsite-button-highlight .wsite-button-inner {
background-image: url(button_highlight.png);
}
Ik heb een probleem bij de CSS van mij website.
De footer is onderaan de pagina gepostioneerd maar een kleine strook van de background komt er onder vandaan.
Hoe los ik dit op?
De code ziet er als volgt uit:
/* 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;
font-size: 0;
height: 0;
}
a {
color: #446d96;
text-decoration: none;
}
a:hover {
color: #608ebd;
text-decoration: none;
}
/* General Styling and Structure
--------------------------------------------------------------------------------*/
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #666666;
margin: 0;
padding: 0;
min-height: 100%;
position: relative;
background: #9f9f9f url(atletiekbaanl.jpg) repeat-x;
}
p {
line-height: 1.5;
padding: .5em 0;
}
h1,
h2,
h3,
h4 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
}
h1 {
font-size: 30px;
line-height: 1;
color: #fff;
}
h2,
h3 {
line-height: 1.3;
padding: .3em 0;
color: #333;
}
h4 {
font-size: 14px;
line-height: 1.2;
margin-bottom: 5px;
}
blockquote {
font-style:italic;
border-left:4px solid #ddd;
margin:10px 0 10px 0;
padding-left:20px;
line-height:1.5;
color:#888;
}
#header-wrap,
#banner-wrap,
#navigation-wrap,
#main-wrap,
#footer-wrap {
min-width: 960px;
height: 100%;
}
#header,
#banner,
#navigation,
#main,
#footer {
width: 960px;
margin: auto auto 0;
}
#header-wrap {
background: #3b67fb;
background: url(body-bgcopy.png) repeat-x top;
}
#header-top {
width: 960px;
margin: 0 auto;
}
#logo,
#logo a {
text-decoration: none;
font-size: 28px;
color: #333333;
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
}
/* Navigation
--------------------------------------------------------------------------------*/
#navigation-wrap {
background-color: ##0e71bf;
min-height: 15px;
}
#navigation {
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 1;
background: none;
}
#navigation ul {
}
#navigation li {
float: left;
position: relative;
padding: 0;
margin: 0 15px 0 0;
}
#navigation li a {
float: left;
display: block;
color: #fff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 15px 12px;
margin: 0;
border: 0;
outline: 0;
}
#navigation li:hover a,
#navigation li#active a {
color: #ffffff;
background: #1189d5; color="#db0000""#3b67fb"color="#1397e1" color="#0e71bf"
}
/* Navigation Drop-Down Menu Customization
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu li a {
padding: 8px;
color: #fff;
background: #9f9f9f;
border: 0;
border-bottom: 1px solid #3b67fb;
}
#wsite-menus .wsite-menu li a:hover {
color: #fff;
background: #1189d5;
}
/* Header Area
----------------------------------------------------------------------------*/
#header {
width: 100%;
height: 90px;
}
#header,
#header table {
border-collapse: collapse;
border-spacing: 0;
}
#header td {
vertical-align: middle;
text-align: left;
}
#logo {
padding: 25px 0 25px 10px;
}
#header-right {
padding: 0 10px 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;
text-align: right;
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
display: block;
white-space: nowrap;
margin: 0 0 0 10px;
}
/* TOP RIGHT: Content Area
--------------------------------------------------------------------------------*/
#header-right .wsite-social {
vertical-align: middle;
margin: 0 0 0 12px;
}
.wsite-social-item {
width: 20px;
height: 20px;
margin: 0 0 0 3px;
background-image:url(social-midgrey.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;}
/* TOP RIGHT: Search Box
--------------------------------------------------------------------------------*/
#header-right .search {
}
#header-right .wsite-search {
margin: 0 0 0 15px;
vertical-align: middle;
width: 205px;
height: 26px;
background: transparent url(searchForm-bg.png) no-repeat;
}
#header-right .wsite-search-input {
width: 150px;
height: 12px;
border: 0;
padding: 7px 10px 7px !important;
background: none;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
vertical-align: middle;
font-size: 12px;
}
#header-right .wsite-search-button {
vertical-align: middle;
width: 35px;
height: 26px;
border: 0;
margin: 0;
padding: 0;
cursor: pointer;
font-size: 0;
background: none;
}
/* Footer
--------------------------------------------------------------------------------*/
#footer-wrap {
background: #9f9f9f;
background: url(body-bg.png) repeat-x;
margin: 0;
}
#footer {
padding: 25px 20px 40px;
margin-top: 0px;
margin-bottom: -20px;
height:73px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #666666;
font-size: 12px;
border: none;
text-align: right;
}
#footer-right {
float: right;
width: 240px;
text-align: right;
display: none;
}
.rights {
line-height: 19px;
vertical-align: middle;
}
.wsite-footer { /* make sure enough space between element footer and attribution */
margin-bottom: 0px;
}
#footer h2 {
font-size:16px;
color:#555;
border-bottom:1px solid #ccc;
}
/* 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:575px !important;
}
.wsite-footer .form-radio-container {
font-size:1em !important;
}
.wsite-footer .wsite-form-input, .wsite-footer .wsite-search-element-input {
font-size: 1em !important;
width: 100% !important;
background-color:#fff;
}
.wsite-footer .form-select {
width: 100% !important;
background-color:#fff;
}
/* main contents styles
--------------------------------------------------------------------------------*/
#main-wrap {
background: #FFFFFF;
}
#main {
padding: 0;
}
#banner-wrap {
background: #0f325c url(banner-wrap.png) repeat-x;
padding: 0px 0;(!25)
border-top: 1px solid #98999b;
border-bottom: 1px solid #98999b;
}
#banner {
position: relative;
}
#banner-detail,
#bannerleft {
border: 1px solid #989c9b;
margin: 1px;
}
.wsite-header {
}
#content {
min-height: 400px;
padding: 25px 18px;
background: #fff;
}
/* PAGE TYPE: tall-header
--------------------------------------------------------------------------------*/
.tall-header-page .wsite-header { /* the user-editable image */
height: 246px;
background: url(banner-tall.jpg) no-repeat 50% 50%;
}
/* PAGE TYPE: short-header
--------------------------------------------------------------------------------*/
.short-header-page .wsite-header { /* the user-editable image */
height: 146px;
background: url(banner-short.jpg) no-repeat;
}
/* PAGE TYPE: no-header-header
--------------------------------------------------------------------------------*/
.no-header-page #banner-wrap {
display: none;
}
.no-header-page #banner {
display: none;
}
.no-header-page .wsite-header { /* the user-editable image */
}
.no-header-page #banner-top {
display: none;
}
.no-header-page #banner-bot {
display: none;
}
/* PAGE TYPE: landing
--------------------------------------------------------------------------------*/
.landing-page #banner a {
color: #a3d5f9;
}
.landing-page #banner a:hover {
color: #a5c7e9;
}
.landing-page #banner {
padding: 0;
border-left: none;
}
#bannerleft {
float: left;
width: 531px;
}
#bannerleft .wsite-header { /* the user-editable image */
height: 246px;
background: url(banner-landing.jpg);
}
#bannerright {
float: right;
width: 360px;
padding: 0px 25px 0 25px;
height: 249px;
}
#bannerright h2 {
font-size: 24px;
color: #fff;
padding: 0px;
line-height: 24px;
}
#bannerright p {
padding: 20px 0px;
line-height: 140%;
color: #fff;
}
.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%;
}
/* PAGE TYPE: splash
--------------------------------------------------------------------------------*/
.splash-page .wsite-header { /* the user-editable image */
height: 146px;
background: url(banner-splash.jpg) no-repeat;
}
.splash-page #header-wrap,
.splash-page #main-wrap,
.splash-page #footer-wrap {
min-width: 600px;
}
.splash-page #header,
.splash-page #main,
.splash-page #footer {
width: 600px;
}
.splash-page #banner {
width: 600px;
}
.splash-page #banner-bot {
background: none;
}
.splash-page #banner-top {
background: none;
}
.splash-page #header {
padding: 0;
}
.splash-page #title {
padding: 0;
}
.splash-page .social {
}
.splash-page .search {
display: none;
}
.splash-page .phone-number {
}
.splash-page #navigation {
display: none;
}
.splash-page #content {
height: auto !important;
min-height: 300px;
}
.splash-page #footer .wsite-social {
display: none;
}
.splash-page #footer {
text-align: center;
}
/* Form Customization
--------------------------------------------------------------------------------*/
.wsite-form-label {
display: inline-block;
color: #333333;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
font-weight: bold;
padding: 12px 0 5px 0;
}
.form-radio-container {
}
.wsite-form-input, .wsite-search-element-input {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
background: url(field.png) repeat-x;
color: #666666;
border: 1px solid #dadada;
padding: 8px 5px 5px !important;
line-height: 1;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.form-select {
background: url(field.png) repeat-x;
color: #666666;
border: 1px solid #dadada;
font-size: 14px;
padding: 3px;
height: 27px;
line-height: 27px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
/* Buttons
--------------------------------------------------------------------------------*/
/* small */
.wsite-button {
color: #fff !important;
height: 34px;
display: inline-block;
font-size: 14px;
border: none;
font-weight: bold;
text-decoration: none;
padding: 0 17px 0 0;
background: url(button.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: 14px;
font-weight: bold;
border: none;
text-decoration: none;
padding: 0 10px 0 20px;
background: url(button.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(button_large.png) no-repeat 100% -126px;
padding: 0 10px 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 20px;
background: url(button_large.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(button_large_highlight.png);
}
.wsite-button-large.wsite-button-highlight .wsite-button-inner {
background-image: url(button_large_highlight.png);
}
.wsite-button-highlight {
background-image: url(button_highlight.png);
color: #fff !important;
}
.wsite-button-highlight .wsite-button-inner {
background-image: url(button_highlight.png);
}