/* (c) 2008 Bam Creative Title : style.css Author : Bam Creative Description : Stylesheet */ /* GLOBAL SETTINGS------------------------------------- GLOBAL SETTINGS */ html { height:100%; } body { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 1em; /* MASTER font-size controller */ color: #444343; /* MASTER text colour controller */ background:#ffffff; background:url(../art/bg.gif) repeat-x; height:100%; } .bg{ } .push { height:454px; } /*-- this controls the tinymce area --*/ .mceContentBody { background-image: none; background-color: #fff; } #bg { background:url(../art/bg.jpg) center top no-repeat; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -454px auto; /* negative value must be the same height as footer (for stickyness) */ } /*-- this controls the tinymce area --*/ .mceContentBody { background-image: none; background-color: #fff; } /* LINKS -------------------------------------------------------- LINKS */ a { color:#69b970; text-decoration:none ; } a:hover { text-decoration:underline ; } /* HEADINGS -------------------------------------------------- HEADINGS */ h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; padding: 0; padding-bottom: 0.2em; } h1 { font-size: 2.2em; color:#ed5250; } h2, h3, h4, h5, h6{ padding-top:0.3em; } h2 { font-size: 1.5em; font-weight: 600; color:#60cb71; } h3 { font-size: 1.4em; font-weight: 600; color:#1e9ed7; } h4 { font-size: 1.3em; line-height: 1.2em; font-weight: bold; color:#ed5250; } h5 { font-size: 1.2em; font-weight: bold; padding-bottom: 0.2em; color:#60cb71; } h6 { font-size: 1.1em; font-weight: bold; padding-bottom: 0.2em; color:#1e9ed7; } /* PARAGRAPHS ---------------------------------------------- PARAGRAPHS */ p { font-size: 100%; line-height: 1.4em; padding: 0 0 1.4em 0; } /* LISTS -------------------------------------------------------- LISTS */ ul, ol { padding:0 0 1.25em 2.5em; } #content li, body#tinymce li { font-size: 100%; line-height: 1.6em; } #content ul li, body#tinymce ul li { list-style-image:url(../art/bullet.png); } /*-- nested lists --*/ #content ul ul, body#tinymce ul ul { padding: 0 0 0 1.5em; } #content ol ol, body#tinymce ol ol { padding: 0 0 0 1.5em; } /* LAYOUT ------------------------------------------------------ LAYOUT */ #container { width:960px; margin: 0 auto; position: relative; } #header { } #content { width:650px; padding: 0 0 20px 0; float:left; } #page-content { /* all bamCMS content goes inside here: shouldn't need styling really */ } #footer { height:454px; background:url(../art/footer.gif) no-repeat center; } .inner-footer{ width:960px; margin:0 auto; } .copyright { float: left; margin-top:330px; } .credits { float: right; margin-top:330px; } /* TABLES ------------------------------------------------------ TABLES */ /*-- data table --*/ table.custom-data-table { border: 1px solid #ccc; border-bottom: none; border-right: none; width: 100%; border-collapse:collapse; } table.custom-data-table th, table.custom-data-table td { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 4px; text-align: center; line-height: normal; } table.custom-data-table th{ background-color: #eee; font-weight: bold; padding:9px; height: 23px; color: #666; line-height: normal; } table.custom-data-table td { color: #676767; font-size: 12px; text-align: left; } table.custom-data-table td.right { text-align: right; } /* MISC --------------------------------------------------------- MISC */ hr { background: #ccc;/*NS FF OP */ color: #ccc;/*IE*/ border: none;/*FF NS OP*/ height: 1px;/*FF NS OP*/ width: 100%; } /* FORMS -------------------------------------------------------- FORMS */ .newsletter{ margin-top:20px; } .newsletter input{ color: #333; font-family: Verdana, sans-serif; border: #c6c6c6 1px solid; float: left; padding: 5px; width: 350px; margin: 0; position: relative; display: block; } .newsletter label { padding:0 0 5px 0; float: left; width:60px; display: block; } .newsletter input.subscribe { border: 0; background: url(/art/subscribe.gif) 0 0; width: 127px; height: 39px; display: block; margin-left:295px; cursor: pointer; text-indent: -9999px; } .newsletter input.subscribe:hover { background: url(/art/subscribe.gif) -127px 0px; } #home-search { padding:10px 0 0 36px; clear:both; display:block; } #home-search #searchform input { background:#d4d5d5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border:0; border-top:1px solid #c3c4c4; border-left:1px solid #c3c4c4; padding:8px; margin:0; vertical-align:top; width:198px; cursor:pointer; color:#4a4a4a; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; } #home-search #searchform input.submit { background:url(/art/search-icon.jpg) no-repeat 0 2px #d4d5d5; width:35px; height:33px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; margin:0 0 0 -5px; border-left:0px solid #c3c4c4; font-size:0; line-height:0; text-indent:-99999px; } #searchform input.submit:hover { background:url(/art/search-icon.jpg) no-repeat -35px 2px #d4d5d5; } form.pagecontentform fieldset { border: 0; position: relative; padding: 10px 0; margin: 0 0 10px 0px; width: 463px; overflow: hidden; } form.pagecontentform fieldset.submit { background: none; } form.pagecontentform fieldset ol { margin: 0; padding: 0; } form.pagecontentform fieldset li { float: left; margin: 0 0 7px 0px; display: inline; padding: 0; } form.pagecontentform fieldset legend { position: absolute; top: -20px; text-indent: -9999px; display: none; } #searchform { display:block; margin-bottom:20px; height:30px; } form.pagecontentform input, form.pagecontentform textarea, #content #searchform input { color: #333; font-family: Verdana, sans-serif; border: #c6c6c6 1px solid; float: left; padding: 5px; width: 450px; margin: 0; position: relative; display: block; } #content #searchform input { width:250px; } form.pagecontentform fieldset.submit button, #content #searchform input.submit { border: 0; background: url(/art/send.gif) 0 0; width: 97px; height: 41px; display: block; float: right; cursor: pointer; text-indent: -9999px; } #content #searchform input.submit { float:left; background:#22afef; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; text-align:center; text-indent:inherit; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; font-size:1em; width:auto; height:auto; text-shadow:1px 1px #20a3de; padding:4px 4px 3px; margin-left:5px; } #content #searchform input.submit:hover { background:#209cd4; text-shadow:1px 1px #1e92c7; } form.pagecontentform fieldset.submit button:hover { background: url(/art/send.gif) -97px 0px; } form.pagecontentform input { background: url(/art/inputbg.gif) repeat-x #f0f0f0; font-size: 12px; } form.pagecontentform label { padding:0 0 5px 0; float: left; display: block; } form.pagecontentform textarea { background: url(/art/textareabg.gif) repeat-x #f0f0f0; font-size: 12px; } form.pagecontentform fieldset .checkboxinput input { float: left; width: auto; margin: 3px 5px; } .alert{ color:#ed5250; } /* No generic form styling shall be applied here as it causes too many problems with Bamcms admin area. Instead, use classes or ids on forms to style. For more information refer to the CSS and XHTML Best Practices Manual */ /* CUSTOM CLASSES -------------------------------------- CUSTOM CLASSES */ .clear { clear: both; } /* Any classes that start with the "custom-" prefix will automatically be made available in the TinyMCE Styles drop down menu. For example: .custom-red-text { color: #F00; } */ .kids{ position:absolute; top:105px; left:430px; z-index:7; } /*Fades ----------------------------------------- */ .act a span { display:none; } .act a.log, .act a.log .hover, #ea, #ea .hover { display:block; padding:0; height:66px; background:url(../art/login.gif) no-repeat; width:199px; cursor:pointer; float:right; } #ea, #ea .hover { background:url(../art/educators-area-btn.jpg) no-repeat; } .act a.log, #ea { background-position: 0 0; } .act .highlight a.log:hover, .act a.log .hover, #ea .hover { background-position:-199px 0px; } .act a.career, .act a.career .hover{ display:block; padding:0; height:260px; width:258px; cursor:pointer; float:right; outline:none; border:none; background:url(../art/cloud.png) no-repeat; } .act a.career { background-position: 0 0; } .act a.career .hover, .act .highlight a.career:hover{ background-position:-259px 0px; outline:none; border:none; } .act a.child, .act a.child .hover { display:block; padding:0; height:59px; background:url(../art/childcare.gif) no-repeat; width:247px; cursor:pointer; float:right; } .act a.child { background-position: 0 0; } .act .highlight a.child:hover, .act a.child .hover { background-position:-247px 0px; } .act a.support, .act a.support .hover { display:block; padding:0; height:59px; background:url(../art/support.gif) no-repeat; width:247px; cursor:pointer; float:right; } .act a.support{ background-position: 0 0; } .act .highlight a.support:hover, .act a.support .hover { background-position:-247px 0px; } /*positioners for fades*/ #co, #co2{ position:relative; margin-right:6px; margin-top:20px; } #lp, #ea{ position:absolute; top:109px; left:758px; } /*End Fades ----------------------------------------- */ .side{ float:right; width:290px; margin-top:-50px; } /*Subnav ----------------------------------------- */ .more-in-this-section { background:url(/art/more-in-this-section.png); display:block; width:259px; height:119px; margin-left:32px; } .more-in-this-section a{ text-indent:-9999px; float:left; display:block; width:259px; height:119px; } .subnav-btm { background:url(/art/subnav-btm.png); display:block; widtH:259px; height:18px; margin-left:32px; clear:both; margin-bottom:30px; } ul#sub-nav { border-left:4px solid #ffffff; border-right:4px solid #ffffff; background:#dd4b48; width:230px; margin-left:32px; padding:5px 10px; } #sub-nav li, #sub-nav { margin:0; padding:0; list-style:none; } #sub-nav li a { color:#ffffff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-decoration:none; font-size:1em; padding:5px 8px; display:block; border-left:1px solid #dd4b48; border-top:1px solid #dd4b48; } #sub-nav li { padding-bottom:2px; } #sub-nav li a:hover, #sub-nav li a.active { background:#c5413f ; border-left:1px solid #b13a39; border-top:1px solid #b13a39; } #sub-nav li a.active { background:url(/art/subnav-active.jpg) no-repeat 6px 7px #c5413f; padding-left:25px; } #sub-nav li ul { margin-top:3px; border-bottom:1px dotted #9b3533; padding:0; } #sub-nav li ul li a, #sub-nav li ul li a:hover { font-size:.9em; padding:4px 7px; padding-left:25px; }