/* Description: project name here Version: 1.0 Author: MARK WATTS 1. RESETS 2. 960 GRID 3. GENERIC 4. TEXT 5. BUTTONS 6. NAVIGATION 7. STYLES 8. PNG Support in IE (CSS Only) */ /* 1. RESETS ----------------------------------------------------------------------------------------------------*/ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0} /* 2. 960 GRID & LAYOUT ----------------------------------------------------------------------------------------------------*/ #header {height: 125px;z-index: 100} /*#intro {top: 55px; width:100%;margin-left:auto;margin-right:auto; background: url(../images/bgs/intro-grey.png) no-repeat 0 0;}*/ #intro {top: 45px; width:100%;margin-left:auto;margin-right:auto; background: url(../images/bgs/intro-base2.png) repeat-x left bottom;} #content {width:100%;margin-left:auto;margin-right:auto; background: url(../images/bgs/content-grey.png) repeat-x 0 0; padding-top: 60px} #footer {width:100%; height: 200px; padding-top:35px; margin-left:auto;margin-right:auto;background: #c8c8c8;} #footer p {font-size: 10px; color: #666;padding: 0} #footer img {float: left; padding-right: 5px; padding-bottom: 10px;} #footerlogos img {float: right; padding-right: 0px;} body#intro #footer,body#selection #footer {width:100%; height: 200px; padding-top: 50px; margin-left:auto;margin-right:auto;font-size: 10px; color: #666;background: #fff;} body#darkpurple #footer {width:100%; height: 200px; padding-top: 50px; margin-left:auto;margin-right:auto;font-size: 10px;color: #666;} .container_contentpos {margin-left: -485px; position: absolute; left: 50%; width: 970px; visibility: visible;} .container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}.container_12 .grid_3,.container_16 .grid_4{width:220px}.container_12 .grid_6,.container_16 .grid_8{width:460px}.container_12 .grid_9,.container_16 .grid_12{width:700px}.container_12 .grid_12,.container_16 .grid_16{width:940px}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_16 .grid_1{width:40px}.container_16 .grid_2{width:100px}.container_16 .grid_3{width:160px}.container_16 .grid_5{width:280px}.container_16 .grid_6{width:340px}.container_16 .grid_7{width:400px}.container_16 .grid_9{width:520px}.container_16 .grid_10{width:580px}.container_16 .grid_11{width:640px}.container_16 .grid_13{width:760px}.container_16 .grid_14{width:820px}.container_16 .grid_15{width:880px}.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}html body * span.clear,html body * div.clear,html body * li.clear,html body * dd.clear{background:none;border:0;clear:both;display:block;float:none;font-size:0;list-style:none;margin:0;padding:0;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0}.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block} /* 3. GENERIC ----------------------------------------------------------------------------------------------------*/ body {color: #77778a; font:12px/1.5 Helvetica, Arial, sans-serif; padding: 0; margin: 0;background: #FFF;} body#intro {background: #FFF url(../images/header-bg.png) repeat-x 0 0;} body#selection {background: #FFF url(../images/header-bg.png) repeat-x 0 0;} body#purple {background: #702a85 url(../images/header-bg.png) repeat-x 0 0;} body#darkpurple {background: #1d0c39 url(../images/header-bg.png) repeat-x 0 0;} body#grey {background: #f5f5f5 url(../images/header-bg.png) repeat-x 0 0;} body#white {background: #ffffff url(../images/header-bg.png) repeat-x 0 0;} body#darkgrey {background: #666 url(../images/header-bg.png) repeat-x 0 0;} body#green {background: #667A00 url(../images/header-bg.png) repeat-x 0 0;} .debug {border: 1px red solid;} .white_bg {background: #FFF;} .grey_bg {background: #999;} /* alignment */ .fr {float: right;}.fl {float: left;}.al {text-align: left;}.ar {text-align: right;}.ac {text-align: center;margin: 0 auto;} /* border */ .bn {border: 0;} /* padding */ .pn{padding: 0;}.mn{margin: 0;}.mnl{margin-left: 0;}.mnr{margin-right: 0;}.mnt{margin-top: 0;}.mnb{margin-bottom: 0;} .p10{padding: 10px;}.p20{padding: 20px;}.p30{padding: 30px;} .pt5{padding-top: 5px;}.pt10{padding-top: 10px;}.pt20{padding-top: 20px;}.pt30{padding-top: 30px;}.pt40{padding-top: 40px;}.pt50{padding-top: 50px;}.pt75{padding-top: 75px;}.pt100{padding-top: 100px;} .pr5{padding-right: 5px;}.pr10{padding-right: 10px;}.pr20{padding-right: 20px;}.pr30{padding-right: 30px;}.pr40{padding-right: 40px;} .pb10{padding-bottom: 10px;}.pb20{padding-bottom: 20px;}.pb30{padding-bottom: 30px;}.pb40{padding-bottom: 40px;}.pb50{padding-bottom: 50px;} .pl5{padding-left: 5px;}.pl10{padding-left: 10px;}.pl20{padding-left: 20px;}.pl25{padding-left: 25px;}.pl30{padding-left: 30px;}.pl40{padding-left: 40px;}.pl50{padding-left: 50px;}.pl100{padding-left: 100px;} /* margin */ .mt10{margin-top: 10px;}.mt20{margin-top: 20px;}.mt30{margin-top: 30px;}.mt40{margin-top: 40px;}.mt50{margin-top: 50px;} .mr10{margin-right: 10px;}.mr20{margin-right: 20px;}.mr30{margin-right: 30px;}.mr40{margin-right: 40px;}.mr50{margin-right: 50px;} .mb10{margin-bottom: 10px;}.mb20{margin-bottom: 20px;}.mb30{margin-bottom: 30px;}.mb40{margin-bottom: 40px;}.mb50{margin-bottom: 50px;} .ml10{margin-left: 10px;}.ml20{margin-left: 20px;}.ml30{margin-left: 30px;}.ml40{margin-left: 40px;}.ml50{margin-left: 50px;} .ml-40 {margin-left: -40px} .mr-40 {margin-right: -40px} /* 4. TEXT ----------------------------------------------------------------------------------------------------*/ .lgrey {color: #999} .dgrey {color: #333} .offwhite {color: #e5e5e5} a:focus{outline:1px dotted invert} hr{border-color:#ccc;border-style:solid;border-width:1px 0 0;clear:both;height:0;} ol{list-style:decimal} ul{list-style:square} li{margin-left:0; list-style-position: inside} p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:0} p {font-size: 12px; line-height: 20px; padding-bottom: 20px; } sup {font-size: 9px;font-weight: 300;vertical-align:20px;} em {font-weight: 600; font-style: italic;} .intro {font-size: 14px; line-height: 24px; color: #77778a;} a:link {color: #94799d;text-decoration: none} a:visited {color: #94799d;} a:hover {color: #9acf21;} a:active {color: #9acf21;} h1{font-size:24px; color: #333333;} h2{font-size:18px; color: #65468c; padding-top: 10px} h3{font-size:14px; color: #666666;} h4{font-size:16px; color: #77778a;} h5{font-size:17px; color: #333333;} h6{font-size:15px; color: #333333;} #purple h1{font-size:24px; color: #e5e5e5;} #purple h2{font-size:18px; color: #65468c;} #purple h3{font-size:14px; color: #eee;} #purple h4{font-size:16px; color: #333333;} #purple h5{font-size:17px; color: #333333;} #purple h6{font-size:15px; color: #333333;} #purple p {color: #e5e5e5;} #purple ul {color: #65468c} #purple a:link {color: #9acf21;text-decoration: none} #purple a:visited {color: #9acf21;} #purple a:hover {color: #65468c;} #purple a:active {color: #FFF;} #grey h1{font-size:24px; color: #333333;} #grey h2{font-size:18px; color: #65468c;} #grey h3{font-size:14px; color: #333;} #grey h4{font-size:16px; color: #333333;} #grey h5{font-size:17px; color: #333333;} #grey h6{font-size:15px; color: #333333;} #grey p {color: #333333;} #grey ul {color: #65468c} #grey a:link {color: #9acf21;text-decoration: none} #grey a:visited {color: #9acf21;} #grey a:hover {color: #65468c;} #grey a:active {color: #FFF;} #white h1{font-size:24px; color: #333333;} #white h2{font-size:18px; color: #65468c;} #white h3{font-size:14px; color: #333;} #white h4{font-size:16px; color: #333333;padding: 0;margin: 0} #white h5{font-size:17px; color: #333333;} #white h6{font-size:15px; color: #333333;} #white p {color: #333333;} #white ul {color: #65468c} #white a:link {color: #9acf21;text-decoration: none} #white a:visited {color: #9acf21;} #white a:hover {color: #65468c;} #white a:active {color: #FFF;} /* 5. BUTTONS ----------------------------------------------------------------------------------------------------*/ #button-link {width:50px; height:25px; text-decoration:none;display:block; background-image:url(../images/btns/xxx.gif); background-position:0 0;} #button-link:hover,#button-link:active {background-position: 50px 0;} /* 6. NAVIGATION setup/styles ----------------------------------------------------------------------------------------------------*/ .book-nav-bg {background: url(../images/book-nav-bg.png) no-repeat -30px 0; width:155px;} ul#nav {list-style: none; padding-top: 10px; font-weight: 700; float: right} ul#nav li {float: left; text-transform: uppercase; height: 32px; padding: 6px 15px 0 0; font-size: 11px; font-family: Helvetica, Arial, sans-serif;} ul#nav a:link {color: #333; text-decoration: none;} ul#nav a:hover {color: #702a85; text-decoration: none;} ul#nav a:visited {color: #333; text-decoration: none;} * html ul#nav a {color: #702a85; text-decoration: none;} #page-who #header ul#nav li.who a {border-bottom: 2px solid #00a3dd;} #page-services #header ul#nav li.services a {border-bottom: 2px solid #00a3dd;} #page-costs #header ul#nav li.costs a {border-bottom: 2px solid #00a3dd;} #page-contact #header ul#nav li.contact a {border-bottom: 2px solid #00a3dd;} ul { list-style: none; } /* LEVEL ONE */ #header a:link {color: #333;text-decoration: none} #header a:visited {color: #333;text-decoration: none} #header a:hover {color: #702A85;text-decoration: none} #header a:active {color: #702A85;text-decoration: none} /* ul.dropdown li ul.sub_menu li a {text-decoration: none} */ ul.dropdown { position: relative;z-index: 1000; padding-top: 8px;float: right;} ul.dropdown li { font: 11px Helvetica, Sans-Serif; font-weight: 600; letter-spacing: +0.35px; text-transform: uppercase; float: left; zoom: 1; background: transparent; } ul.dropdown a:hover { color: #FFF; } ul.dropdown a:active { color: #333;} ul.dropdown li a { padding-left: 10px; padding-bottom: 9px; padding-right: 10px; padding-top: 8px; display: block; border-right: 0px solid #333; color: #FFF; } ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */ ul.dropdown li.hover, ul.dropdown li:hover { background: #FFF url(../images/menu-bg.png) repeat-x 0 0; color: #FFF; position: relative;opacity: 0.9; } ul.dropdown li.hover a { color: white; } /* LEVEL TWO */ ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; } ul.dropdown ul li { font-weight: normal; background: #E5E5E5; color: #FFF; border-bottom: 1px solid #ccc; float: none; width: 70%;} /* IE 6 & 7 Needs Inline Block */ ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; } /* LEVEL THREE */ ul.dropdown ul ul { left: 100%; top: 0; } ul.dropdown li:hover > ul { visibility: visible; } /* BOOK ONLINE */ ul.dropdown li#book a:link,ul.dropdown li#book a:visited {background: transparent url(../images/book-bg.png); color: #fff} /* CURRENT PAGE */ body #currentpage_comments #nav_holder #comments {background: #FFF;} /* -- sub navigation -- */ /* 8. STYLES ----------------------------------------------------------------------------------------------------*/ .home-options-top {background: transparent url(../images/bgs/home-options-top.png) top left no-repeat;padding-top: 73px;} .home-options-btm {background: transparent url(../images/bgs/home-options-btm.png) bottom left no-repeat; padding-bottom: 20px;} #university h4 {padding: 20px 0 0 50px;} #university p {padding: 0 0 0 50px; width: 500px} .student-location-top {background: transparent url(../images/bgs/student-location-top.png) top left no-repeat;padding-top: 73px;} .student-options-top {background: transparent url(../images/bgs/student-options-top.png) top left no-repeat;padding-top: 73px;} .student-options-btm {background: transparent url(../images/bgs/student-options-btm.png) bottom left no-repeat;} ul.our-team {padding-left: 10px;} ul.our-team li { padding: 5px 0 5px 5px;color: #77778a;list-style-image: url(../images/icons/tickp-16x16.png); list-style-position: inside; margin: 0;} ul.our-team li.notick {border-bottom: 1px dotted #cdcdd3; padding: 5px 0 5px 10px;color: #77778a;list-style: none;} ul.service-options {padding: 20px 0 0 20px;} ul.service-options li {border-bottom: 1px dotted #cdcdd3; padding: 5px 0 5px 10px;color: #77778a;list-style-image: url(../images/icons/tick-16x16.png); list-style-position: inside; margin: 0 0 0 25px;} ul.service-options li.cross {border-bottom: 1px dotted #cdcdd3; padding: 5px 0 5px 10px;color: #77778a;list-style-image: url(../images/icons/cross-16x16.png); list-style-position: inside; margin: 0 0 0 25px;} ul.service-options li.tel {border-bottom: 1px dotted #cdcdd3; padding: 5px 0 5px 10px;color: #77778a;list-style-image: url(../images/icons/tel-16x16.png); list-style-position: inside; margin: 0 0 0 25px;} ul.service-options li.email {border-bottom: 1px dotted #cdcdd3; padding: 5px 0 5px 10px;color: #77778a;list-style-image: url(../images/icons/email-16x16.png); list-style-position: inside; margin: 0 0 0 25px;} ul.service-options li.notick {border-bottom: 1px dotted #cdcdd3; padding: 5px 0 5px 10px;color: #77778a;list-style: none;} ul.service-options li.so-head {color: #77778a; font-weight: 600; font-size: 14px;} ul.service-options li.so-head img {padding-right: 10px;} ul.decorating_items { border: 0px solid red; list-style-image: url(../images/whatwedo/tick.png); list-style-position: outside; margin: 0 0 0 25px;} ul.decorating_items li { border-bottom: 1px dotted #B2B2B2; padding-bottom: 2px;} ul.decorating_nonitems { border: 0px solid red; list-style-image: url(../images/whatwedo/cross.png); list-style-position: outside; margin: 0 0 0 25px;} ul.decorating_nonitems li { border-bottom: 1px dotted #B2B2B2; padding-bottom: 3px; color: #666666;} ul.weirdo-stats li {border-bottom: 1px dotted #4a3d61; padding: 5px 0 5px 0;color: #999} ul.weirdo-stats li span {float: right; color: #e5e5e5} .character-stats p {color: #999} .character-stats p img {float: left; padding-right: 10px;} .character-stats .gap {margin: 10px 0 10px 0} .character-stats hr {border: dotted 1px #4a3d61;} ul.car-stats {margin-bottom: 20px;} ul.car-stats li {border-bottom: 1px dotted #cdcdd3; padding: 5px 0 5px 0;color: #77778a;font-weight: 600} ul.car-stats li span {float: right; color: #999} #purple .postcode-check {border: 1px dashed #65468c; background: #1b0931; padding:20px 0 0 40px;} #grey .postcode-check {border: 1px dashed #999; background: #FFF; padding:20px 0 0 40px;} body#purple p, body#purple h4,body#purple ul,body#purple em {color: #999} #purple #sub-footer {height: 175px; margin-top: 20px; background: url(../images/bgs/subfooter-purple.png) no-repeat 0 0;} #purple #sub-footer div p {padding: 0 20px 20px 20px; color: #b9b5be;} #purple #sub-footer div h4 {padding: 30px 20px 0 20px; color: #e5e5e5;} #purple #sub-footer img {padding: 0;} #darkgrey #sub-footer {height: 175px; margin-top: 20px; background: url(../images/bgs/subfooter-grey.png) no-repeat 0 0;} #grey #sub-footer div p {padding: 0 20px 20px 20px; color: #b9b5be;} #grey #sub-footer div h4 {padding: 30px 20px 0 20px; color: #e5e5e5;} #grey #sub-footer img {padding: 30px 0 0 30px;} #white #sub-footer {height: 175px; margin-top: 20px; background: url(../images/bgs/subfooter-lgrey.png) no-repeat 0 0;} #white #sub-footer div p {padding: 0 20px 20px 20px; color: #77778a;} #white #sub-footer div h4 {padding: 30px 20px 0 20px; color: #e5e5e5;} #white #sub-footer img {padding: 30px 0 0 30px;} #white #sub-footer a:link {color: #77778a} #green #sub-footer {height: 175px; margin-top:0px; background: url(../images/bgs/subfooter-lgrey.png) no-repeat 0 0; padding-bottom: 40px;} #green #sub-footer div p {padding: 0 20px 20px 20px; color: #77778a;} #green #sub-footer div h4 {padding: 30px 20px 0 20px; color: #e5e5e5;} #green #sub-footer a:link {color: #77778a} #footer a:link,#footer a:visited {color: #999;} *html #footer {font-size: 10px;text-align: left;padding-top: 20px; margin-top: 20px; color: #666;border-top: dotted 1px #FFF} /* 8. PNG Support in IE (CSS Only) ----------------------------------------------------------------------------------------------------*/ * html img, * html .png{ azimuth: expression( this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")),this.pngSet=true ); }