/* Forum Interactive Limited www.foruminteractive.co.uk CSS by The Graphics Company www.graphics.coop info@graphics.coop Default stylesheet for screen */ * { margin: 0; padding: 0; border: 0; } body { font-family: Arial, Helvetica, serif; font-size: 0.8em; line-height: 1.4em; color: #717073; background: #ffffff; text-align: center; } #banner h1 { margin-left: -9000px; } /* --------- Page Layout --------- */ #outerWrapper { width: 948px; margin: 0 auto; text-align: left; } #innerWrapper { position: absolute; width: 948px; } #jumpLinks {display: none; } #banner { height: 20px; width: 948px; clear: both; border-bottom: solid #9ba1a4 1px; margin: 50px 0 15px 0; padding-bottom: 2em; } #logo { height: 19px; width: 180px; float: left; background: url(/images/fi_logo.jpg) no-repeat; } #main { float: left; clear: right; width: 768px; margin-bottom: 20px; } #home #main { width: 948px; } #navColumn { float: left; width: 210px; } #content { float: right; width: 538px;} #home #content { float: right; width: 718px; height: 538px; } #image { height: 178px; width: 538px; float: left; margin-bottom: 30px; } #imageBlockHome { position: relative; } #image1Div { position: absolute; top: 0; left: 0; height: 178px; width: 178px; } #image2Div { position: absolute; top: 0; left: 180px; height: 178px; width: 178px; } #image3Div { position: absolute; top: 0; left: 360px; height: 178px; width: 178px; } #image4Div { position: absolute; top: 0; left: 540px; height: 178px; width: 178px; } #image5Div { position: absolute; top: 180px; left: 0; height: 178px; width: 178px; } #image6Div { position: absolute; top: 180px; left: 180px; height: 178px; width: 178px; } #image7Div { position: absolute; top: 180px; left: 360px; height: 178px; width: 178px; } #image8Div { position: absolute; top: 180px; left: 540px; height: 178px; width: 178px; } #image9Div { position: absolute; top: 360px; left: 0; height: 178px; width: 178px; } #image10Div { position: absolute; top: 360px; left: 180px; height: 178px; width: 178px; } #image11Div { position: absolute; top: 360px; left: 360px; height: 178px; width: 178px; } #image12Div { position: absolute; top: 360px; left: 540px; height: 178px; width: 178px; } #quotesColumn { position: absolute; left: 788px; width: 160px; margin-top: 0.5em; } #home #quotesColumn { display: none; } #footer { clear: both; width: 948px; border-top: solid #9ba1a4 1px; padding-top: 0.5em; } .story { padding: 1.5em 0.5em 0.5em 1em; margin-top: 0.5em; margin-bottom: 1.5em; background: #DDDDDD; } /* --------- Photos and graphics --------- */ .left { float: left; padding-right: 2px; } .middle { float: left; padding-right: 2px; } .right { float: left; } #map { float: right; width: 269px; height: 178px; } /* --------- Typography --------- */ p { padding-bottom: 0.7em; } .cite { font-size: 0.8em; text-transform: uppercase; line-height: 1.4em; padding-right: 1.5em; padding-bottom: 2em; padding-left: 2.5em; text-align: right; } ul { padding-left: 2.5em; list-style-type: disc; } #content ul { padding-bottom: 0.7em; } #sitemap ul ul a { font-weight: normal; } #sitemap #content ul { padding-bottom: 0; } ol { padding-left: 2.5em; } li { padding-bottom: 0.3em; } li.last { padding-bottom: 0.8em; } dl { line-height: 1.4em; padding-bottom: 1em; } dt { padding-top: 0.6em; padding-bottom: 0; } dd { padding-bottom: 0.2em; } blockquote { font-weight: bold; padding-left: 0.5em; } blockquote p { padding-bottom: 0.7em; text-indent: -0.5em; } blockquote p.moreThanOnePara { text-indent: 0; } a { text-decoration: none; font-weight: bold; } a:link { color: #009EE0; } a:visited { color: #009EE0; } a:hover, a:focus { border-bottom: dotted 1px #009EE0; } a:active { color: #009EE0; } h2 { font-size: 1.6em; line-height: 1.4em; padding-bottom: 0.7em; } #home h2 { font-size: 1.1em; line-height: 1.3em; padding-bottom: 0.7em; padding-top: 1.5em; border-top: solid #717073 1px; } h3 { font-size: 1.3em; line-height: 1.3em; padding-top: 0.2em; padding-bottom: 0.5em; } h4 { font-size: 1.1em; line-height: 1.2em; padding-bottom: 0.2em; } /* -- Main Nav -- */ #mainNav ul { font-weight: bold; margin-bottom: 3.2em; margin-top: 0.5em; padding-left: 0; } #mainNav li { list-style: none; padding-bottom: 0.3em; } #mainNav li.current { color: #009EE0; background: url(/images/graphics/arrow-right.jpg) no-repeat; background-position: 0px 0.3em; margin-left: 0; padding-left: 1em; } #mainNav li a { text-decoration: none; } #mainNav li a:link { color: #717073; } #mainNav li a:visited { color: #717073; } #mainNav li a:hover, #mainNav li a:focus { color: #009EE0; } #mainNav li a:active { color: #009EE0; } #mainNav li.current a { color: #009EE0; } /* -- Sub Nav -- */ #subNav ul { background: url(/images/graphics/arrow-down.jpg) no-repeat; background-position: 0px 5px; border-top: solid #9ba1a4 1px; padding-top: 1.5em; padding-left: 0; } #subNav li { list-style: none; padding-bottom: 0.1em; } #subNav li.current { color: #009EE0; } #subNav li a { font-weight: normal; } #subNav li a:link { color: #717073; } #subNav li a:visited { color: #717073; } #subNav li a:hover, #subNav li a:focus { color: #009EE0; } #subNav li a:active { color: #009EE0; } #subNav ul ul { border-top: none; padding-top: 0.2em; padding-left: 1em; } #quotesColumn blockquote { font-size: 1.2em; font-weight: bold; line-height: 1.5em; color: #009EE0; padding-left: 0; padding-bottom: 0.2em; } #quotesColumn blockquote p { padding-bottom: 0.3em; text-indent: 0; } #quotesColumn .cite { padding-left: 0; padding-bottom: 0; line-height: 1.6em; text-align: left; } #footer p { font-size: 0.9em; line-height: 1.2em; padding-bottom: 0.5em; } #footer a { font-weight: normal; } /* -- Forms -- */ input[type=text], input[type=password] { border: 1px solid #999999; font-family: Arial, Helvetica, sans-serif; font-size: 1em; height: 1.5em; padding-top: 2px; } input[type=text]:hover, input[type=text]:focus, input[type=password]:hover, input[type=password]:focus { background-color: #ffffdd; } textarea { border: 1px solid #999999; font-family: Arial, Helvetica, sans-serif; font-size: 1em; padding-top: 2px; } textarea:hover, textarea:focus { background-color: #ffffdd; } /* input[type=button], input[type=submit], input[type=reset] { background-color: #444444; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding: 5px; } input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover { background-color: #777777; color: #FFFFFF;; } input[type=button]:focus, input[type=submit]:focus, input[type=reset]:focus { background-color: #777777; color: #FFFFFF;; } input[type=button]:active, input[type=submit]:active, input[type=reset]:active { background-color: #999999; color: #FFFFFF;; } */ input[type=button], input[type=submit], input[type=reset] { border: 2px outset white; padding: 2px; } fieldset { padding-bottom: 0.6em; } fieldset legend { font-size: 0.9em; font-weight: bold; padding-top: 0.6em; padding-bottom: 0.6em; } fieldset ol { font-size: 1em; padding-left: 0; list-style: none; } fieldset ol label { float: left; width: 130px; } fieldset ol li { float: left; width: 100%; padding-bottom: 0.3em; } fieldset p { font-size: 1em; margin-left: 130px; } fieldset ol .text, fieldset p .text, fieldset ol textarea { width: 406px; } .requiredField { font-weight: bold; color: red; } /* --- Home Page image rollovers --- */ a#graphicBlog { display: block; height: 178px; width: 178px; } a:link#graphicBlog, a:visited#graphicBlog, a:hover#graphicBlog, a:active#graphicBlog { background: url(/images/graphics/blog.jpg) no-repeat; } a:hover#graphicBlog img#image1, a:focus#graphicBlog img#image1, a:active#graphicBlog img#image1 { height: 0; } a#graphicBenefits { display: block; height: 178px; width: 178px; } a:link#graphicBenefits, a:visited#graphicBenefits, a:hover#graphicBenefits, a:active#graphicBenefits { background: url(/images/graphics/benefits.jpg) no-repeat; } a:hover#graphicBenefits img#image3, a:focus#graphicBenefits img#image3, a:active#graphicBenefits img#image3 { height: 0; } a#graphicAbout { display: block; height: 178px; width: 178px; } a:link#graphicAbout, a:visited#graphicAbout, a:hover#graphicAbout, a:active#graphicAbout { background: url(/images/graphics/about.jpg) no-repeat; } a:hover#graphicAbout img#image6, a:focus#graphicAbout img#image6, a:active#graphicAbout img#image6 { height: 0; } a#graphicExamples { display: block; height: 178px; width: 178px; } a:link#graphicExamples, a:visited#graphicExamples, a:hover#graphicExamples, a:active#graphicExamples { background: url(/images/graphics/examples.jpg) no-repeat; } a:hover#graphicExamples img#image7, a:focus#graphicExamples img#image7, a:active#graphicExamples img#image7 { height: 0; } a#graphicMethods { display: block; height: 178px; width: 178px; } a:link#graphicMethods, a:visited#graphicMethods, a:hover#graphicMethods, a:active#graphicMethods { background: url(/images/graphics/methods.jpg) no-repeat; } a:hover#graphicMethods img#image8, a:focus#graphicMethods img#image8, a:active#graphicMethods img#image8 { height: 0; } a#graphicServices { display: block; height: 178px; width: 178px; } a:link#graphicServices, a:visited#graphicServices, a:hover#graphicServices, a:active#graphicServices { background: url(/images/graphics/services.jpg) no-repeat; } a:hover#graphicServices img#image9, a:focus#graphicServices img#image9, a:active#graphicServices img#image9 { height: 0; } a#graphicContact { display: block; height: 178px; width: 178px; } a:link#graphicContact, a:visited#graphicContact, a:hover#graphicContact, a:active#graphicContact { background: url(/images/graphics/contact.jpg) no-repeat; } a:hover img#image11, a:focus img#image11, a:active img#image11 { height: 0; }