/***************/ /* main layout */ /***************/ body { margin: 0; padding: 0; /* backgrounds? */ } #bodyWrapper { width: 959px; margin: auto; margin-top: 10px; } /* specific link colours for this site */ a:link { color: #fff; text-decoration: none; } a:visited { color: #fff; text-decoration: none; } a:hover { color: #ccc; text-decoration: underline; } a:active { color: #ccc; text-decoration: underline; } /*******************/ /* header elements */ /*******************/ #logoContainer { float: left; margin-left: 14px; } #signupContainer { float: right; margin-top: 12px; } /* not quite header but yeah */ #nav { margin: 7px 0 0 17px; } #nav ul { margin: 0; padding: 0; } #nav li { margin: 0; padding: 0; list-style: none; color: #FFFFFF; display: inline; margin-right: 15px; } /********************/ /* content elements */ /********************/ #page { padding-top: 10px; } #left { float: left; width: 697px; } #right { float: right; width: 233px; } #page .content { padding: 0 22px; } #page .content a { color:#009b14;} #page .content a:hover { color:#999999;} #page #left { background: #1c1c1c top left no-repeat; color: #fff; } /* specific pages have different main (background) images */ #page.home #left { background-image: url(../images/main_home.jpg); } #page.about #left { background-image: url(../images/main_other.jpg); } #page.plan #left { background-image: url(../images/main_other.jpg); } #page.staff_profiles #left { background-image: url(../images/main_other.jpg); } #page.photo_gallery #left { background-image: url(../images/main_other.jpg); } #page.news #left { background-image: url(../images/main_other.jpg); } #page.events #left { background-image: url(../images/main_other.jpg); } #page.blog #left { background-image: url(../images/main_other.jpg); } #page.testimonials #left { background-image: url(../images/main_other.jpg); } #page.case_studies #left { background-image: url(../images/main_other.jpg); } #page.links #left { background-image: url(../images/main_other.jpg); } #page.contact #left { background-image: url(../images/main_other.jpg); } #page.jobs #left { background-image: url(../images/main_other.jpg); } #page.enquiry #left { background-image: url(../images/main_other.jpg); } #page.downloads #left { background-image: url(../images/main_other.jpg); } #page.iag_area #left { background-image: url(../images/main_other.jpg); } #page.young_programmes #left { background-image: url(../images/main_other.jpg); } #page.young_training #left { background-image: url(../images/main_other.jpg); } #page.young_contact #left { background-image: url(../images/main_other.jpg); } #page.employers_programmes #left { background-image: url(../images/main_other.jpg); } #page.employers_training #left { background-image: url(../images/main_other.jpg); } #page.employers_contact #left { background-image: url(../images/main_other.jpg); } #page.schools_programmes #left { background-image: url(../images/main_other.jpg); } #page.schools_training #left { background-image: url(../images/main_other.jpg); } #page.schools_contact #left { background-image: url(../images/main_other.jpg); } /* special links */ #page.young_programmes .special a, #page.young_training .special a, #page.young_contact .special a { color: #009b14; } #page.employers_programmes .special a, #page.employers_training .special a, #page.employers_contact .special a { color: #a20b34; } #page.schools_programmes .special a, #page.schools_training .special a, #page.schools_contact .special a { color: #fa7113; } /* home page news */ #page.home #news { width: 270px; float: right; padding-right: 22px; } #page.home #news .newsItem { margin-bottom: 20px; border-bottom: 2px groove #fff; } #page.home #news .newsTitle { font-size: 1.23em; margin: 0; padding: 0; color:#1c8a2b; } #page.home #news .moreLink { text-align: right; margin: 5px; } #page.home #news .moreLink a { color: #666; } /* news page news */ #page.news #news { padding: 0 22px; } /* welcome */ #welcome { padding-left:20px; padding-right:20px; width:350px; } /* seminars */ #seminar { width: 235px; float: right; padding-right: 20px; } #seminar .odd { height: 16px; background-color: #ededed; color: #424242; padding: 4px; } #seminar .even { height: 16px; background-color: transparent; color: #ededed; padding: 4px; } #seminar .date { width: 170px; } #seminar .date a { color: #093; } /* news */ .newsItem { margin-top: 10px; } .newsItem .newsTitle { font-weight: bold; font-size: 1.23em; } .newsItem .newsDate { font-style: italic; } .newsItem .newsContent { } .newsItem .newsContent .newsImage { float: left; margin-right: 5px; margin-bottom: 5px; } /* events */ .event { margin-top: 10px; } .event .eventTitle { font-weight: bold; } .event .eventDate { font-style: italic; } .event .eventContent { } /* blog items */ .blogItem { margin-top: 10px; } .blogItem .blogTitle { font-weight: bold; } .blogItem .blogAuthor { font-style: italic; } .blogItem .blogDate { font-style: italic; } .blogItem .blogContent { } .blogItem .blogContent .newsImage { float: left; margin-right: 5px; margin-bottom: 5px; } /* testimonials */ .testimonial { margin-top: 10px; } .testimonial .testimonialTitle { font-weight: bold; } .testimonial .testimonialContent { } /* case studies */ .case { margin-top: 10px; } .case .caseTitle { font-weight: bold; } .case .caseContent { } /* links */ .link { padding-botom: 10px; } /* staff profiles */ .staff { margin-top: 10px; } .staff .staffName { font-weight: bold; background-color:#FFFFFF; font-size:1.2em; padding:4px; color:#333333;} .staff .staffName a { color:#333333; } .staff .staffPosition { font-style: italic; padding-left:5px; } .staff .staffContent { margin-top:10px; } .staff .staffContent .staffImage { float: left; margin-right: 5px; margin-bottom: 5px; margin-top:5px; border:4px solid #FFFFFF; } /********************/ /* footer elements */ /********************/ #sock { background: url(../images/footer_right.jpg) no-repeat right #c3c3c3; height: 30px; margin-top: 10px; } #foot { background: url(../images/footer_left.jpg) no-repeat top left; padding: 6px 0 10px 10px; float:left; width:590px; } #toes { float:right; text-align:right; width:200px; padding: 6px 10px 0 0;} #toes a { color:#666666;} #foot a:link, #foot a:visited { color: #555; } #foot a:hover, #foot a:active { color: #777; } /******************/ /* general styles */ /******************/ .floatleft { float: left; } hr { border-bottom: dashed #000 1px; height: 1px; border-top: none; border-left: none; border-right: none; } /*****************/ /* photo gallery */ /*****************/ div.galleryItem { /* one gallery item */ width: 100px; height: 100px; float: left; margin: 5px; } /***********************/ /* general form styles */ /***********************/ #contactform { float: left; } /* the contact form itself */ #contact { float: right; } /* contact info or whatever on right */ /* all form elements are contained within a formrow div, with a label and * then the element, this is the best way (but still not good) to emulate * a table */ div.formrow { clear: both; text-align: left; margin-bottom: 10px; } div.formrow label { float: left; text-align: right; margin-right: 10px; width: 80px; /* default width for a default form, add new form ids and override */ } div.formrow.indent { margin-left: 90px; } /* label width + label margin-right, override as above */ /* message and error boxes, not just useful in contact form */ div.box { border: 1px solid #080; color: #080; padding: 3px 5px; margin-bottom: 15px; float: left; } /* you may need to clearfix this */ div.box.nomargin { margin-bottom: 0; } /* if before something with a margin-top */ div.box.error { border-color: #f00; color: #f00; } /* error box in red */