/******************************************************************************* This style sheet creates a template with fixed width lhs and rhs column and a variable width central contents area. MIN/MAX WIDTH NOTE The code for the bodydiv, sizer and expander divs is taken directly from the Jello Molds & Width Control by Mike Purvis at: http://www.positioniseverything.net/articles/jello-expo.html (although the expander div has been given a background image). This code provides a min width, so that if the browser is resized to be smaller than the page, then the page does not break up too much (with undesirable feature like menus wrapping round). The max-width code provides a max width of 1000px, but does not work in all browsers, although it does for FF and IE. MIN WIDTH EXPLANATION For browsers other than IE the min width is set to 700px using min-width: 700px; on the expander div. To make it work for IE the BodyDiv is given a padding of 350 either side, which is countered by the -350 negative margin on either side of the expander div. However, the negative margin on the expander div effectively means that it can never be less than 700px wide - that is to say it will stop wrapping round if the window size is less than 700px wide. To change the min width set the min-width figure to what you want, then set the BodyDiv padding to half this figure, and the expander margin to minus half this figure. MAX WIDTH EXPLANATION The sizer div has a max-width of 300px,which given the negative margin of 700, means that the effective max page width is 1000px. However, on most screens the page will never get as wide as this because the actual page width is limited by the sizer div's width of 50%. The formula to calculate the page width is: (Window width - 700px padding) * 0.5 + 700px negative margin So when a browser is maximised on a 1024 resolution screen we get a page width of: (1024 - 700) * 0.5 + 700 = 862px (84%) (In practice most browsers have a margin on the tag which needs to come off this figure. So for example in FF, which defaults to a margin of 10px, the actual figure for the page width is 842px. The body's margins can of course be set to 0, in which case the 862px figure is correct.) Because of a bug in IE the max width for the sizer div is set in IE.css using an expresion. See the comment there. Clearly if you want a different max width the figures have to be adjusted accordingly. Similarly if the margin and padding figures change. COLUMN COLOURS The column colours are set using the expander and expander2 backround images ROUNDED CORNERS The rounded corners are produced using 'nifty corners'. For these to work in IE all colours affected (ie the background colours) must be expressed as a hex value, do not use colour names such as 'silver'. COLOURS The hex colours used in the style sheet are: #EEEEEE = Light gray (eg column colour) #DDDDDD = Medium gray (eg for advert) #404040 = Dark gray (eg for minor links) #668CEF = Medium blue (eg for banner) #5970B2 = Darker blue (eg for menu background) ******************************************************************************/ @import url("helper.css"); @import url("alternative_master1.css"); body, body div, body p, body th, body li { font-family : Verdana, Arial, Helvetica, sans-serif; font-style : normal; font-weight : normal; font-size: 12px; color : black; } #bodydiv { padding: 0 350px 0 350px; text-align: center; /* centering hack for IE5.x/Win */ } #sizer { width: 50%; margin: 0 auto 0 auto; /* standard centering method */ text-align: left; /* resets centering hack to default */ max-width: 300px; /* 1000 - 700 (expander negative margins) = 300 */ /* See also IE.css*/ } #expander { margin: 0 -350px 0 -350px; min-width: 700px; /* These numbers are the reverse of the bodydiv padding */ position: relative; text-align: left; } #expander2 { background-image: url(.././images/background2.png); background-position: right; background-repeat: repeat-y; } /* Holly hack for IE \*/ * html #bodydiv, * html #sizer, * html #expander { height: 0; } /* */ #banner { text-align:left; height: 123px; padding:0; margin: 0; border-top:0; background-repeat: no-repeat; background-image: url(../images/banner2.gif); } #main { text-align: center; line-height: 150%; background-color: #FBE5C5; border-right-width: 1px; border-right-style: solid; border-right-color: #FDE7C6; min-height: 800px; } #leftcol { float: left; width: 179px; text-align: center; padding-bottom: 0; text-align: center; background-color: #D9D6D3; padding-top: 0px; margin-top: 0px; border-left-color: #DA5558; height: auto; } #rightcol { float: right; width: 179px; text-align: center; margin: 0; padding-bottom: 0; text-align: center; background-color: #EEEEEE; border-right: 1px solid; border-left:0; border-top:0 ; border-bottom:0; border-color:#668CEF; } #content { margin-left: 179px; text-align: left; background-image: url(../images/belowbanner.gif); background-repeat: no-repeat; background-color: #FFF; } .userContent{ padding-right: 10px; padding-left: 15px; padding-bottom: 10px; background-color: #FFF; } .userContentHome{ padding-right: 10px; padding-left: 15px; padding-bottom: 10px; background-color: #FFF; } .userContentDisplay{ padding-right: 10px; padding-left: 15px; padding-bottom: 10px; background-color: #FFF; text-align: justify; min-height: 700px; } #footer { clear: both; margin: 0; color: #747F6F; text-align: center; width:100%; height:25px; background-color: #FDE7C6; } #search_box{ float: right; color: #FFFFFF; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; text-align: right; padding-right: 5px; } #pagetitle{ color:white; clear: both; padding-left: 15px; } #LHSAdvert{ background-color:#DDDDDD; margin: 10px; } #bannerHeadingOuter{ text-align: center; width: 100%; } #bannerHeading{ text-align: right; font-style : normal; font-weight : bold; font-size: 14px; padding-top: 0px; margin-left: 0px; padding-left: 0px; /* Required I FF to counter site search box, but removed by IE.css */ font-family: Verdana, Arial, Helvetica, sans-serif; margin-right: 0px; padding-right: 10px; color: #ffffff; height: 70px; } /********************************* Standard Links *********************************/ a:link, a:visited { color :#747F6F; } a:active, a:hover{ color: #F7AC3B; } /********************************* Drop Down Horizontal Menu IMPORTANT: The width solution below does not work for IE. Instead change the widths in IE.css *********************************/ #MainMenuHorizOuter{ width: 100%; text-align: right; padding-top: 0px; } #MainMenuHoriz { text-align: right; border-top:0; border-bottom:0; border-top-style: none; border-bottom-style: none; margin-top:0; padding: 0; visibility: visible; width: 545px; margin-left: auto; } #MainMenuHoriz td{ } #dropDownMenu { /* margin-left: 17%; */ padding: 0; margin:0; } #dropDownMenu li { margin: 0; padding: 0; list-style: none; float: left; font: bold 11px arial } #dropDownMenu li a { display: block; margin: 0 1px 0 0; padding: 3px 3px; width: 100px; background: #C3C5C8; color: #FFFFFF; text-align: center; text-decoration: none } #dropDownMenu li a:hover { background: #FDE7C6; color: #F7AC3B } #dropDownMenu div { position: absolute; visibility: hidden; margin: 0; padding: 0; } #dropDownMenu div a { position: relative; display: block; margin: 0; padding: 5px 4px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background:#C3C5C8; color: white; font: 12px arial } #dropDownMenu div a:hover { background:#FDE7C6; color: #F7AC3B; } /********************************* No Script Horizontal Menu *********************************/ #MainMenuHoriz_noscript { text-align: center; background-color: #F7AC3B; border-left: 1px solid; border-right:1px solid; border-top:0; border-bottom:0; border-top-style: none; border-bottom-style: none; border-color:#F7AC3B; padding:0; margin-top:0; } #noscript { margin:0; padding:0; } #noscript table{ margin:0; padding:0; } #noscript td{ background-color: #F7AC3B; padding:10px; font-size: 12px; } .noscript_separator{ color: #404040; } .noscript_label{ color: silver; } #noscript a:link, #noscript a:visited{ color:#000; } #noscript a:active, #noscript a:hover{ color:#009; } /********************************* Vertical Menu *********************************/ #MainMenuVert{ background-color: #5970B2; text-align: left; margin: 10px; } #MainMenuVert ul li a:link, #MainMenuVert ul li a:visited { line-height:1.6em; list-style-type: none; text-decoration: none; color: #ffffff; } #MainMenuVert ul li a:active, #MainMenuVert ul li a:hover { color: maroon; line-height:1.6em; } #MainMenuVert li{ list-style-type: none; } /********************************* Vertical Expandable Menu *********************************/ #MainMenuVertExpandableDiv{ margin-left: 5px; margin-right: 5px; margin-top: 10px; margin-bottom: 5px; background-color: #5970B2; padding-right: 5px; padding-left: 0px; } #MainMenuVertExpandable{ background-color: #5970B2; text-align: left; padding-left: 10px; margin-left: 5px; } #MainMenuVertExpandable ul li a:link, #MainMenuVertExpandable ul li a:visited { line-height:1.6em; list-style-type: none; text-decoration: none; color: #ffffff; } #MainMenuVertExpandable ul li a:active, #MainMenuVertExpandable ul li a:hover { color: maroon; line-height:1.6em; list-style-type: none; text-decoration: none; } #MainMenuVertExpandable li{ list-style-type: none; } .MainMenuItem a:link, .MainMenuItem a:visited { line-height:1.6em; list-style-type: none; text-decoration: none; color: #ffffff; } .MainMenuItem a:active, .MainMenuItem a:hover { color: maroon; line-height:1.6em; list-style-type: none; text-decoration: none; } .expandableHeading{ color: #ffffff; font-weight : normal; } /********************************* Footer Menu Links *********************************/ #footermenu{ padding-top: 5px; font-size:10px; color: #747F6F; line-height: 120%; } #footermenu a:link, #footermenu a:visited { color: #74 &f6F; text-decoration: underline; color: #747F6F; } #footermenu a:active, #footermenu a:hover{ color:#F7AC3B; text-decoration: underline; } .footermenu_separator{ color: #747F6F; } #poweredby{ float: right; width: 33%; padding-top: 5px; padding-right: 5px; text-align:right; font-size:10px; color: #747F6F; line-height: 120%; } #poweredby a:link, #poweredby a:visited { color: #747F6F; text-decoration: underline; } #poweredby a:active, #poweredby a:hover{ color:#F7AC3B; text-decoration: underline; font-size:10px; } #copyright{ float: left; width: 33%; font-size:10px; padding-top: 5px; padding-left: 5px; text-align:left; color: #747F6F; line-height: 120%; } /********************************* Accessibility *********************************/ #accessibility{ float: right; margin-top: 4px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; text-align: right; padding-right: 12px; } #accessibility a:link, #accessibility a:visited { color: #FDE7E6; text-decoration: underline; } #accessibility a:active, #accessibility a:hover{ color:#C3C5C8; text-decoration: underline; } .accessibilityLink { color: #F7AC3B; font-size: 10px; font-weight: bold; text-align: right; } .accessinilityLinkSeparator{ color: #FFF; } /********************************* Messages *********************************/ #error{ background-color: maroon; color: white; margin-bottom: 10px; text-align: center; margin-left: 180px; } #status{ color: #F7AC3B; margin-bottom: 10px; text-align: center; font-weight: bold; clear: right; } #welcome{ color: #668CEF; margin-bottom: 10px; text-align: center; } /********************************* Headings and General Purpose *********************************/ .stdText{ font-size: 12px; } h2{ color:#F7AC3B; font-size: 14px; font-weight : bold; } h3{ color:#FFFFFF; font-size: 14px; font-weight : bold; } .centre{ text-align: center; } table{ font-size: 12px; line-height: 150%; } .table-search-box-outer{ width:100%; text-align:right; font-size: 12px; } .table-search-box{ display: table; margin-left: auto; margin-right: 0px; text-align: right; } .control-settings{ font-size:10px; } .highlight{ color:#668CEF; } .centreDivOuter{ text-align: center; width: 100%; } .centreDiv{ margin-left: auto; margin-right: auto; width: 80%; } .centreDivOuter{ text-align: center; width: 100%; } /********************************* Forms *********************************/ fieldset { padding: 0 5px 5px 5px; border: solid 1px #668CEF; border-color: #D55147; font-size: 12px; margin: 10px; } legend { padding: 5px; color: #D55147; } label { padding-right: 10px; font-size: 11px; color: #684D29; } select { display: block; } input { display: block; } input.submit { display: inline; font-size: 12px; color:#fff; display:block; border:none; background-color:#C5C3C8; width: 100px; margin: 5px; padding: 3px } input.submit:hover { color:navy; } input.submit-small { display: inline; font-size: 12px; color:#fff; display:block; border:none; background-color:#C5C3C8; width: 60px; margin: 5px; padding: 3px } input.submit-small:hover { color:navy; } input.submit-very-small { display: inline; font-size: 12px; color:#fff; display:block; border:none; background-color:#C5C3C8; width: 25px; margin: 5px; padding: 3px } input.submit-very-small:hover { color:navy; } #field_set_buttons{ padding: 10px; margin: 10px auto; } /********************************* Query Product, Review, News and Events *********************************/ .product_detail{ width:100%; } .subQueryContent{ padding: 10px 0 0 0; background-color: #FDE7C6; font-size: 10px; font-family: Verdana, Geneva, sans-serif; width: 350px; } .subQueryContentRHS{ padding: 6; margin-left: 390px; background-color: #C3C5C8; font-size: 10px; font-family: Verdana, Geneva, sans-serif; } .subQueryContentLHS{ padding: 6; width: 350px; background-color: #C3C5C8; font-size: 10px; font-family: Verdana, Geneva, sans-serif; float: left; } .subQueryContent h1{ margin-left: 10px; text-align:left; } .query{ width:100%; text-align:center; padding-top: 10px; padding-bottom: 10px; background-color: #FFF; } .queryLine{ text-align:left; padding: 10px; margin-top: 0px; margin-bottom: 0px; margin-right: 10px; margin-left: auto; margin-right: auto; font-size: 12px; border-bottom-color: #F7AC3B; border-bottom-style: solid; border-bottom-width: 1px; } .queryLineTwo{ text-align:left; margin-top: 0px; margin-bottom: 0px; margin-right: 10px; margin-left: auto; margin-right: auto; font-size: 12px; border-bottom-color: #D15157; border-bottom-style: solid; border-bottom-width: 1px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } .queyPageLink{ } .queyPageLink a:link, .queyPageLink a:visited { color : black; text-decoration: underline; } .queyPageLink a:active, .queyPageLink a:hover{ color: maroon; text-decoration: underline; } .queryLine table{ font-size: 12px; } reviewForm{ text-align:center; margin: 10px auto; } #addreview{ text-align:center; } #addReviewButton{ display: table; margin: 10px auto; } .detailRecord{ font-size: 12px; margin: 10px; width:100%; min-height: 720px; text-align: justify; } /********************************* Member AccountLogon and Security *********************************/ #accountFunctionContainer{ display: table; margin: 10px auto; text-align:left; padding: 10px; width: 350px; } #accountFunctionContainer h1{ } #accountFunctionContainer a:link, #accountFunctionContainer a:visited { color :#668CEF; display:inline; } #accountFunctionContainer a:active, #accountFunctionContainer a:hover{ color: maroon; display: inline; } #newMembers{ margin-bottom: 30px; } #logonPanel{ text-align:center; background-color:#DDDDDD; width: 90%; margin-left: auto; margin-right: auto; margin-top: 10px; padding-top: 10px; } .surnameSearch{ width: 100%; text-align:center; background-color: #EEEEEE; } .surnameSearchInner{ margin-left: auto; margin-right: auto; display: table; } .memberNotes{ width: 100%; text-align:center; } .memberNotesInner{ margin-left: auto; margin-right: auto; display: table; } .memberOrders{ width: 100%; text-align:center; } .memberOrders{ margin-left: auto; margin-right: auto; display: table; } #memberOrderDetail{ width:100%; } .memberOrderInformation{ background-color:#EEEEEE; } .securityViolation{ width:100%; } /********************************* Shopping Cart and Order Processing *********************************/ .caption { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-style: normal; font-weight: bold; color: #444444; } .order{ width:100%; } .order td { font-size: 8pt; background-color :#EEEEEE; border-width: 1px; border-style: solid; border-color:white; } .order td.order-detail-heading{ font-size: 8pt; color: white; background-color : gray; } .order-detail-money{ font-size: 8pt; font-family: Courier; color: black; } .checkout{ width:100%; } .callback{ width:100%; text-align:center; } .callback-inner{ width:70%; margin-left: auto; margin-right: auto; margin-top: 200px; } /********************************* Gallery Image Vuewer *********************************/ #flashcontentOuter{ text-align:center; } #flashcontent{ background-color: #5970B2; width: 520px; margin-left: auto; margin-right: auto; } /********************************* JavaScript *********************************/ .expanderPromptText{ color:#404040 ; } /********************************* JavaScript *********************************/ .threadDivOuter{ text-align:center; width: 100%; } .threadDiv{ text-align:center; margin-left: auto; margin-right: auto; width: 100%; } .threadItem{ background-color: #DDDDDD; } #clearFloats { clear: both; } #contentOuter { } .lhsBanner { background-image: url(../images/lhsbanner.gif); text-align: left; height: 170px; width: 180px; float: left; background-repeat: no-repeat; } .lhsBanner2 { text-align: left; height: auto; width: 179px; float: left; background-color: #fde7c6; } .lineImage { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-align: center; padding: 0; margin-top: 5px; margin-right: 10px; margin-bottom: 3px; } .justifyText { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 150%; text-align: justify; margin-left: 5px; margin-right: 5px; } .heading { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #D55147; } .queryLineNews { text-align:left; padding: 10px; margin-top: 0px; margin-bottom: 0px; margin-right: 10px; margin-left: auto; margin-right: auto; font-size: 12px; } .lhsBanner3 { background-image: url(../images/lhsbackground2.gif); text-align: left; height: 245px; width: 179px; float: left; background-repeat: no-repeat; } .whiteText { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; font-weight: bold; } #belowBanner { height: 50px; } #enrolment { margin-top: 75px; height: 170px; text-align: center; } #faculty { margin-top: 10px; height: 170px; text-align: center; } #courses { margin-top: 15px; height: 170px; text-align: center; } .orangeText { font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-weight: bold; color: #F7AC3B; } .greenText { font-family: Verdana, Geneva, sans-serif; font-size: 10px; font-weight: bold; color: #747F6F; } #rhsHome { display: table; background-color: #FDE7C6; } .greenTextLink a { font-family: Verdana, Geneva, sans-serif; font-size: 10px; color: #747F6F; text-decoration: underline; line-height: 12px; } .lhsbackground { background-color: #FDE7C6; height: inherit; } .subQueryContentRHSInner { padding: 10; background-color: #FFF; font-size: 10px; font-family: Verdana, Geneva, sans-serif; height: auto; } #lhsbackground { height: auto; float: right; border-right-color: #C3C5C8; border-right-style: solid; border-right-width: 1px; } .greyBold { font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-weight: bold; color: #747F6F; } #searchline { background-color: #D8DBE0; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #F7AC3B; padding: 5; }