html, body {
height: 100%;
}
html {
background: url("../images/background-container.png") repeat-y top center;
}
body {
margin: 0;
padding: 0;
text-align: center;
background: url("../images/background-body.png") no-repeat top center;
font: 400 0.7em arial, verdana, sans-serif;
line-height: 170%;
color: #000;
cursor: default;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 10px 0;
padding: 0;
}
h1 {
padding-bottom: 0.2em;
font: 400 1.6em arial, sans-serif;
color: #000;
border-bottom: 3px solid #2aa243;
}
h2 {
font-size: 1.2em;
color: #000;
}
h3 {
font-size: 0.9em;
color: #000;
}
h4 {
font-size: 0.85em;
}
h5 {
font-size: 0.8em;
}
a {
text-decoration: none;
color: #2aa243;
}
a:hover {
text-decoration: underline;
}
a img {
border: 0;
}
p.backSentence a {
color: #000;
}
img.thumb {
float: left;
margin: 5px 10px 0 0;
padding: 0 8px 8px 0;
background-image: url("../images/background-thumb.png");
background-repeat: no-repeat;
background-position: right bottom;
}
img.picture {
margin: 5px 10px 0 0;
padding: 0 7px 7px 0;
background-image: url("../images/background-picture.png");
background-repeat: no-repeat;
background-position: right bottom;
}
blockquote {
margin: 0;
padding: 0 20px;
background: #eee;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
form {
padding: 0;
margin: 0;
}
label {
float: left;
width: 25%;
vertical-align: top;
}
input, textarea, select {
padding: 1px;
font: 400 1em arial, verdana, sans-serif;
color: #000;
background: #FFF;
border: 1px solid #CCC;
}
textarea {
width: 250px;
height: 150px;
}
input:focus, input:hover, textarea:focus, textarea:hover, select:focus, select:hover {
color: #000;
background: #E7F1F3;
border: 1px solid #888;
}
input.noBorder, input:focus.noBorder, input:hover.noBorder {
padding: 0;
border: 0;
}
input.button {
padding: 2px 5px;
font: 400 0.9em arial, verdana, serif;
cursor: pointer;
color: #fff;
background: #ccc;
border-width: 1px;
border-style: solid;
border-color: #888 #888 #8880 #888;
}
input.radio {
background: none;
border: 0px;
}
p {
text-align: justify;
cursor: text;
}
#main ul {
margin: 0 0 10px 0;
padding: 0;
}
#main ul li {
margin: 0;
padding: 0 0 0 10px;
list-style: none;
color: #000;
font-weight: normal;
background-image: url("../images/square_black.gif");
background-repeat: no-repeat;
background-position: 2px 8px;
*background-position: 2px 9px;
}
#main ul li.info {
background-image: none;
}
table {
border-collapse: collapse;
}
table thead td {
font-size: 110%;
font-weight: bold;
}
table td {
padding-right: 8px;
}
table.organization td {
padding-right: 0px;
}
b {
color: #000;
}
dl#teams {
margin: 0 0 10px 0;
padding: 0px;
}
dl#teams dt {
float: left;
clear: left;
width: 100px;
padding: 0 0 0 10px;
background-image: url("../images/square_black.gif");
background-repeat: no-repeat;
background-position: 2px 8px;
*background-position: 2px 9px;
}
dl#teams dd {
margin: 0 0 0 100px;
padding: 0 0 3px 0;
}
.mail_rev {
unicode-bidi: bidi-override;
direction: rtl;
}
.mail_supp {
display: none;
}
#content {
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}
#topbar {
float: left;
width: 100%;
padding: 0.6em 0;
font-size: 0.9em;
text-transform: uppercase;
color: #CFD9DB;
background: #2B7D2B url("../images/background-header.png") repeat-x bottom left;
}
#header {
clear: both;
position: relative;
width: 776px;
height: 5em;
margin: 0 auto;
border-bottom: 2px solid #339933;
background: #2B7D2B url("../images/background-header.png") repeat-x bottom left;
}
#header img {
_behavior: url("stylesheets/pngbehavior.htc");
position: absolute;
top: 5%;
left: 10px;
height: 188px;
width: 198px;
}
#header ul {
margin: 3.5em 1em 0 0 !important;
margin: 3.5em 0.5em 0 0;
padding: 0;
float: right;
}
#header ul li {
display: inline;
list-style: none;
}
#header ul li a {
float: left;
padding: 0 1em 3px 1em;
font: 400 1.1em arial, sans-serif;
letter-spacing: 0.1em;
line-height: 0.8em !important;
line-height: 1em;
color: #FFF;
border-right: 1px solid #FFF;
}
#header ul li a.last {
padding-right: 0;
border-right: 0;
}
#header ul li a:hover {
text-decoration: underline;
}
#menu {
background: transparent url("../images/background-menu.jpg") no-repeat top left;
margin: 0 auto;
margin-bottom: 55px;
padding: 0;
height: 200px;
width: 776px;
}
#nav {
position: relative;
top: 175px;
width: 776px;
_width: 761px;
margin: 0px;
padding: 0px 0px 0px 15px;
}
#nav li ul, #nav li ul {
margin: 0;
padding: 0;
}
#nav a {
text-decoration: none;
}
#nav li { /*float the main list items*/
margin: 0;
float: left;
display: block;
padding-right: 15px;
}
#nav li ul {
display: none;
}
#nav li.off ul, #nav li.on ul { /*put the subnav below*/
position: absolute;
top: 25px;
left: 0;
padding-top: 10px;
background: #339933;
height: 28px;
width: 751px;
padding-left: 25px;
background-image: url("../images/background-submenu.png");
background-repeat: repeat-x;
}
#nav li.on ul {
background: #339933;
background-image: url("../images/background-submenu.png");
background-repeat: repeat-x;
}
#nav li.on:hover ul, #nav li.over ul { /*for ie*/
background: #339933;
background-image: url("../images/background-submenu.png");
background-repeat: repeat-x;
}
#nav li a {
color: #224d6f;
font-weight: bold;
display: block;
width: 90px;
padding: 0;
}
#nav li.on a {
color: #339933;
}
#nav li.on ul a, #nav li.off ul a {
border: 0;
float: left; /*ie doesn't inherit the float*/
color: #339933;
width: auto;
margin-right: 10px;
}
#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
background: transparent;
}
#nav li.on ul {
display: block;
}
#nav li.off:hover ul, #nav li.over ul {
display: block;
z-index: 6000;
}
#nav li.off a:hover, #nav li.on a:hover {
color: #FFF;
}
/*do the image replacement*/
#nav li span {
position: absolute;
left: -9384px;
}
#liActueel a, #liEersteElftal a, #liSenioren a, #liJeugd a, #liInformatie a, #liSponsoring a, #liNwc a {
display: block;
position: relative;
height: 25px;
background: url("../images/menu_map.png") no-repeat; /*contains all hover states*/
_background-image: url("../images/menu_map.gif");
}
/*first, put the initial states in place*/
#liActueel a { background-position: 0 0; }
#liEersteElftal a { background-position: -99px 0; }
#liSenioren a { background-position: -198px 0; }
#liJeugd a { background-position: -297px 0; }
#liInformatie a { background-position: -396px 0; }
#liSponsoring a { background-position: -495px 0; }
#liNwc a { background-position: -594px 0; }
/*active states*/
#liActueel.on a { background-position: 0 -37px; }
#liEersteElftal.on a { background-position: -99px -37px; }
#liSenioren.on a { background-position: -198px -37px; }
#liJeugd.on a { background-position: -297px -37px; }
#liInformatie.on a { background-position: -396px -37px; }
#liSponsoring.on a { background-position: -495px -37px; }
#liNwc.on a { background-position: -594px -37px; }
/*hover states*/
#liActueel a:hover, #liActueel:hover a, #liActueel.over a { background-position: 0 -37px; }
#liEersteElftal a:hover, #liEersteElftal:hover a, #liEersteElftal.over a { background-position: -99px -37px; }
#liSenioren a:hover, #liSenioren:hover a, #liSenioren.over a { background-position: -198px -37px; }
#liJeugd a:hover, #liJeugd:hover a, #liJeugd.over a { background-position: -297px -37px; }
#liInformatie a:hover, #liInformatie:hover a, #liInformatie.over a { background-position: -396px -37px; }
#liSponsoring a:hover, #liSponsoring:hover a, #liSponsoring.over a { background-position: -495px -37px; }
#liNwc a:hover, #liNwc:hover a, #liNwc.over a { background-position: -495px -37px; }
/*subnav formatting*/
#nav li.off ul a, #nav li.on ul a {
display: block;
background: transparent;
color: #fff;
font-family: arial, verdana, sans-serif;
font-size: small;
}
#nav li.on ul a {
background: transparent;
}
#nav li ul a:hover {
text-decoration: underline;
}
#nav li.on ul li a, #nav li.on ul a, #nav li.off ul a, #nav li.on:hover ul a, #nav li.over ul li a, #nav li ul li a:hover {
padding-left: 10px;
background-image: url("../images/square.gif");
background-repeat: no-repeat;
background-position: 0 35%;
*background-position: 0 40%;
}
#page {
clear: both;
float: left;
width: 100%;
margin-bottom: 6em;
text-align: left;
}
#columns {
width: 746px;
margin: 0 auto;
}
#main {
float: left;
width: 357px;
}
#footer {
clear: both;
float: left;
width: 100%;
height: 5em;
margin-top: -5em;
}
#footer #bg {
position: relative;
width: 776px;
height: 5em;
margin: 0 auto;
background: #2B7D2B url("../images/background-footer.png") repeat-x bottom left;
}
#footer #bg ul {
float: right;
margin: 3em 0 0 0;
padding: 0;
}
#footer #bg ul li {
display: inline;
padding: 0 1em;
list-style: none;
color: #FFF;
border-right: 1px solid #FFF;
}
#footer #bg ul li.last {
border-right: none;
}
#footer #bg ul li a {
font: 400 1em arial, sans-serif;
color: #FFF;
letter-spacing: 0.1em;
line-height: 0.8em !important;
line-height: 1em;
}
#footer #bg ul li a.last {
padding-right: 0;
border-right: 0;
}
#footer #bg ul li a:hover {
text-decoration: underline;
}
#footer #bg img {
position: absolute;
top: 6%;
left: 10px;
}
.post, .lastPost {
float: left;
width: 100% !important;
width: 99%;
position: relative;
margin-bottom: 1em;
*margin-bottom: 0.8em;
padding-bottom: 0.2em;
*padding-bottom: 1em;
border-bottom: 1px dotted #CCC;
}
.post {
_background-image: url("../images/background-post.png");
_background-repeat: repeat-x;
_background-position: bottom left;
_border-bottom: none;
}
.lastPost {
margin-bottom: 0;
_margin-bottom: -3em;
padding-bottom: 0;
*padding-bottom: 2em;
_padding-bottom: 0;
border-bottom: none;
}
.post h3, .lastPost h3 {
display: block;
padding: 0;
font-size: 1.2em;
}
.post .date, .lastPost .date {
margin-top: -12px;
font-style: italic;
}
.post p, .lastPost p {
margin-top: 5px;
padding-left: 1px;
text-align: justify;
}
.post p.readMore, .lastPost p.readMore {
margin-top: -4px;
text-align: right;
}
table.fixtures td, table.results td {
padding-right: 0;
}
table.fixtures td.date, table.results td.date {
width: 70px;
}
table.fixtures td.home, table.fixtures td.away, table.results td.home, table.results td.away {
width: 110px;
}
table.results td.result {
width: 20px;
}
ul.news {
clear: both;
}
ul.double {
float: left;
width: 168px;
_width: 158px;
margin: 0 10px 10px 0;
padding: 0;
}
ul.double li {
width: 168px;
_width: 158px;
margin: 0;
padding: 0 0 0 10px;
list-style: none;
color: #000;
font-weight: normal;
background-image: url("../images/square_black.gif");
background-repeat: no-repeat;
background-position: 3px 8px;
*background-position: 3px 9px;
}
td.person { width: 90px; }
td.function { width: 160px; }
td.phone { width: 70px; }
#sponsors {
float: left;
width: 24%;
padding: 4px 0px 0 0;
text-align: center;
background-image: url("../images/border.png");
background-repeat: no-repeat;
background-position: 88% 30%;
}
#sponsors img {
margin: 0 44px 10px 5px;
}
#sponsors h2 {
margin: 10px 36px 20px 0;
padding: 0 0 0.2em 0;
text-align: left;
border-bottom: 3px solid #2aa243;
}
#sponsors h2.first {
margin-top: 2px;
}
#right {
float: right;
width: 185px;
background-image: url("../images/border.png");
background-repeat: no-repeat;
background-position: top left;
}
#right h2 {
margin-left: 23px;
padding: 0 0 0.2em 0;
border-bottom: 3px solid #2aa243;
}
#right h2.first {
padding-top: 2px;
}
table#ranking {
border-collapse: collapse;
margin: 0 0 10px 22px;
}
table#ranking tr td {
padding-right: 4px;
border-top: 1px dotted #CCC;
_border-top: none;
_background-image: url("../images/background-post.png");
_background-repeat: repeat-x;
_background-position: top left;
}
table#ranking tr.first td {
border-top: none;
_background-image: none;
}
table#ranking tr.strong td {
font-weight: bold;
}
table.data {
margin-bottom: 10px;
}
table.data tbody tr td {
border-top: 1px dotted #CCC;
_border-top: none;
_background-image: url("../images/background-post.png");
_background-repeat: repeat-x;
_background-position: top left;
}
div#map {
width: 357px;
height: 216px;
margin: 0px 0px 15px 0px;
border: 1px solid #CCC;
}
div#routeplanner_content {
display: none;
}
div#routeplanner {
margin: 0px;
padding: 0px 0px -3px 0px;
color: #000;
font-family: Arial;
font-size: 10px;
}
div#routeplanner img {
margin: 0px;
padding: 0px;
}
div#routeplanner h6 {
margin: 0px 0px 5px 0px;
padding: 0px;
font-size: 11px;
font-weight: bold;
}
div#routeplanner p {
margin: 0px 0px 5px 0px;
padding: 0px;
font-size: 10px;
}
div#routeplanner form {
margin: 0px;
padding: 0px;
}
div#routeplanner label {
width: auto;
margin: 0px;
padding: 0px;
background: none;
}
div#routeplanner input.saddr {
width: 110px;
height: 16px;
margin: 0px 3px 0px 3px;
padding: 0px;
font-family: Arial;
font-size: 10px;
}
div#routeplanner a.submit {
color: #000;
text-decoration: underline;
}
div#routeplanner a.submit:hover {
text-decoration: none;
}
#right ul {
margin: 0 0 10px 0;
padding: 0;
}
#right ul li {
margin: 0;
padding: 0;
color: #000;
font-weight: normal;
}
#right ul li {
padding: 1px 5px 1px 32px;
list-style: none;
background-image: url("../images/square_black.gif");
background-repeat: no-repeat;
background-position: 23px 9px;
*background-position: 23px 10px;
}
#right ol li a, #right ul li a {
display: block;
height: auto !important;
/* Start hide from IE Mac \*/
height: 1%;
/* End hide from IE Mac */
color: #000;
}