/* Colours Body text - #323232 Headers and body links - #9a1419 Nav links - #f9bfbf Nav rollover - #fff Nav active - #81080c Right-col courses (Blue) - #085b86 Footer grey text - #828282 */ body {font-family: Arial, Helvetica, sans-serif;font-size: 12px; color:#595959; background:url(library/main-bg.jpg) repeat-x #f3f3f3; } td {font-family: Arial, Helvetica, sans-serif;font-size: 12px;} html, body, div, a, p, h1, h2, h3, h4, h5, span {margin:0; border:0; padding:0; outline:none; } img{border:0;} table{border-collapse:collapse} table td p, table td h2, table td h3{margin:0 0 5px 0} blockquote{margin:10px;} .container{width:960px; height:auto; margin:0 auto;} /* - Header - */ #header-bg{width:100%; height:193px; background:url(library/header-bg.jpg) top center no-repeat;} #header-bg .container{width:206px; height:193px; margin:0 auto; } #slideshow{ width: 630px; height: 304px; z-index:5} #ft-title-slideshow{display:none} /* - Content Area - */ #content-area{width:960px; height:auto; min-height:500px; margin-top:6px; float:left; padding-bottom:30px; background:url(library/right-col-bg.png) top right repeat-y; padding-top:20px;} #left-col{width:630px; height:auto; float:left;} #left-col ul{list-style:none; margin-left:0;padding-left:20px} #left-col ul li{margin-bottom:5px; background:url(library/list-icon.png) no-repeat left 7px;line-height:1.5; padding-left:10px;margin-left:0;} #left-col ol li{line-height:1.5; background:none} .course-detail{width:300px; float:left; } .course-detail a{text-decoration:none} .course-detail p{color:#323232} .course-detail img{margin:5px 5px 0 0} .course-detail h2{font-size:18px} .img-space{padding-bottom:20px;} #student-list li{display:inline} #student-list li a{margin:0 15px 0 0; font-size:14px; font-weight:bold; border-bottom:1px solid #ccc; text-decoration:none} .course_detail_list{padding:10px 0 0 0; margin:10px 0 0 0; border-top:1px solid #e3e3e3;} #left-col .course_detail_list strong{padding:0 0 5px 0; margin:0 0 5px 0; font-size:14px; color:#086390;} #right-col{width:320px; height:auto; float:right;} #blog-right{padding:0 40px} #blog-right ul{margin:10px 0 10px 20px;padding:0} #blog-right li{line-height:1.7} /* Courses links */ #courses{width:327px; height:225px; background:url(library/right-col-courses.jpg) no-repeat;padding-top:78px;} #courses a{display:block; text-indent:-9999px;margin:0 0 10px 20px; cursor:pointer} #itec-btn, #acsm-btn, #stott-btn, #fetac-btn, #itec-btn2, #acsm-btn2, #stott-btn2, #fetac-btn2{position:relative;width:289px; height: 44px;} #itec-btn span.hover, #acsm-btn span.hover, #stott-btn span.hover, #fetac-btn span.hover{position: absolute;top: 0;left: 0;display: block;width:289px; height: 44px; } #itec-btn *, #acsm-btn *, #stott-btn *, #fetac-btn *, #itec-btn2 *, #acsm-btn2 *, #stott-btn2 *, #fetac-btn2 *{ display: none;} #itec-btn{ background: url(library/course-buttons.png) no-repeat 0 0} #itec-btn span.hover{background:url(library/course-buttons.png) no-repeat 0 -44px;} #itec-btn2{ background: url(library/course-buttons.png) no-repeat 0 -88px} #acsm-btn{ background: url(library/course-buttons.png) no-repeat 0 -132px} #acsm-btn span.hover{background:url(library/course-buttons.png) no-repeat 0 -176px;} #acsm-btn2{ background: url(library/course-buttons.png) no-repeat 0 -220px} #stott-btn{ background: url(library/course-buttons.png) no-repeat 0 -264px} #stott-btn span.hover{background:url(library/course-buttons.png) no-repeat 0 -308px;} #stott-btn2{ background: url(library/course-buttons.png) no-repeat 0 -352px} #fetac-btn{ background: url(library/course-buttons.png) no-repeat 0 -396px} #fetac-btn span.hover{background:url(library/course-buttons.png) no-repeat 0 -440px;} #fetac-btn2{ background: url(library/course-buttons.png) no-repeat 0 -484px} #contact-sprite {cursor:pointer; position:relative;width:320px; height:88px; background:url(library/contact-us-sprite.png) no-repeat 0 0; overflow:hidden; display:block; text-indent:-9999px;margin-top:50px} #contact-sprite * { display: none;} #contact-sprite span.hover {position: absolute;top: 0;left: 0;display: block; width:320px; height:88px;background:url(library/contact-us-sprite.png) no-repeat 0 -88px } #pdf-download {cursor:pointer; position:relative;width:320px; height:88px; background:url(library/pdf-download-sprite.png) no-repeat 0 0; overflow:hidden; display:block; text-indent:-9999px;margin-top:50px} #pdf-download * { display: none;} #pdf-download span.hover {position: absolute;top: 0;left: 0;display: block; width:320px; height:88px;background:url(library/pdf-download-sprite.png) no-repeat 0 -88px } #student-sprite {cursor:pointer; position:relative;width:320px; height:88px; background:url(library/student-sprite.png) no-repeat 0 0; overflow:hidden; display:block; text-indent:-9999px;margin-top:30px} #student-sprite * { display: none;} #student-sprite span.hover {position: absolute;top: 0;left: 0;display: block; width:320px; height:88px;background:url(library/student-sprite.png) no-repeat 0 -88px } #facebook-sprite {cursor:pointer; position:relative;width:89px; height:76px; float:left; background:url(library/facebook-icon.png) no-repeat 0 0; overflow:hidden; display:block; text-indent:-9999px;margin:10px 0 0 75px} #facebook-sprite * { display: none;} #facebook-sprite span.hover {position: absolute;top: 0;left: 0;display: block; width:89px; height:76px;background:url(library/facebook-icon.png) no-repeat 0 -76px } #twitter-sprite {cursor:pointer; position:relative;width:83px; height:76px; float:left;background:url(library/twitter-icon.png) no-repeat 0 0; overflow:hidden; display:block; text-indent:-9999px;margin:10px 0 0 0px} #twitter-sprite * { display: none;} #twitter-sprite span.hover {position: absolute;top: 0;left: 0;display: block; width:83px; height:76px;background:url(library/twitter-icon.png) no-repeat 0 -76px } #content-area div#left-col div.course_listing a.enquire-btn{width:173px; height:27px; display:block; color:#fff; text-decoration:none;background:url(library/enquire-btn.png) no-repeat; text-align:center; line-height:1.8;} /* - Footer - */ #footer{ width:100%;float:left;} #footer .container{margin:0 auto;padding-top:10px; width:960px; height: 115px; background:url(library/footer.jpg) no-repeat;} #footer p{margin-left:10px;font-size:11px;margin-bottom:10px;color:#626262 } /*start of the links*/ a:link{text-decoration: underline; color:#086390;} a:visited{text-decoration: underline; color:#086390;} a:active{text-decoration: none; color:#9a1419;} a:hover{text-decoration: none; color:#9a1419;} h1 a:link{color:#9a1419; text-decoration:none} a.nounder:link{ text-decoration:none} #footer a:link, #footer a:visited, #footer a:active {color:#81080c ; text-decoration:none;margin:0 2px } #footer a:hover{text-decoration:none; border-bottom:1px solid #81080c} #homepage #left-col a:link{text-decoration: underline; color:#9a1419;} #homepage #left-col a:visited{text-decoration: underline; color:#9a1419;} #homepage #left-col a:active{text-decoration: none; color:#9a1419;} #homepage #left-col a:hover{text-decoration: none; color:#9a1419;} #left-col h1 a:link, #left-col h1 a:visited, #left-col h1 a:active, #left-col h1 a:hover {color:#9A1419; text-decoration:none} /* - Typography - */ #left-col p{line-height:1.7} h1, h2, h3, h4, h5{color:#9a1419; font-weight:normal;margin-bottom:5px} h1{font-size:25px;} h2{font-size:22px;} h3{font-size:19px;} h4{font-size:16px;} h5{font-size:13px;} p{margin-bottom:15px} h2, h3, h4, h5{margin-top:20px} .course-detail h2{margin-bottom:0} .course-detail p{line-height:1.3!important} #jobs-page #left-col h2{margin-top:30px; font-size:16px} #faq-page #left-col h2{margin-top:30px} .slides h2, .slides h3, .slides h4, .slides h5{margin:10px 0 0 0!important} /****************STYLING THE AREAS PRODUCED BY THE cms*************************/ /*by leaving the following empty the tags will be styled from your regular tags*/ /* ECOMMERCE SITES, PRODUCT LISTING */ div.cms_prod_listing{width:180px;border: solid 1px #A1FF43;float:left; margin:10px;color: #774C4C;text-align: center;height: 220px;}/* the div containing each product */ #cms_addedcart{border: solid 1px #E59497; width: 80%;margin-left: auto;margin-right:auto;background: #E9FDCE; text-align:center; }/*the DIV displaying the message when something has been added to the cart*/ select.cms_form_cart, input.cms_form_cart,submit.cms_form_cart{background: #E4FFCA; font-size: 14px;}/*form fields for the add to cart sections*/ p.error{font-weight: bold; color:#FF0000;}/*the errors shown when adding to cart*/ /* styling the table which contains the cart on the detail page*/ td.cart_header_normal{border: solid 1px #E28FD3;border-right:0px;text-align:center;background: #E4FFCA;height:30px;}/*header / first row, all fields except last to the right*/ td.cart_header_last_right{border: solid 1px #E28FD3;text-align:center;background: #E4FFCA;}/*header / first row, all fields except last to the right*/ td.cart_td_normal{border-left: solid 1px #E28FD3;border-bottom: solid 1px #E28FD3;}/* all td's except last to the right*/ td.cart_td_last_right{border-left: solid 1px #E28FD3;border-bottom: solid 1px #E28FD3;border-right: solid 1px #E28FD3;}/* td's last to the right*/ td.cart_total_left{border:0; height: 30px;line-height: 200%;}/*main cart, total at the bottom*/ td.cart_total_right{border:solid 1px #E28FD3;border-top:0px; height: 30px;line-height: 200%;}/*main cart, total at the bottom*/ div.cms_special_offer{width: 100%;text-align:center;} p.all_offers{}/*the p tag for the link to all offers*/ /* checkout section only*/ #checkout_container{width: 860px; margin-left:auto; margin-right:auto;padding:15px;}/*container contiing all elements for the checkout*/ #checkout_step0_left{width: 99%;}/* the div containing the login palette for step 0, login or register*/ #checkout_step0_right{width: 99%;}/* the div containing the login palette for step 0, login or register*/ h1.checkout{font-size: 18px;color: #E28FD3; background-image: url(library/bullet_li.gif);background-repeat: no-repeat;padding-left: 18px;} p.checkout_steps{}/*The tag showing the links to step by step*/ p.checkout_general{}/*general p tags during checkout*/ div.products_checkout{width: 90%; margin-left:auto; margin-right: auto; border: solid 1px red;} div.checkout_address{border:solid 1px black;padding:10px;width: 80%;margin-left:auto;margin-right:auto; color: #999999;} div.checkout_address_selected{border:solid 1px red;padding:10px;background: #FFFFE1}/* the address currently selected*/ div.checkout_shipment{width: 90%;border: solid 1px red; background: #FFFFFF;margin-left:auto;margin-right:auto;} h2.checkout{font-size: 16px;color: #E28FD3; background-image: url(library/bullet_li.gif);background-repeat: no-repeat;padding-left: 18px;} .main_tr1{background: #F1E0EE} .main_tr2{background: #E7F0D9} /* customer area*/ p.cust_orders{margin-left: 100px;}/*showing the order detail*/ #cust_area{margin:15px;}/*the area where the content is*/ /* Blog styles */ .blog_list_posts{padding:10px; background:none; border:1px solid #e9e9e9; margin:15px 0 0 0} .blog_list_headline, .blog_detail_headline{margin:0px 0 10px 0} .blog_list_headline a{text-decoration:none;} .blog_list_cats, .blog_detail_cats{color:#899ca3;padding:0 0 5px 0; margin:0 0 10px 0; border-bottom:1px solid #e9e9e9} .blog_list_cats a, .blog_detail_cats a{color:#899ca3; text-decoration:none} .blog_list_cats a:hover, .blog_detail_cats a:hover{color:#9a1419} .blog_list_date, .blog_detail_date{color:#899ca3; padding:5px 0 0 0; margin:10px 0 0 0; border-top:1px solid #e9e9e9; } .blog_list_date a, .blog_detail_date a{color:#899ca3;text-decoration:none} .blog_list_date a:hover, .blog_detail_date a:hover{color:#9a1419} .blog_list_more a{color:#9a1419; } .blog_list_more a:hover{color:#086390} .blog_comment{padding:10px; background:#f8f8f8;margin:0 0 10px 0} .blog{font-size:16px;} /* STYLING THE LINKS PAGE(S) */ h2.cms_links_cat{}/* Displays the links categories*/ p.cms_links{}/* Displays the actual link and description*/ a.cms_links{}/*Displays the actual links*/ p.cms_links_empty{}/*The line letting users know there is no links in the database if applicable*/ /* STYLING THE HELP/FAQ PAGE(S) */ p.cms_nofaq{}/*the line showing that there is no faq in the database*/ h3.cms_faq_category{margin-left: 10px;}/*the category of either help or FAQ*/ p.cms_faq_questions{margin:0 0 5px 20px}/*the clickable questions on the faq or help*/ span.cms_faq_title{font-weight: bold;/*display:none;*/}/*this shows weather this is an help or faq, you can hide this using CSS if you do not want to show it*/ a.cms_faq_links{}/*all links within the FAQ section including the back to the top links*/ #cms_faq_spacer{height: 150px;}/*the div allowing you to include space between the last question and the first answer*/ p.cms_faq_answer_title{margin-left: 20px; font-weight:bold;color:#9a1419}/*the title of the answer*/ p.cms_faq_answer_detail{margin-left: 50px;}/*the comment on the answer*/ p.cms_backtop{margin-left: 80px;}/*the P tag containing the back to top link*/ hr.cms_faq_hr{width: 50%;margin-left:auto;margin-right:auto;} /* STYLING THE GOOGLE API MAP */ #cms_api{} /* STYLING THE FORM FIELDS ON THE CONTACT FORM */ input, textarea, select, radio{background: #ffffff; font-size: 12px;font-family:Arial;margin:0 0 10px 0} select{border:0;padding:5px;border:1px solid #cdcdcd;} select:hover, select:focus{border:1px solid #a40007} input, textarea{border:1px solid #cdcdcd; padding:5px;width:auto;} #faq-page #subm{position:relative;left:0px;} input:hover, textarea:hover, input:focus, textarea:focus{border:1px solid #a40007} input.cms_form, textarea.cms_form, radio.cms_form, select.cms_form, submit.cms_form{background: #ffffff; font-size: 12px;font-family:Arial;}/*styling the fields, you can also style them individually*/ #contact-us input.cms_form{border:1px solid #cdcdcd; padding:5px; width:350px;margin-bottom:30px;position:relative; left:-125px;} #contact-us textarea.cms_form{border:1px solid #cdcdcd; padding:5px; height:175px; width:400px;margin-bottom:30px;position:relative; left:-125px;} #contact-us input.cms_form:focus, #contact-us textarea.cms_form:focus{border:1px solid #a40007} #contact-us input.cms_form:hover, #contact-us textarea.cms_form:hover{border:1px solid #a40007} #contact-us form{margin-top:40px} #contact-us form td strong{position:relative; top:-20px;left:-30px;} #contact-us form td img{position:relative; top:-18px;left:-40px } #contact-us form table tr td{text-align:left!important} #subm{position:relative; left:-120px; width:auto; height:30px; background:#84070b; border:1px solid #610105;color:white;font-weight:bold; text-transform:uppercase; -moz-border-radius: 15px; -webkit-border-radius: 15px; cursor:pointer; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25);} #subm:hover{ background:#ac1015} #subm:focus{position:relative; top:1px} #subm2{position:relative; left:0px; width:auto; height:30px; background:#84070b; border:1px solid #610105;color:white;font-weight:bold; text-transform:uppercase; -moz-border-radius: 15px; -webkit-border-radius: 15px; cursor:pointer; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25);} #subm2:hover{ background:#ac1015} #subm2:focus{position:relative; top:1px} #form-style #left-col form #subm{left:0;} #cms_upload_window{border: solid 1px black; background: #FFFFE1;padding:15px;} /* STYLING THE IMAGE GALLERY */ h2.cms_image_gallery{}/*displaying the categories of images*/ div.cms_photo_name{margin-bottom:5px;}/*name of the photo*/ div.cms_image_layout{width:160px; border: solid 1px black; margin:15px;text-align:center;padding-top:4px;padding-bottom:5px;float:left;}/*This is the div which contains the actual thumbnail with name etc*/ div.clearfloat{clear:both;}/*If you are floating the above div, then you might need to cancel the float at the end of category, you can do so by using this div*/ #cms_image_window{border: solid 1px black; width:300px; margin-top:5px;margin-left:auto;margin-right:auto; text-align:center;}/*div styling the container on the window for enlarged images*/ h1.cms_image_window{}/* displays the image name*/ /*styling the news*/ p.cms_current_news{background-image:url(library/bullet_right.gif);background-repeat: no-repeat;padding-left:11px;margin-bottom:0px;}/*displays the listing of news*/ p.cms_current_news_desc{margin-top:0px;margin-left:25px;}/*small description just under the headline on the listing of news*/ p.other_news{}/*the p tag showing the link "to go to archive click here or to go to live news click here*/ h2.cms_news_headline{color: #9F57A4;margin-top:20px;}/*the headline on the news detail page*/ p.cms_news_back{}/*the back link /button on the news detail page*/ /* styling the testimonials page */ div.testimonial_container{}/* full container surrounding each testimonial*/ p.testimonial_text{font-style:italic;}/* actual text*/ p.testimonial_name{font-weight: bold; }/* name and company with link*/ div.testimonial_bottom{ margin-top: 25px; margin-bottom: 25px;width: 100%; height: 5px;background-image: url(library/testimonials_separator.gif); background-repeat: no-repeat;background-position: center;}/* after each testimonial */ /****************END OF STYLING THE AREAS PRODUCED BY THE cms*************************/ /*********************** drop down menu ******************************************************/ /* - Navigation - */ #topnav{list-style:none; width:960px; height:39px;padding:0;margin:6px 0 0 0; float:left;font-size:14px; font-weight:bold;} #topnav li{float:left;padding:0;margin:0 2px 0 0;height:39px; overflow:hidden} #topnav a:hover{background:url(library/nav-rollover-bg.gif) repeat-x bottom left; color:#81080c; } ul#topnav a, ul#topnav span {padding: 10px 22px; float: left;text-decoration: none;background: none; text-transform: uppercase; clear: both; width: 100%;height: 19px;line-height: 20px; color:#f9bfbf;} ul#topnav a{background-position: left bottom; } ul#topnav span{ background-position: left top;} #topnav li.on{background:url(library/nav-rollover-bg.gif) repeat-x bottom left; cursor:default;} #topnav li.on span{color:#81080c; background:url(library/nav-rollover-bg.gif) repeat-x bottom left; cursor:default;} #topnav li.on a{color:#81080c} #topnav li ul { /* second-level lists */ position: absolute;width: 180px; list-style:none;z-index:100; left: -999em; margin-top:38px;/*margin-left: -40px;*//* using left instead of display to hide menus because display: none isn't read by screen readers */} #topnav li ul li{width:200px;height: 39px;border-top:1px solid #820408; margin-left:-40px; border-bottom:1px solid #ca272c;text-align:left; z-index:150; padding:0; background-color: #A11015;background-image: url(library/link_under.gif);background-repeat: repeat-x;} #topnav li ul li a{width:182px; height:39px; padding:0 0 0 18px; margin:0; line-height:2.8!important} #topnav li ul a:link {display: block;color: #f9bfbf; font-weight:bold;text-decoration: none;} #topnav li ul a:visited {display: block;color: #f9bfbf; font-weight:bold;text-decoration: none;} #topnav li ul a:active {display: block;color: #f9bfbf; font-weight:bold;text-decoration: none;} #topnav li ul a:hover {display: block;color: #81080c; font-weight:bold;text-decoration: none;} #topnav li ul li ul li a{line-height:1!important; padding-top:8px; height:31px;} #topnav li:hover ul ul, #topnav li.sfhover ul ul {left: -999em;margin:0 0 0 200px } #topnav li:hover ul, #topnav li li:hover ul, #topnav li.sfhover ul, #topnav li li.sfhover ul { /* lists nested under hovered list items */ left: auto;} #topnav li:hover {background-position: 0 0} .push-left{ font-size:11px;border-left:1px solid #fff; } .push-left a{line-height:1!important} #clear {clear: left;color: #ccc;} /******************************** end of drop down menu ***************************************/ /*Sliding tabs on the walks and search*/ #sliding_tabs { width:100%; margin-right:auto; margin-left:auto;} .slides{background-color: #f3f3f3; width: auto;} #sliding_tabs ul, .slides-nav { margin: 0; padding: 0;list-style-type: none; /* height: 1%;*/ /* IE fix */} #sliding_tabs ul:after {content: "."; clear: both; display: block; height: 0; visibility: hidden;} /* ---------------------------------------------------- */ /* SLIDESHOW > SLIDES /* ---------------------------------------------------- */ #sliding_tabs .slides { overflow: hidden;width: 100%;background:url(library/slides-bg.png) no-repeat top left; padding:10px } #slide-one, #slide-two, #slide-three, #slide-four, #slide-five{list-style:none; background:none!important} #sliding_tabs .slides li { width: 560px; float: left;} #sliding_tabs .slides h2 { margin-top: 0;} /* ---------------------------------------------------- */ /* SLIDESHOW > NAVIGATION /* ---------------------------------------------------- */ #sliding_tabs .slides-nav { background-color: #f3f3f3;width: 600px;} #sliding_tabs .slides-nav li {float: left;width: auto;line-height:2.4!important; height: 31px;padding:0; margin:0 5px; background-image: url(library/tab.jpg);background-repeat: no-repeat; background-color:#e2e2e2; font-size:12px; font-weight:bold; text-align: center;margin-bottom:-1px; -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px;} #sliding_tabs .slides-nav li a { display: block; outline: none;color:#005579; text-decoration:none; height: 31px;font-weight:bold; padding:0px 5px 0 5px;} #sliding_tabs .slides-nav li a:hover { text-decoration:none; background:#d9e8ef ; -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px;} #sliding_tabs .slides-nav li.on a {padding:0px 5px 0 5px;text-decoration: none; color:#fff; background:#005579; -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px;} div.slides ul li ul li{clear:left;} #home_news{width: auto; padding: 10px; border: solid 1px #999;margin-top: 15px;} /***************************** courses **************************/ .course_listing{width: 610px; border: solid 1px #dfdfdf;padding:10px;margin:10px 0 0 0} .course_listing h4{margin-top:0; font-weight:bold} .less_but, .full_info{display:none;} #content-area div#left-col div.course_listing .more_but a, #content-area div#left-col div.course_listing .less_but a{width:40px; margin:10px 0 0 0; text-align:center; line-height:1.4; height:17px; font-size:11px;width:47px; color:#fff; display:block; background:url(library/more-btn.png) no-repeat; text-decoration:none} .courses_plus, .courses_less{width: 14px; height:14px; border:0;margin:10px 0; text-indent:-9999px;} .courses_plus a,.courses_less a{width:100%;height:100%; display:block} .courses_plus a{background:url(library/plus-info.png) no-repeat} .courses_less a{background:url(library/less-info.png) no-repeat} .courses_less,.courses_extra{display:none;}