/* -------------------------------------------------------------- Site Specific Stylesheet http://www.mosslands.co.uk 2010-04-08 Author: Mike Armstrong - www.e4education.co.uk -------------------------------------------------------------- */ @import url(reset.css); /* Global Reset */ @import url(default.css); /* Sets sensible default styles */ /* Site specific styling -------------------------------------------------- */ body {margin: 0px auto; font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif; font-size: 13px; line-height: 170%; text-align: center; color: #333;} h1, h2, h3, h4, h5, h6 {font-family: "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif; font-weight: bold; line-height: 100%; color: #333;} h1 {margin-bottom: 10px; font-size: 16px;} h2 {margin-bottom: 10px; font-size: 15px;} h3 {margin-bottom: 5px; font-size: 14px;} h4 {margin-bottom: 5px; font-size: 13px;} h5 {margin-bottom: 5px; font-size: 12px;} h6 {margin-bottom: 5px; font-size: 12px;} p {margin-bottom: 1em;} strong, b {font-weight: bold; font-family: "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif;} em, i {font-style: italic; font-family: "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif;} ul, ol {margin: 0 0 20px 10px; font-family: inherit;} li {margin-left: 25px;} a:link {text-decoration: none; color: #274167;} a:visited {text-decoration: none; color: #274167;} a:hover {text-decoration: underline; color: #F1071E;} a:focus {text-decoration: underline; color: #F1071E;} a:active {text-decoration: underline; color: #F1071E;} img.left {float: left; margin: 0 10px 10px 0;} img.right {float: right; margin: 0 0 10px 10px;} .left {float: left;} .right {float: right;} .center {margin: 0 auto; text-align: center;} form {margin-bottom: 20px;} fieldset {border: 0;} input, textarea, select {margin-bottom: 10px; padding: 3px; font-family: Verdana, Arial, sans-serif; font-size: 11px;} input.button {margin-left: 210px; width: 100px;} .error {padding-left: 20px; color:#f00;} caption, .caption {font-style: italic; font-size: 11px;} .noShow {display: none;} hr.cleaner, hr.clearer {visibility: hidden; clear: both; margin: -1px 0 0 0; padding: 0; height: 1px; border: none;} .clear:after {content: "."; display: block; clear:both; height: 0; visibility: hidden;} /* Structure and DIV specific styling -------------------------------------------------- */ #outerWrapper {width: 100%; background: #FAFAFA url(../images/design/page_bg.jpg) repeat-x top;} #container {margin: 0 auto; width: 980px; text-align: left;} #header {position: relative; width: 980px; height: 280px; background: url(../images/design/header_bg.jpg) no-repeat left top; color: #666; overflow:hidden;} #header h1, #header h2 {display: none;} #accessibilityLinks {position: absolute; top: 0; right: 20px; font-size: 10px;} #accessibilityLinks li {display: inline; margin: 0; padding: 0;} #accessibilityLinks li a {margin: 0px .6em; padding: 0px 0px 0px 15px; background: url(../images/design/text_link.gif) no-repeat left; text-decoration: underline; color: #666;} #accessibilityLinks li a:hover {color: #999;} #accessibilityLinks li a.homeLink {background-image: url(../images/design/home_link.gif);} #accessibilityLinks li a.contactLink{background-image: url(../images/design/contact_link.gif);} #accessibilityLinks li a.linksLink{background-image: url(../images/design/links_link.gif);} #accessibilityLinks li a.mapLink {background-image: url(../images/design/map_link.gif);} #imageBox {position: absolute; right: 20px; top: 20px; z-index: 1; width: 300px;} #imageBoxOverlay {display: block; position: absolute; right: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background: url(../images/design/slideshow_overlay.gif) no-repeat left top;} #menu {position: absolute; left: 0; bottom: 0; width: 980px; height: 160px; background: url(../images/design/menu_bg.jpg) no-repeat top left; font-size: 11px;} #menu ul {display: inline; width: 980px; list-style-type: none;} #menu li {display: inline; float: left; padding: 16px 0 0; margin: 0 4px; width: 98px; height: 148px; list-style: none; text-align: center;} #menu li a {display: block; width: 98px; height: 128px; background-repeat: no-repeat; background-position: top; text-decoration: none; color: #666;} #menu li a:hover {color: #999;} #menu li:hover {background-position: center -173px;} #menu li.sfhover {background-position: center -173px;} #menu #mainMenu .menuitem_page_1 {margin-left: 16px; background-image: url(../images/design/menu_1.jpg);} #mainMenu .menuitem_page_2 {background-image: url(../images/design/menu_2.jpg);} #mainMenu .menuitem_page_3 {background-image: url(../images/design/menu_3.jpg);} #mainMenu .menuitem_page_4 {background-image: url(../images/design/menu_4.jpg);} #mainMenu .menuitem_page_5 {background-image: url(../images/design/menu_5.jpg);} #mainMenu .menuitem_page_6 {background-image: url(../images/design/menu_6.jpg);} #mainMenu .menuitem_page_7 {background-image: url(../images/design/menu_7.jpg);} #mainMenu .menuitem_page_8 {background-image: url(../images/design/menu_8.jpg);} #mainMenu .menuitem_page_9 {display: none;} #mainMenu .menuitem_url_1 {background-image: url(../images/design/menu_9.jpg);} #menu #mainMenu li.selected {background-position: center -173px;} #menu #mainMenu li.selected a {color: #999; cursor: default;} #breadcrumbs {float: left; position: absolute; left: 20px; bottom: 5px; width: 960px;} #breadcrumbs p {display: inline; float: left; margin: 0 10px 0 0; font-weight: bold;} #breadcrumbs ul {display: inline; list-style: none;} #breadcrumbs li {display: inline; margin: 0; padding: 0; width: auto; height: auto;} #breadcrumbs li a {display: inline; width: auto; height: auto;} #breadcrumbs li a:hover {text-decoration: underline;} #breadcrumbs li.last .navSeparator{display: none;} #main {clear: both; background: #FAFAFA;} #contentWrapper {position: relative; margin: 0; background: url(../images/design/contentwrapper_bg.jpg) no-repeat left top;} #subnavWrapper {display: inline; float: left; position: relative; margin: 34px 0 0; padding: 0 0 0 20px;} #searchForm {margin: 0 0 20px; width: 200px; height: 40px; background: url(../images/design/searchbox_bg.gif) no-repeat;} #searchForm form {margin: 0;} #searchForm label {display: none;} #searchForm input {display: inline; float: left; margin: 9px 0 0 15px; width: 120px; background: none; border: none; font-size: 12px; font-style: italic; font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif; color: #666666;} #searchForm #go {display: inline; float: right; margin: 5px 10px 0 0; padding: 0; width: 46px; height: 30px;} #subnav {margin: 0; padding: 0; width: 201px;} #subnav .subnavCap {height: 8px; background: url(../images/design/subnav_top.gif) no-repeat top; overflow: hidden;} #subnav ul {margin: 0 0 20px; padding: 0 0 5px; width: 201px; background: url(../images/design/subnav_bg.gif) no-repeat bottom; list-style: none;} #subnav li {margin: 0; padding: 10px 35px 10px 20px; background: url(../images/design/subnav_arrow_grey.gif) no-repeat right; border-top: 1px solid #CCC;} #subnav li a {display: inline; text-decoration: none; color: #274167;} #subnav li a:hover {text-decoration: underline; color: #F1071E;} #subnav li:first-child {padding-top: 2px; background-position: right 7px; border-top: none;} #subnav li.selected {background: #E8E8E8 url(../images/design/subnav_arrow_blue.gif) no-repeat right 10px; border: 1px solid #CCC; border-bottom: none;} #subnav li ul {margin: 0 0 0 20px; width: auto; background: none;} #subnav li li {border: none; background: none;} #subnav li li {padding: 3px;} #subnav li li.selected {background-image: none; border: none;} #subnav li li.selected a {font-weight: bold;} .subnavCapQuickLinks {width: 201px; height: 7px; background: url(../images/design/quicklinks_top.jpg) no-repeat top; overflow: hidden;} ul#quickLinks {margin: 0 0 20px; padding: 0; width: 201px; background: url(../images/design/quicklinks_bg.jpg) no-repeat bottom; list-style: none;} #quickLinks li {margin: 0; padding: 10px 20px 10px 35px; background: url(../images/design/subnav_arrow_white.gif) no-repeat left; border-top: 1px solid #CCC;} #quickLinks li:first-child {padding-top: 3px; background-position: left 7px; border-top: none;} #quickLinks li a {color: #FFF;} #quickLinks li a:hover {color: #CCC;} #content {display: inline; float: right; position: relative; margin: 24px 20px 0 0; padding: 0 0 39px; width: 720px;} #inPageMenu {display: inline; float: left; position: relative; margin: -24px 0 15px 0; padding: 0 10px 0 27px; width: 680px; height: 45px; background: url(../images/design/inner_nav_bg.jpg) no-repeat left top; list-style: none;} #inPageMenu li {display: inline; float: left; margin: 11px 0 0 0; background: url(../images/design/inner_nav_right.jpg) no-repeat top right;} #inPageMenu li a {display: block; margin: 0 12px 0 0; padding: 7px 0 6px 12px; background: url(../images/design/inner_nav_left.jpg) no-repeat top left; font-weight: bold; color: #FFF;} #inPageMenu li.selected {background-image: url(../images/design/inner_nav_selected_right.jpg);} #inPageMenu li.selected a {padding-bottom: 7px; background-image: url(../images/design/inner_nav_selected_left.jpg); color: #666;} #innerInPageMenu {display: block; margin: 10px 0; padding: 0; list-style-type: none;} #innerInPageMenu li {display: inline; float: left; margin: 0 10px 0 0;} #innerInPageMenu li a {display: block; margin: 0 12px 0 0; padding: 5px 10px; font-weight: bold; white-space: nowrap; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} #innerInPageMenu li a:link {background: #7A8A99; border: 1px solid #7A8A99; text-decoration: none; color: #FFF;} #innerInPageMenu li a:visited {background: #7A8A99; border: 1px solid #7A8A99; text-decoration: none; color: #FFF;} #innerInPageMenu li a:hover {background: #E8E8E8; border: 1px solid #7A8A99; text-decoration: none; color: #7A8A99;} #innerInPageMenu li a:focus {background: #E8E8E8; border: 1px solid #7A8A99; text-decoration: none; color: #7A8A99;} #innerInPageMenu li a:active {background: #E8E8E8; border: 1px solid #7A8A99; text-decoration: none; color: #7A8A99;} #innerInPageMenu li.selected a {background: #7A8A99; border: 1px solid #7A8A99; text-decoration: none; color: #FFF; cursor: default;} .newsItem h2 {background: none; font-size: 18px;} #homepageButtons {width: 220px;} #homepageButtons h2 {position: relative; margin: 0 0 10px; width: 220px; height: 30px; overflow: hidden; background: #36698D; color: #FFF;} #homepageButtons h2 span {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/design/home/homebuttons.jpg) no-repeat left top;} #homepageButtons ul {margin: 0; padding: 0; list-style-type: none;} #homepageButtons ul li {display: block; margin: 0; padding: 0;} #homepageButtons ul li a {display: block; padding: 0 0 20px 10px; width: 210px; height: 50px; background: #999 url(../images/design/home/homebuttons.jpg); line-height: 50px; font-size: 16px; font-weight: bold;} #homepageButtons ul li a:link {background-position: 0 -310px; text-decoration: none; color: #CCC;} #homepageButtons ul li a:visited {background-position: 0 -310px; text-decoration: none; color: #CCC;} #homepageButtons ul li a:hover {background-position: -220px -310px; text-decoration: none; color: #FFF;} #homepageButtons ul li a:focus {background-position: -220px -310px; text-decoration: none; color: #FFF;} #homepageButtons ul li a:active {background-position: -220px -310px; text-decoration: none; color: #FFF;} #homepageButtons ul li#spotlightButton a:link{background-position: 0 -30px;} #homepageButtons ul li#spotlightButton a:visited{background-position: 0 -30px;} #homepageButtons ul li#spotlightButton a:hover{background-position: -220px -30px;} #homepageButtons ul li#spotlightButton a:focus{background-position: -220px -30px;} #homepageButtons ul li#spotlightButton a:active{background-position: -220px -30px;} #homepageButtons ul li#vleButton a:link{background-position: 0 -100px;} #homepageButtons ul li#vleButton a:visited{background-position: 0 -100px;} #homepageButtons ul li#vleButton a:hover{background-position: -220px -100px;} #homepageButtons ul li#vleButton a:focus{background-position: -220px -100px;} #homepageButtons ul li#vleButton a:active{background-position: -220px -100px;} #homepageButtons ul li#lettersButton a:link{background-position: 0 -170px;} #homepageButtons ul li#lettersButton a:visited{background-position: 0 -170px;} #homepageButtons ul li#lettersButton a:hover{background-position: -220px -170px;} #homepageButtons ul li#lettersButton a:focus{background-position: -220px -170px;} #homepageButtons ul li#lettersButton a:active{background-position: -220px -170px;} #homepageButtons ul li#sportsButton a:link{background-position: 0 -240px;} #homepageButtons ul li#sportsButton a:visited{background-position: 0 -240px;} #homepageButtons ul li#sportsButton a:hover{background-position: -220px -240px;} #homepageButtons ul li#sportsButton a:focus{background-position: -220px -240px;} #homepageButtons ul li#sportsButton a:active{background-position: -220px -240px;} .paginationLinks {clear: both;} #newsBackLink {display: inline; float: right; margin: 20px 0;} #newsBackLink a {display: block;} #newsFeeds {margin: 30px 10px 0px; font-size: 11px;} #newsFeeds li {list-style: none;} #newsFeeds li a {font-size: 110%;} #newsFeeds img {margin: 0px 10px 0px 0px; padding: 0;} #footer {clear: both; margin: 0 auto; padding: 10px 0; width: 980px; background: url(../images/design/footer_bg.gif) no-repeat left; font-size: 11px; text-align: right; color: #666;} #footer p {margin: 0;} #footer a {text-decoration: none; color: #274167;} #footer a:hover {text-decoration: underline; color: #F1071E;} /* calendar */ #calendar_monthBlock {width: 200px; border-spacing: 1px; border-collapse: separate; text-align: center; color: #FFF;} #calendar_monthBlock thead a {color: #FFF;} #calendar_monthBlock abbr {border-bottom: none; font-size: 10px;} #calendar_monthBlock th {font-weight: normal; text-align: center;} #calendar_monthBlock tbody {font-size: 10px;} #calendar_monthBlock td {background: #C8CDD6; text-align: center; width: 28px; height: 28px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} #calendar_monthBlock td.calendar_inactive {background: #919CAE;} #calendar_monthBlock td.calendar_highlight{background: #FFF url(../images/design/home/calendar_highlight_bg.gif) no-repeat right bottom; font-weight: bold;} #calendar_monthBlock td a {text-decoration: none;} /* end calendar */ /* styling for contact form */ #inputForm1 {width: 400px;} #inputForm1 label {display: inline; float: left; clear: left; font-weight: bold;} #inputForm1 input {display: inline; float: left; clear: left;} #inputForm1 em.required {display: inline; float: left; margin: 0 0 0 5px; color: red;} #inputForm1 .captcha {margin: 5px 0 0;} #inputForm1 input.submitButton {margin: 5px 0 0;} /* for fixing the 'jump to top' issues when someone click on a link */ #marker {display: inline; float: left; position: absolute; top: 595px;} /* and the inevitable 'back to top' link */ #backToTop {display: block; clear: both; text-align: right;} #backToTop a {padding: 0 20px 0 0; background: url(../images/design/up_arrow.gif) no-repeat right;} /* zebra striping on tables */ table.zebraStripe tr.odd {background: #EEE;} table.zebraStripe tr.even {background: #FFF;} /* Required for the editor in the backend. Make sure background images etc are removed in this attrubute... */ #editor {margin: 0px; padding: 0px; width: 720px; min-height: 590px; background-image: none; background-color: #fff; border: 5px solid #898989; text-align: left;} #editor #mainContent, #editor #subContent {border-right: 1px solid #cacaca; min-height: 590px; } #mainContent {float:left; margin: 0;} #mainContent.twoColumns {width: 400px;} #mainContent.even {width: 350px;} #mainContent.reverse {width: 300px;} #subContent {float: right; margin: 0; width: 300px;} #subContent.even {width: 350px;} #subContent.reverse {width: 400px;} /* icons and styles for file attachments -------------------------------------------------- */ ol.fileAttachmentList {padding: 0 0 20px 0; margin: 0; min-height: 40px;} ol.fileAttachmentList li {list-style-type: none; height: 35px; padding-left: 40px; padding-top: 20px; margin-bottom: -10px; background-position: left; background-repeat: no-repeat; } ol.podcastList li {height: auto !important; } ol.podcastList li.attachmentDownload_mp3 {background-position: top left;} ol.fileAttachmentList li.attachmentDownload_doc {background-image: url(../images/icons/doc.gif) !important;} ol.fileAttachmentList li.attachmentDownload_mp3 {background-image: url(../images/icons/mp3.gif) !important;} ol.fileAttachmentList li.attachmentDownload_pdf {background-image: url(../images/icons/pdf.gif) !important;} ol.fileAttachmentList li.attachmentDownload_pub {background-image: url(../images/icons/pub.gif) !important;} ol.fileAttachmentList li.attachmentDownload_zip {background-image: url(../images/icons/zip.gif) !important;} ol.fileAttachmentList li.attachmentDownload_jpg {background-image: url(../images/icons/jpg.gif) !important;} ol.fileAttachmentList li.attachmentDownload_jpeg {background-image: url(../images/icons/jpeg.gif) !important;} ol.fileAttachmentList li.attachmentDownload_gif {background-image: url(../images/icons/gif.gif) !important;} ol.fileAttachmentList li.attachmentDownload_xls {background-image: url(../images/icons/xls.gif) !important;} ol.fileAttachmentList li.attachmentDownload_ppt {background-image: url(../images/icons/ppt.gif) !important;} ol.fileAttachmentList li.attachmentDownload_rar {background-image: url(../images/icons/rar.gif) !important;} ol.fileAttachmentList li.attachmentDownload_rtf {background-image: url(../images/icons/rtf.gif) !important;} ol.fileAttachmentList li.attachmentDownload_txt {background-image: url(../images/icons/txt.gif) !important;} ol.fileAttachmentList li.attachmentDownload_csv {background-image: url(../images/icons/csv.gif) !important;} ol.fileAttachmentList li.attachmentDownload_png {background-image: url(../images/icons/png.gif) !important;} /* Pagination - change border colours if necessary -------------------------------------------------- */ div#pagination {margin-top: 3px; height: 50px;} div#pagination .count {display: inline; float: left; padding: 5px;} div#pagination .pages {display: inline; float: right; padding: 5px;} div.pagination {display: inline; float: right; margin: 3px; padding: 3px;} div.pagination a, .Rows a {margin: 2px; padding: 2px 5px 2px 5px; border: 1px solid #0c1a27; text-decoration: none;} div.pagination a:hover, div.pagination a:active, .Rows a:hover, .Rows a:active {border: 1px solid #999; color: #999;} div.pagination span.current {margin: 2px; padding: 2px 5px 2px 5px; background: #26537a; border: 1px solid #0c1a27; font-weight: bold; color: #FFF;} div.pagination span.disabled {margin: 2px; padding: 2px 5px 2px 5px; border: 1px solid #EEE; color: #DDD;} #comment_form_form div.formFieldContainer label {float:left; margin-left:25px; width:150px;} #comment_form_form div.formFieldContainer input {float:left;} #comment_form_form li#comment_captcha_text {margin-left:175px;} #comment_comment {clear:both;} .caption {padding: 5px; background: #eee; text-align: center; color: #000;}