/**
* Browser styling
*/
html, body { font-family: Arial, sans-serif, Verdana; }
html { overflow-y: scroll; overflow-x: hidden; }
/**
* Layout (positioning elements)
*/
#container { margin-left: auto; margin-right: auto; width: 997px; }
#header { width: 100%; }
#logo { height: 80px; }
#logo span { display: block; height: 1px; overflow: hidden; }
.menu {}
#news-ticker { height: 36px; width: 992px; }
#content { width: 972px; min-height: 400px; margin: 6px 0 6px 5px; padding-left: 15px; }
body#page-index #container #content { padding-left: 0; }
#footer { width: 100%; height: 30px; line-height: 30px; margin: 8px 0; }
/**
* Colours, Font, Decoration
*/
h1, h2, h3 {font-family: 'Arial Narrow', Arial, Verdana;}
h2, h1 {font-weight: bold; font-size: 1.6em; color: #567; margin: 10px 0 4px 0;}
h3 {font-weight: bold; font-size: 1.4em; color: #567; margin: 5px 0 3px 0;}
a:focus {
outline-width: 1px;
outline-style: dotted;
}
a {color: #00C;}
a:hover {color: #009;}
a.external {padding-right: 16px;background: url(../images/icons/link_external.png) no-repeat right center;}
p {line-height: 18px; margin: 4px 0;}
img {border: none;}
.blue {font-weight: bold; color: #567;}
strong {font-weight: bold;}
/* Form styling */
input, textarea, button {font-family: Arial, sans-serif, Verdana;}
input, textarea {font-size: 14px;}
/**
* Logo styling
*/
#logo {background: url(../images/layout/logo.png) no-repeat;}
#england-netball-logo {float: right; width: 81px; height: 75px; background: url(../images/england-netball-logo.gif) no-repeat; text-indent: -9999px;}
/**
* Navigation (Colours, positions, background images)
*/
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menu {width:auto;height:33px;position:relative;z-index:100;margin-top: -3px;padding-left: 10px;background: url(../images/layout/nav_foot_bg.png) repeat-x 0 0; font-family: 'Arial Narrow', Arial, Verdana;}
/* hack to correct IE5.5 faulty box model */
/** html .menu {width:746px;w\idth:745px;}*/
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul ul {width:100px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float:left;width:80px;position:relative;}
/* style the links for the top level */
.menu a, .menu a:visited {display: block;font-size: 16px;text-transform: lowercase;text-decoration:none;text-align: center; color:#FFF; width:80px; height:33px; background: url(../images/layout/nav_foot_bg.png) repeat-x 0 0; border-bottom: 1px solid #FFF; line-height:35px; font-weight:bold;}
.menu a:focus {outline: 0;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:80px;}
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover {color:#FFF; background-position: 0 -33px;}
.menu :hover > a, .menu ul ul :hover > a {color:#FFF; background-position: 0 -33px;}
/* Style the top level's down state */
.menu ul a.down, .menu ul a.down:visited {background: url(../images/layout/nav_foot_bg.png) no-repeat 0 -66px; color: #0D3759; line-height: 30px;}
/* longer in length */
.menu li.longer, .menu li.longer a, .menu li.longer a:visited {width: 120px;}
.menu li.longer a.down, .menu li.longer a.down:visited {background: url(../images/layout/nav_foot_bg.png) no-repeat 0 -99px; color: #0D3759; line-height: 30px;}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited, .menu ul ul a, .menu ul ul a:visited,
.menu ul ul a, .menu ul ul a:visited,
.menu ul ul a.down, .menu ul ul a.down:visited {background-color: #FFF; background-image: none; line-height: 15px;}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited,
.menu ul li.longer ul a, .menu ul li.longer ul a:visited {color: #000; text-align: left; height: auto; line-height: 15px; font-size: 0.8em; padding: 5px 0 5px 7px; width:140px; border: 1px solid #DDD; border-width:0 1px 1px 1px; text-transform: none;}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited, .menu ul ul {width:162px; w\idth:140px;}
/* style the second level hover */
.menu ul ul a.down:hover, .menu ul ul :hover > a.down, .menu ul ul a:hover, .menu ul ul a.down:hover {background: #ECF5FF; color: #009;}
.menu ul ul a.drop:hover, .menu ul li.longer ul a.drop:hover { background: #ECF5FF; }
/* Style the second level's down state */
.menu ul li ul li a.down, .menu ul li ul li a.down:visited,
.menu ul li.longer ul li a.down, .menu ul li.longer ul li a.down:visited {background: #DDD; color: #000; line-height: 15px;}
/* position the third level flyout menu */
.menu ul ul ul { left: 148px; top: -1px; width: 148px; border-top: 1px solid #DDD; }
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left { left: -148px; }
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited { background: #FFF; }
/* style the third level hover */
.menu ul ul ul a:hover { background: #ECF5FF; color: #000; }
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul { visibility: hidden; position: absolute; height: 0; top: 34px; left: 0; width: 148px; }
/* another hack for IE5.5 */
* html .menu ul ul { top: 35px; t\op: 34px; }
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; margin: 0; border-collapse:collapse; background-image: none;}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul, .menu ul :hover ul {visibility: visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul {visibility: hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul {visibility: visible;}
/************** END NAVIGATION CSS ***************/
/**
* Search box
*/
div#search-box {float: right; margin-right: 5px; height: 32px; line-height: 32px;}
div#search-box input[type=text] {float: left; border: none; width: 156px; height: 18px; padding: 2px 6px; margin: 7px 2px 0 0; background: url(../images/layout/search-box.png) no-repeat 0 0;}
div#search-box input[type=submit] {float: left; border: none; width: 82px; height: 22px; padding: 0 4px; margin: 7px 0 0 2px; text-indent: -9999px; background: url(../images/layout/search-box.png) no-repeat -168px 0; cursor: pointer;}
/**
* News ticker
*/
#news-ticker {margin: 6px 0 6px 5px; clear: both;}
#news-ticker-left {float: left; width: 62px; height: 36px; background: url(../images/layout/news-ticker-sprite.png) no-repeat 0 0;}
#news-ticker-content {float: left; width: 911px; line-height: 36px; background: url(../images/layout/news-ticker-sprite.png) repeat-x 0 -36px; font-family: Georgia, 'Times New Roman', sans-serif; font-size: 11px;}
#news-ticker-content a {display: block; text-decoration: none; color: #556677;}
#news-ticker-right {float: left; width: 14px; height: 36px; background: url(../images/layout/news-ticker-sprite.png) no-repeat -62px 0;}
/**
* Breadcrumb
*/
#breadcrumb {margin: 0 0 0 15px; clear: both; font-size: 0.8em; font-weight: bold;}
#breadcrumb div {overflow: hidden; height: 1px; text-indent: -9999px;}
#breadcrumb a {}
/**
* Content (styles, colours, anything else)
*/
#content {background-color: #FFF; font-size: 0.8em;}
#content p {margin-left: 10px;}
#content ul, #content ol {display: block; margin: 8px 0 8px 15px;}
#content ul li, #content ol li {list-style-type: disc; margin: 2px 0 2px 16px;}
/* grey divider */
.divider {overflow: auto; width: 987px; margin: 6px 0; clear: both;}
.divider .left {float: left; overflow: hidden; width: 8px; height: 8px; background: url(../images/layout/divider-grey.png) no-repeat 0 0;}
.divider .middle {float: left; overflow: hidden; width: 971px; height: 8px; background: url(../images/layout/divider-grey.png) repeat-x 0 -8px;}
.divider .right {float: left; overflow: hidden; width: 8px; height: 8px; background: url(../images/layout/divider-grey.png) no-repeat -8px 0;}
/* promo boxes */
div.box-promo-container {overflow: hidden; width: 987px;}
.floatleft {float: left;}
.box-promo {position: relative; width: 180px; height: 200px; background: url(../images/layout/index-promo.png) no-repeat;}
div.box-promo-blue {background-position: 0 0;}
div.box-promo-yellow {background-position: -180px 0;}
div.box-events {width: 222px; height: 200px; background-position: -360px 0;}
div.box-events-index {width: 222px; height: 200px; background-position: -360px 0;}
div.marginright5 {margin-right: 5px;}
div.margincenter5 {margin: 0 5px;}
div.marginleft5 {margin-left: 5px;}
.box-promo ul {display: block; margin: 0 !important;}
.box-promo ul li {height: 23px; line-height: 23px; width: 180px; margin: 0 !important; list-style-type: none !important;}
/* Hidden text tag to aid screen readers */
.box-promo ul li div {overflow: hidden; height: 1px; text-indent: -9999px;}
.box-promo ul li a span {visibility: hidden;}
/* Link styling for sub-items */
.box-promo ul li a {display: block; font-family: Arial, Verdana, sans-serif; font-size: 14px; font-weight: bold; padding-left: 10px; text-decoration: none; color: #FFF;}
.box-promo ul li a:hover {color: #EEE;}
/* Link styling for box headings */
.box-promo ul li.text-about-us a, .box-promo ul li.text-courses-events a,
.box-promo ul li.text-being-involved a, .box-promo ul li.text-clubs a,
.box-promo ul li.text-contacts a,
.box-promo ul li.text-events a {height: 30px; line-height: 30px; font-size: 18px; letter-spacing: -1px; text-transform: lowercase;}
.box-promo ul li.text-about-us, .box-promo ul li.text-courses-events,
.box-promo ul li.text-being-involved, .box-promo ul li.text-clubs,
.box-promo ul li.text-contacts,
.box-promo ul li.text-events {margin-bottom: 10px !important;}
/* Heading images */
.box-promo ul li.text-about-us a {background: url(../images/layout/index-promo-headings.png) no-repeat 0 3px;}
.box-promo ul li.text-courses-events a {background: url(../images/layout/index-promo-headings.png) no-repeat 0 -33px;}
.box-promo ul li.text-being-involved a {background: url(../images/layout/index-promo-headings.png) no-repeat 0 -33px;}
.box-promo ul li.text-clubs a {background: url(../images/layout/index-promo-headings.png) no-repeat 0 -69px;}
.box-promo ul li.text-contacts a {background: url(../images/layout/index-promo-headings.png) no-repeat 0 -106px;}
.box-promo ul li.text-events a {background: url(../images/layout/index-promo-headings-Nov2010.png) no-repeat -70px -141px;}
.box-promo ul li a:hover, .box-promo ul li.text-events a:hover {color: #EEE;}
/* Index Welcome */
#index-welcome {position: relative; overflow: hidden; width: 987px; height: 247px;}
#index-welcome #welcome-image {position: absolute; top: 0; left: 0; padding: 0;}
#index-welcome #welcome-image img {left: -5px;}
#index-welcome #welcome-text {position: absolute; top: 8px; left: 8px; bottom: 8px; width: 420px; background: url(../images/spacer-black-50opacity.png); padding: 0 15px;}
#index-welcome #welcome-text h1,
#index-welcome #welcome-text p {padding: 15px; margin: 0; color: #FFF;}
#index-welcome #welcome-text p {font-family: 'Arial Narrow', Arial, Verdana; font-size: 16px; margin: 0; padding: 0;}
#index-welcome #welcome-text h1 {padding: 15px 0 8px 0;}
/* upcoming events box */
div.box-events ul li {overflow: hidden; height: 23px; width: 220px; line-height: 23px; margin: 0 !important; list-style-type: none !important;}
div.box-events ul li.text-events {overflow: hidden; float: none; margin: 0; line-height: 30px; height: 30px;}
div.box-events ul li a {display: block; font-family: Arial, Verdana, sans-serif; font-size: 11px; font-weight: bold; padding-left: 8px; text-decoration: none; color: #FFF;}
div.box-events div.more {position: absolute; left: 0; bottom: 0; right: 0; height: 25px; line-height: 25px; background: url(../images/layout/index-promo-headings.png) no-repeat 150px -169px;}
div.box-events ul li a:focus {outline: 0;}
div.box-events div.more a {display: block; text-decoration: none;}
div.box-events div.more a:focus {outline: 0;}
div.box-events div.more a span {visibility: hidden;}
/* longer upcoming events box */
div.box-events-long {height: 300px; background: url(../images/layout/events-box-long.png) no-repeat 0 0;}
/* table styling */
table {min-width: 600px; margin: 8px 0;}
table.big {width: 100%;}
table tr th, table tr td {font-size: 1em;}
table tr th {font-weight: bold; padding: 0 5px; line-height: 25px; border-bottom: 1px solid #CCC;}
table tr td {padding: 4px 5px;}
table tr.row_odd td {background: #FFF;}
table tr.row_even td {background: #FFD;}
/* tabs */
div.tabs {overflow: auto; margin-bottom: -2px;}
div.tabs a {display: block; float: left; margin-right: -1px; background-color: #EEE; padding: 4px 8px; border: 1px solid #CCC;}
div.tabs a:hover {background-color: #FFF; text-decoration: none;}
div.tabs a.down {font-weight: bold; background-color: #FFF; border-bottom: none; text-decoration: none;}
/* google search results */
#searchcontrol .gsc-control {width : 400px; padding-left: 10px;}
#searchcontrol .gsc-resultsbox-visible {overflow: hidden;}
/**
* Footer (styles, colours, anything else)
*/
#footer {background: #3B69DF url(../images/layout/nav_foot_bg.png) repeat-x 0 -3px; color: #FFF; font-size: 0.8em; font-weight: bold; text-align: center;}
/**
* Page specific styling
*/
/* Clubs */
.clubs {margin: 8px 0 8px 5px;}
.clubs p {display: block; line-height: 28px;}
/* News */
ol.news {margin: 8px 0 8px 0 !important; width: 700px;}
ol.news li {list-style: none !important; margin: 0 0 16px 10px !important;}
ol.news span.date {display: block; font-size: 0.9em !important; font-weight: bold; padding: 6px 0 6px 6px; border-bottom: 1px dotted #CCC; color: #333; cursor: default;
background-color: #EEE; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; -webkit-border-radius-topleft: 6px; -webkit-border-radius-topright: 6px; border-radius-topleft: 6px; border-radius-topright: 6px;
text-shadow: 1px -1px 0 #FFF;}
ol.news ol {margin: 0 !important; padding: 0 !important;}
ol.news ol li {font-size: 1em !important; font-weight: normal; font-family: Georgia, 'Times New Roman', sans-serif; border: none; border-bottom: 1px dotted #CCC; list-style: none !important; margin: 0 !important;}
ol.news ol li span.title {display: block; color: #000; font-weight: bold; text-decoration: underline; padding: 0 0 6px 0;}
ol.news ol li span.content-short {color: #000; font-size: 0.8em;}
ol.news ol li span.read-more {display: block; margin: 4px 0 6px 0; font-size: 0.8em;}
ol.news ol li a {display: block; padding: 8px 8px 2px 8px;}
ol.news ol li a:hover {background-color: #FFFFF5;}
.news-container {width: 700px; margin: 12px 0 0 0; background-color: #FFFFF5; border-bottom: 1px dotted #CCC;}
.news-container .header {overflow: hidden; background-color: #EEE; font-size: 0.9em; padding: 0 0 0 6px; border-bottom: 1px dotted #CCC;
-moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; -webkit-border-radius-topleft: 6px; -webkit-border-radius-topright: 6px; border-radius-topleft: 6px; border-radius-topright: 6px;
text-shadow: 1px -1px 0 #FFF;}
.news-container .header .date {float: left; width: 150px; line-height: 26px; font-size: 0.95em; font-weight: bold; cursor: default;}
.news-container .header .title {float: left; line-height: 26px; margin: 0; font-size: 1em; font-family: Georgia, 'Times New Roman', sans-serif; cursor: default;}
.news-container .content {padding: 0 6px;}
.news-container .content img {margin: 0 0 0 10px;}
/* Events */
body#page-events-index span.date {font-size: 0.9em !important;}
.event-container {width: 700px; margin: 12px 0 0 0; background-color: #FFFFF8; border-bottom: 1px dotted #CCC;}
.event-container .header {overflow: hidden; background-color: #EEE; font-size: 0.9em; padding: 0 0 0 6px; border-bottom: 1px dotted #CCC;
-moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; -webkit-border-radius-topleft: 6px; -webkit-border-radius-topright: 6px; border-radius-topleft: 6px; border-radius-topright: 6px;
text-shadow: 1px -1px 0 #FFF;}
.event-container .header .date {float: left; width: 150px; line-height: 26px; font-weight: bold; cursor: default;}