/*----------------------------------------------------------------------------------------------------------------------------------------------------------- CSS for University of Derby - Main Stylesheet Author: Alison Lee (alisonlee@silktide.com) / Silktide Ltd Created: 18/04/2006 Updated: 21/11/2006 History: 18/04/2006 Stylesheet created - Alison Lee 12/07/2006 uodtable class added - Alison Lee 27/09/2006 H1 tag modified for correct alignment in IE7 - Alison Lee 30/10/2006 style added for iframe height - David Ball 21/11/2006 Styles adapted for design change - Alison Lee 15/12/2006 New styles added for Courses DB - Oliver Emberton 22/01/2008 Header/homelink styles slightly modified to allow for longer breadcrumb names - Alison Lee 09/05/2008 3rd level nav tweaked to become indented - Alison Lee 23/05/2007 Fixed problem with AJAX search results being white on white background - Oliver Emberton 20/06/2009 Added patch (#leftcol img) to fix slight change in HTML enforced by SiteManager 7 upgrade -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Style Guide -------------------------------------------------------------------------------------------------------------------------------------------------------------- Body font size = 80% H1 Franklin Gothic ITC 26px / 2.0em H2 Franklin Gothic ITC 14px / 1.2em p Verdana 12px / 1.0em a Verdana 12px / 1.0em (Ghosted underline #e8c8ba) NEW DESIGN COLOURS Dark Blue #0B3665 Mid-Blue #004681 Orange #F5823F (Undergraduates) Electric Blue #68C3D1 (Postgraduates) Silver Grey #9AAEC7 (Staff) Yellow #F1D246 (Research) Lime Green #E1E33F (Current Students) Light Blue #BCDAE9 (Human Resources) ADT #5B9995 (Art, Design & Technology) BCL #7E487E (Business, Computing & Law) EHS #D1334B (Education, Health & Sciences) Bux #45A1A0 (Buxton) -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Global Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ html { overflow-y: scroll; } body { background-color: #B4B0A5; font: 80% verdana, arial, helvetica, sans-serif; color: #333; padding: 0; margin: 0; } h1 { font: normal 2.0em "franklin gothic itc", arial, verdana, helvetica, sans-serif; color: #154579; padding-top: 0; margin-top: 10px; } h2 { font: bold 1.2em "franklin gothic itc", arial, verdana, helvetica, sans-serif; color: #154579; padding: 10px 0; margin: 0; } h3 { font: bold 1.0em "franklin gothic itc", arial, verdana, helvetica, sans-serif; color: #154579; padding: 10px 0; margin: 0; } h4 { } p { font-size: 1.0em; line-height: 1.5em; margin-top: 0; } a { text-decoration: none; color: #b24415; } a:hover { color: #154579; } img { border: 0; } form, table { background: transparent; font-size: 1.0em; } legend { color: #b4b0a5; } fieldset { border: 1px solid #b4b0a5; } hr { height: 1px; background-color: #b4b0a5; color: #b4b0a5; border: 0; padding: 0; margin: 10px 0; } .tablestyle { border-collapse: collapse; } .tablestyle td, .tablestyle th { vertical-align: top; padding: 5px; } .tableborder td, .tableborder th { border: 1px solid #e8e8e8; } table#f2__table tbody, table#f3__table tbody { background-color: #fff; } .uodtable { } .uodtable th { background-color: #ccc7bb; padding: 2px; } .uodtable tr td { background-color: #fff; vertical-align: top; padding: 2px; } .uodtable tr td h2, .uodtable tr td h3 { padding: 0; margin-top: 0; } table.vertical td { vertical-align: middle; } .padding { padding: /*1px 10px*/ 10px; } .widthwrapper { width: 100%; } .right { float: right; margin-left: 10px; } .left { float: left; margin-right: 10px; } .clear { clear: both; } /* Layout Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #container { background: #B4B0A5 url("templatefiles/container-bg.jpg") repeat-x 0 105px; text-align: center; } .flexi #container { background: #e8e4dd none; } .fixedwrapper { width: 773px; text-align: left; margin: 0 auto; } .flexi .fixedwrapper { width: 100%; } #header { height: 90px; background-color: #0B3665; } #header .fixedwrapper { position: relative; } #topnav { height: 30px; background-color: #fff; } #banner { clear: both; } #contentwrapper { } #contentwrapper .fixedwrapper { background: #E9E4E0 url("templatefiles/leftcol-bg.jpg") repeat-y 0 0; } #leftcol { width: 230px; float: left; background-color: #fff; } #content { min-height: 300px; margin-left: 230px; } #footer { clear: both; text-align: center; padding: 5px 0; } .allblue, .allblue #container, .allblue #contentwrapper .fixedwrapper, .allblue #content { background: #0d3c6e none; } .allblue p, .allblue a { color: #fff; } .allblue a:hover { color: #b24415; } /* Header Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #header .fixedwrapper { height: 90px; position: relative; padding-top: 0; } #header #homelinks { width: 760px; position: relative; top: 0; left: 0px; background: #1E61A9 none!important; font-size: 0.8em; word-spacing: -1px; text-align: left; color: #fff; padding: 2px 3px; border-bottom: 0; margin: 0;} #header #homelinks strong { display: none; } #header #homelinks a, #header #homelinks a:visited { color: #fff; border: 0; padding: 0 3px; } #header #homelinks a:hover, #header #homelinks a:active { color: #ccc; text-decoration: underline; border: 0; } #header table.vertical { position: absolute; top: 25px; left: 0; border-collapse: collapse; } #header table.vertical td { height: 50px; padding: 0; } #header img { /*position: absolute; top: 30px; left: 7px;*/ } #header h1 { width: 330px; /*position: absolute; top: 13px; left: 180px;*/ font-size: 1.4em; vertical-align: middle; color: #fff; line-height: 1.2em; margin: 0 0 0 20px; } #header h1 a { color: #fff; border-bottom: 1px solid #1e61a9; } #header h1 a:hover { color: #fff; border-bottom: 1px solid #fff; } /* Search Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Styles for SMS Search Component #header .search { width: 260px; position: absolute; top: 30px; right: 7px; font-size: 0.8em; color: #fff; text-align: right; vertical-align: top; } #header .search input { width: 130px; height: 16px; color: #000; vertical-align: middle; margin-left: 5px; } #header .search input #f1_searchText { width: 130px; } #header .search .button { width: 20px; height: 20px; background-color: #1e61a9; font-size: 0.8em; color: #fff; vertical-align: middle; padding: 0; border: 1px solid #fff; margin-left: 5px; } */ #content .search { background-color: #154579; padding: 10px; margin: 0; } #content .search h2 { display: inline; color: #fff; vertical-align: middle; margin-right: 8px; } #content .search form { display: inline; vertical-align: middle; } #content .search #f2_courseSearchText { padding: 0; border: 1px solid #7f7f7f;} #content .search .button { height: 20px; background-color: #F5823F; font-size: 0.8em; color: #fff; border: 1px solid #fff; margin-left: 5px; } #home #content .search { /*background-color: #d2cdc5;*/ padding: 7px 5px 7px 7px; margin: 10px; } #home #content .search h2 { display: block; /*color: #154579;*/ padding: 0 0 3px 0; margin: 0; } #home #content .search #f2_courseSearchText { padding: 0; border: 1px solid #7f7f7f;} #home #content .search .button { height: 20px; background-color: #F5823F; font-size: 0.8em; color: #fff; border: 1px solid #fff; margin-left: 5px; } #sidesearch #f1_eduCourseSearchText { width: 150px!important; } /* Google Search Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #header .search { width: 260px; /*position: absolute; top: 30px; right: 7px;*/ font-size: 0.8em; color: #fff; text-align: right; /*vertical-align: top;*/ } #header .search .searchtext { width: 130px; height: 16px; color: #000; vertical-align: middle; margin-left: 5px; } #header .search label, #header .radio { vertical-align: middle; } #header .search .button { width: 20px; height: 20px; background-color: #1e61a9; font-size: 0.8em; color: #fff; vertical-align: middle; padding: 0; border: 1px solid #fff; margin-left: 5px; } #googlesearch #content { background-color: #fff; } #googlesearch p { line-height: 1.8em; margin: 10px 5px; } #googlesearch h2 { font-size: 1.2em; line-height: 1.8em; } #googlesearch h2 a { color: #154579; } #googlesearch h2 a:hover { color: #B24415!important; } #googlesearch a { color: #B24415; } #googlesearch a:hover { color: #154579; } /* Banner Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #banner { position:relative; } #banner .fixedwrapper { min-height: 80px; position: relative; background: #0B3665 url("templatefiles/banner-bg.gif") repeat-y 743px 0; } #banner img { display: block; } #banner p, #banner a { color: #fff; } #banner a:hover { color: #F46F21; } #banner #breadcrumb { font-size: 0.8em; color: #fff; padding: 7px 0 5px 25px; margin: 0; } #banner .fixedwrapper h1 { color: #fff; padding: 0; padding: 0 0 15px 25px; margin: 0; } #banner .fixedwrapper h1#overimg { position: absolute; left: 25px; bottom: 8px; color: #fff; padding: 0;} #features { position: absolute; top: 187px; left: 646px; } #banner .noflash { position:absolute; top:0; left:0; } #banner-rh { width: 280px; height: 200px; position: relative; float: right; } #banner-rh .noflash { width: 280px; height: 200px; position:absolute; top:0; left:0; } /* Navigation Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #topnav ul { float: left; padding: 0; border-left: 1px solid #ccc;margin: 0; } #topnav ul li { float: left; list-style-type: none; color: #000; line-height: 30px; border-right: 1px solid #ccc; } #topnav ul li a { color: #000; padding: 7px 8px; } #topnav ul li a:hover, #topnav ul li.selected a { background-color: #F46F21; color: #fff; } #topnav ul#homelink { float: left; font-weight: bold; } #leftcol ul { padding: 0; margin: 1px 0 0; } #leftcol ul li { list-style-type: none; border-bottom: 1px solid #E1DED3; } #leftcol ul li a { width: 215px; display: block; background: #fff url("templatefiles/bullet-orange-on-white.jpg") no-repeat 5px 9px; color: #154579; padding: 5px 0; padding-left: 15px; } #leftcol ul li a:hover, #leftcol .selected a { background: #F46F21 url("templatefiles/bullet-o.jpg") no-repeat 5px 9px; color: #fff; } #leftcol ul ul { border-top: 1px solid #E1DED3; margin: 0; } #leftcol ul ul li { border-bottom: 0; } #leftcol ul ul li a { width: 200px; } #leftcol ul ul li a, #leftcol ul ul li a, #leftcol .selected ul a { display: block; background: #fafafa url("templatefiles/bullet-orange-on-paleblue.jpg") no-repeat 15px 9px; color: #154579; padding: 5px 0; padding-left: 30px; } #leftcol ul ul li a:hover, #leftcol ul ul .selected a { background: #F46F21 url("templatefiles/bullet-o.jpg") no-repeat 15px 9px; color: #fff; } #leftcol ul ul li ul li a, #leftcol ul ul li ul li a:visited, #leftcol ul ul li ul li.selected a, #leftcol ul ul .selected ul li a, #leftcol ul ul .selected ul li a:visited{ width: 185px; padding-left: 45px; } #content #subnav { } #content #subnav ul { width: 100%; float: left; background-color: #0d3c6e; border: 0; padding: 0; margin: 0; margin-bottom: 10px; } #content #subnav ul li { float: left; background: none; list-style-type: none; list-style-image: none; color: #000; line-height: 26px; padding-left: 0; border-right: 1px solid #fff; } #content #subnav ul li a { background: none; color: #fff; padding: 7px 8px; border: 0; } #content #subnav ul li a:hover { background-color: #fff; color: #178a84; } /* Misc Leftcol Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .tools { background-color: #fff; } .tools p { line-height: 22px; margin: 0; } .tools p a { color: #154579; } .tools a:hover { color: #b24415; } #bookmark { background: url("templatefiles/tools-bookmark.jpg") no-repeat 5px 4px; padding-left: 30px; } #email { background: url("templatefiles/tools-email.jpg") no-repeat 5px 3px; padding-left: 30px; } #print { background: url("templatefiles/tools-print.jpg") no-repeat 5px 3px; padding-left: 30px; } .noleftcol .tools { clear: both; text-align: center; vertical-align: middle; padding: 5px; } .noleftcol .tools h2, .noleftcol .tools p { display: inline; background-position: 0 0; margin: 0 5px; } .noleftcol #contentwrapper .fixedwrapper{ background: #E9E4E0 none; } .noleftcol #content { margin-left: 0; } #leftcol h2 { padding-left: 5px; } /* Content List Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #content ul { padding: 0 0 0 20px; margin: 5px 0 15px; } #content ul li { list-style-type: none; list-style-image: url("templatefiles/bullet-content.gif"); line-height: 1.5em; } /* Content Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #content p a, #content li a { border-bottom: 1px solid #e8c8ba; } #content h2 a { color: #154579; border: 0; } #content h2 a:hover { color: #fff; } #content h2 a img { margin-left: 5px; } .drop { float: left; font-weight: normal; font-size: 2.0em; line-height: 1.0em; color: #154579; padding: 4px 5px; margin: 0; } .block { width: 250px; float: left; position: relative; vertical-align: top; padding: 0; margin: 0 7px 20px; } .block h2 { background-color: #b4b0a5; padding: 10px; } .block h2 img { margin: 0 0 0 10px; } .block img { margin: 0 0 5px 0; } #blocktext { height: 140px; background-color: #fff; } #blocktext .padding { padding: 0 10px; } #blocktext img { display: block; float: right; } #blocktext ul { padding: 5px 10px 0 10px; } .contentleft, .contentright { width: 270px; float: left; } #twocol .contentleft, #twocol .contentright { width: 385px; } .subcontent { width: 280px; float: right; background-color: #ccc; text-align: center; padding: 0; margin: 5px 0 10px 10px; } .withquote { width: 250px; background-color: transparent; } .subcontent .padding { text-align: left; } .subcontent img { display: block; } .subcontent h2 { background-color: #B4B0A5; color: #174270; padding: 10px; margin: 0; } .subcontent p, .subcontent li { color: #333; text-align: left; margin: 10px 0; } .right img, .left img { display: block; } .flashcontent {width: 320px; } .caption { background-color: #fff; font-size: 0.85em; text-align: center; padding: 5px; margin: 0; } .caption p { margin: 0; line-height: 1.2em; text-align: center; } #leftcol .caption { width: 220px; text-align: center; } .quote { background-color: #fff; } .topquote { height: 24px; background: url("templatefiles/quote_start.jpg") no-repeat top left; } .bottomquote { height: 24px; background: url("templatefiles/quote_end.jpg") no-repeat bottom right; } .quote .padding { padding: 0 20px; } .quote .padding p { margin: 0; } /* How to Find Us */ #printmaps table { border-collapse: collapse; } #printmaps td { font-size: 0.85em; vertical-align: top; padding-bottom: 20px; } #printmaps td h3 { font-size: 1.2em; padding-top: 0; margin-top: 0; } #printmaps td a { border-bottom: 0; } #printmaps td strong { width: 80px; } table#directions label { margin-left: 70px; } table#directions .button { margin-left: 70px; } .iframeheight iframe { height:350px; } /* Faculties */ .facultydiv {width: 40%; float: left; vertical-align: top; margin-right: 20px; margin-top: 10px; } /* Videos */ .play { position: absolute; right: 20px; bottom: 10px; } /* Online Bursary Calculator */ .calculator { border-collapse: collapse; margin-top: 20px; } .calcnotes { background: transparent none; font-size: 0.8em; color: red; border: 0; } .hidetextbox { background: transparent none; font: 1.0em verdana, arial, helvetica, sans-serif; border: 0; } /* Staff Details */ #mediabox { width: 430px; background-color: #CCC7BB; padding: 5px 15px 10px; margin-top: 4px; margin-bottom: 20px; } #mediabox h2 { margin: 0; } .mediabox { width: 430px; background-color: #CCC7BB; padding: 5px 15px 10px; margin-top: 4px; margin-bottom: 20px; } .mediabox h2 { margin: 0; } table#staff { width: 100%; } table#staff td { border: 1px solid #ddd; border-width: 1px 0; } /* Course Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ p#alphabet a { font-weight: bold; border: 0; } .courselist { width: 520px; border-collapse: collapse; } .courselist tr { background-color: #fafafa; } .courselist tr.oddrow { background-color: #fff; } .courselist td { padding: 5px; border-bottom: 2px solid #e8e4dd; } #content .courselist td a { border: 0; } #factfile { background-color: #fff; padding-top: 0; } #factfile h2 { background-color: #B4B0A5; color: #154579; } #factfile ul { margin: 10px; } #factfile li, #factfile .icon { vertical-align: middle; margin: 0; } #factfile .icon { display: inline; } #factfile table { border-collapse: collapse; border-top: 1px solid #ddd;} #factfile table td { padding: 5px; border-bottom: 1px solid #ddd; } /* Footer Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #footer p { font-size: 0.8em; text-align: center; color: #fff; line-height: 1.2em; padding: 5px 0 0; margin: 0; } #footer a { color: #fff; } #footer a:hover { color: #d27122; } /* Home Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MORE HOME STYLES IN INTERNAL STYLESHEET */ #home #banner .fixedwrapper { background: #E9E4E0; } #home #prospectus { width: 130px; float: right; padding-top: 10px; } #homenews td { vertical-align: top; padding-bottom: 10px; } #homenews img { border: 1px solid #b4b0a5; margin-right: 10px; } #homenews h2 img { border: 0; margin-right: 0; } #homenews ul { margin-top: 0; } /* Current Students/Staff Home Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #current #contentwrapper .fixedwrapper { background: #E9E4E0 url("templatefiles/leftcol-bg-current.jpg") repeat-y 0 0; } #current .contentleft { width: 500px; } #current .contentright .thumbnail { float: left; border: 1px solid #b4b0a5; margin: 10px 5px 5px 0; } .courseactions { background-color: #154579; padding: 4px; } .courseactions td { padding: 4px; } .courseactions a { color: #FFF; font-family: arial, verdana; font-size: 140%; } .courseactions a:hover { border-bottom: 1px solid #FFF; } .courseactionsside { margin-left: 10px; background-color: #154579; padding: 13px; float: right; width: 174px; height: 140px; } .courseactionsside table { border-collapse: collapse; } .courseactionsside .actioncell { padding-bottom: 12px; } .courseactionsside a { color: #FFF; font-family: arial, verdana; font-size: 140%; } .courseactionsside a:hover { border-bottom: 1px solid #FFF; } #coursesearchpanel { background-color: #FFF; } .coursesearchresults ul { padding: 0!important; font-size: 80%; } .coursesearchresults ul li { list-style-type: none; list-style-image: none!important; padding: 0; } .coursesearchresults ul li a { padding: 4px 4px; display: block; } .coursesearchresults ul li a:hover { background-color: #246762; color: #FFF; } .coursesearchresults .selected a { background-color: #246762; color: #FFF; } .coursesearchresults h2 { color: #0B3665; display: block; } .flushsubcontent { width: 250px; float: right; background-color: #ccc; text-align: center; padding: 0; margin: 0; } .search .togglelink { color: #3eB1F9; border-bottom: 1px solid #1e81C9; } .search .togglelink:hover { color: #FFF; border-bottom: 1px solid #CCF; } #searchAdvanced { background-color: #FFF; padding: 10px; margin: 0 10px 10px 10px; } .mediaPool { background-color: #FFF; } .mediaPoolCaption { padding: 8px; font-size: 80%; color: #444; } .mediaPoolNavbar { background-color: #154579; padding: 8px; } .mediaPoolNavbar .button { height: 20px; background-color: #1e81C9; font-size: 0.8em; color: #fff; border: 1px solid #3eB1F9; margin-left: 5px; cursor: pointer; } .mediaPoolExplanation { background-color: #FFF; color: #000; border-top: 1px solid #DDD; padding: 8px; text-align: center; font-size: 80%; } .courseLayoutTable { width: 100%; border: 0; border-collapse: collapse; } .courseLayoutTable td { vertical-align: top; padding: 0; } .courseSummaryTable { width: 100%; border: 0; border-collapse: collapse; background-color: #E0D4E2; } .courseSummaryTable td { vertical-align: top; padding: 10px; } .actioncell a { font-size: 80%!important; } #leftcol img {display:block; text-align: center; margin:auto;}