/* CSS styles for www.jhlp.co.uk Coded by INFOSERVEGROUP.COM :: 12/01/2009 ----------------------------------------------------- */ /* ------ CSS CONTENTS ------ 1. COLOURS, DIMENSIONS & DESIGN NOTES 2. RESETS 3. BASICS 4. HEADER 5. NAVIGAITON 6. MAIN CONTENT 7. FOOTER 8. FORMS /* /* ------ 1. COLOURS, DIMENSIONS & DESIGN NOTES ------ PAGE WIDTH: 900px Independent elements, single content/images column. */ /* ------ 2. RESETS ------ */ * { margin:0; padding:0; } html { overflow-y: scroll; } a, a:hover, a:active, a img, a, a:hover img, a:active img { outline:none; border:none; } /* ------ 3. BASICS ------ */ body { font-size:62.5%; background:white url('../img/bg.gif') repeat; } p { font:normal 1.3em 'Trebuchet MS',Verdana,Arial,Sans-serif; color:#585757; padding:0.8em 0; line-height:1.6em; } a { text-decoration:underline; } a:hover { text-decoration:none; } a:active { } a:visited { } .float-right { float:right; margin:0 0 10px 10px; } .float-left { float:right; margin:0 10px 10px 0; } /* ------ 4. HEADER ------ */ #header { position:relative; margin:0 auto; width:900px; height:276px; background:transparent url('../img/header-bg.jpg') no-repeat top left; } h1.logo { position:absolute; top:23px; left:56px; } a.logo { display:block; text-indent:-5000em; width:286px; height:81px; background:transparent url('../img/logo.png') no-repeat top left; } h2.tagline,h2.accredition { position:absolute; display:block; text-indent:-5000em; } h2.tagline { top:60px; left:398px; width:455px; height:25px; background:transparent url('../img/tagline.png') no-repeat top left; } h2.accredition { top:246px; left:53px; width:561px; height:18px; background:transparent url('../img/accredition2.png') no-repeat top left; } /* ------ 5. NAVIGAITON ------ */ #navigation { position:relative; width:796px; margin:0 auto; background-color:#11abfa; padding:15px 52px 15px 52px; *padding:15px 52px 0 52px; } #navigation ul { list-style:none; margin:0; padding:0; } #navigation li { display:inline; margin:0; padding:0; } #navigation li a { background-image:url('../img/nav.png'); background-color:transparent; float:left; height:0; padding-top:19px; overflow:hidden; margin-right:12px; padding-right:12px; border-right:2px solid #003889; } #navigation li#nav-1 a { background-position:0 0; width:46px; } #navigation li#nav-1 a:hover,#navigation li#nav-1 a.on { background-position:0 -19px; } #navigation li#nav-2 a { background-position:-72px 0; width:102px; } #navigation li#nav-2 a:hover,#navigation li#nav-2 a.on { background-position:-72px -19px; } #navigation li#nav-3 a { background-position:-200px 0; width:112px; } #navigation li#nav-3 a:hover,#navigation li#nav-3 a.on { background-position:-200px -19px; } #navigation li#nav-4 a { background-position:-336px 0; width:128px; } #navigation li#nav-4 a:hover,#navigation li#nav-4 a.on { background-position:-336px -19px; } #navigation li#nav-5 a { background-position:-490px 0; width:83px; padding-right:0; margin-right:0; border:none; } #navigation li#nav-5 a:hover,#navigation li#nav-5 a.on { background-position:-490px -19px; } /* ------ 6. MAIN CONTENT ------ */ #wrapper { position:relative; width:930px; margin:0 auto; background:transparent url('../img/contentwrapper-bg.png') repeat-y top left; } div.content-wrapper { clear:both; width:900px; background:white url('../img/content-bottom-border.gif') no-repeat bottom left; margin:0px 0 0 15px; padding:0 0 50px 0; } div.content-wrapper strong { color:#00388a; font-weight:bold; } div.primary-content { float:left; padding:39px 0 0 52px; margin:0; width:530px; } div.primary-content p { } div.primary-content h1 { color:#00388a; font:bold 1.9em 'Trebuchet MS',Verdana,Arial,Sans-serif; padding:0.8em 0; line-height:1.55em; } div.primary-content h2 { color:#00388a; font:bold 1.3em 'Trebuchet MS',Verdana,Arial,Sans-serif; padding:0.8em 0; line-height:1.55em; } div.primary-content h3 { color:#00388a; font:bold 1.8em 'Trebuchet MS',Verdana,Arial,Sans-serif; padding:0.4em 0 0 0; line-height:1.45em; } div.primary-content h4 { color:#333; font:bold 1.6em 'Trebuchet MS',Verdana,Arial,Sans-serif; padding:0.4em 0 0 0; line-height:1.45em; } div.primary-content h5 { color:#666; text-transform:uppercase; font:bold 1.3em 'Trebuchet MS',Verdana,Arial,Sans-serif; padding:0.4em 0 0 0; line-height:1.8em; } div.primary-content h6 { color:#00388a; font:normal 1.5em 'Trebuchet MS',Verdana,Arial,Sans-serif; padding:0.4em 0 0 0; line-height:1.45em; font-variant:small-caps; } div.primary-content ol,div.content ul { } div.primary-content li { color:#00388a; font:normal 1.3em 'Trebuchet MS',Verdana,Arial,Sans-serif; padding:0 0 0 1.5em; line-height:1.6em; list-style:none; background:transparent url('../img/list-bullet.gif') no-repeat 0px 5px; } div.primary-content a { color:#11abfa; text-decoration:underline; } div.primary-content a:hover { text-decoration:none; } div.primary-content img { padding:4px; border:1px solid #00AEFA; } div.primary-content dfn { font-weight:bold; color:black; } div.primary-content dfn:after { content:' — '; } div.secondary-content { float:right; padding:39px 52px 173px 0; margin:0; width:230px; } div.secondary-content em { font-style:normal; color:#00388a; } div.secondary-content img { } div.glossary-content { float:right; padding:39px 52px 50px 0; margin:0; width:800px; } div.glossary-content em { font-style:normal; color:#00388a; } div.glossary-content img { } div.glossary-content h1 { color:#00388a; font:bold 1.9em 'Trebuchet MS',Verdana,Arial,Sans-serif; padding:0.8em 0; line-height:1.55em; } .clear { clear:both; } /* ------ 7. FOOTER ------ */ #footer { position:relative; width:900px; padding:20px 15px; margin:0 auto; background:transparent url('../img/footer-bg.png') no-repeat bottom center; } #footer p { color:#fff; padding:0 50px 15px; } #footer a { color:#6ebae1; text-decoration:underline; } #footer a:hover { text-decoration:none; } #footer a:active { } p.copyright { float:left; margin:15px 0 0 25px; } p.credit { float:right; margin:15px 25px 0 0; } /* ------ 8. FORM ------ */ .primary-content form.online-booking { background-color:white; padding:15px 15px 1px 0; margin-top:15px; *width:340px; } .primary-content form.online-booking fieldset { padding:15px; border:1px solid #eaeaea; margin-bottom:15px; background-color:#eee; margin-left:0; } .primary-content form.online-booking ul { padding:0; margin:0; } .primary-content form.online-booking li { list-style:none; background-image:none; float:left; clear:left; padding:2px 0; } .primary-content form.online-booking li.required-field-note { padding-left:200px; *padding-left:0px; font:normal 10px Helvetica, Arial, Verdana, Sans-serif; color:#666; } .primary-content form.online-booking li.required-field-note em { vertical-align:-8px; } .primary-content form.online-booking label { float:left; width:200px; font:normal 13px Helvetica, Arial, Verdana, Sans-serif; padding:5px 0; color:#666; } .primary-content form.online-booking input, .primary-content form.online-booking textarea { float:left; border:1px solid #ccc; padding:4px; width:255px; font:normal 13px Helvetica, Arial, Verdana, Sans-serif; } .primary-content form.online-booking input:hover, .primary-content form.online-booking textarea:hover { border:1px solid #777; background-color:#f9f9f9; } .primary-content form.online-booking input:active, .primary-content form.online-booking textarea:active { background-color:#eee; } .primary-content form.online-booking input:focus, .primary-content form.online-booking textarea:focus { border:1px solid #9A4421; background-color:#FFEADB; } .primary-content form.online-booking em { font-size:24px; line-height:10px; vertical-align:-5px; font-weight:normal; color:#D20008; font-style:normal; } .primary-content form.online-booking fieldset.buttons { padding-left:215px; *padding-left:15px; } .primary-content form.online-booking fieldset.buttons input { width:120px; margin-right:15px; padding:4px 14px; background-color:#A6D1E5; color:#005E98; border-color:#1A6FA2; cursor:pointer; } .primary-content form.online-booking fieldset.buttons input:hover { background-color:#6ebae1; } .primary-content form.online-booking fieldset.buttons input:active { background-color:#3284C6; } .primary-content form.online-booking fieldset.buttons input.clear-form { width:auto; border-color:#eee; background-color:#eee; padding:0; color:#23A2DE; margin:5px 0; text-decoration:underline; } .primary-content form.online-booking fieldset.buttons input.clear-form:hover { text-decoration:none; } .primary-content form.online-booking fieldset.buttons input.clear-form:active { color:black; }