body { margin: 0 ; padding: 0; /*background:#fdfbfb;*/ background-image:url(images/bg.gif); background-repeat: repeat; font-family:arial, sans-serif; font-size:0.9em; border: solid #616161; border-width: 0; /*text-align:center;*/ } h1, h2, h3 { font-family: Verdana, sans-serif; font-weight: normal; color: #ff8800; line-height: 1em; margin: 0; padding: 0; } h1 { font-size: 1.8em;} h2 { font-size: 1.6em; } h3 { font-size: 1.4em;} h4 { font-size: 1.2em; margin: 0; padding: 0;} p { margin: 0.5em 0 .5em; } /* p:first-letter { font-size:1.2em; font-weight:normal; } p:first-line { line-height:1em; } */ a:hover { text-decoration:none; } img { border:none; margin-left:0; } #centre { width:760px; top:15px; margin-top:5px; margin-left:auto; margin-right:auto; background-color:#f8f8f8; /*text-align:left;*/ border-top-color:#cccccc; border-left-color:#cccccc; border-bottom-color:white; border-right-color:white; border-width:2px; border-style:solid; padding:5px; } /* General styles for the masthead and footer. They are the same on both pages. */ #masthead { background:#ffffff; /*text-align: center;*/ height:140px; border-width:1px; border-style:solid; border-top-color:white; border-left-color:white; border-bottom-color:#cccccc; border-right-color:#cccccc; } .mastheadimg{ margin-left:80px; } .mastheadtext1, .mastheadtext2 { font-weight:bold; color:#9094BC; font-size:1.2em; } .mastheadtext1{ position:absolute; top:65px; left:450px; width:15em; } .mastheadtext2{ position:absolute; top:90px; left:500px; width:15em; } .sep1 { background:#626AD6; font-size:0.5em; height:8px; border-width:1px; border-style:solid; border-top-color:white; border-left-color:white; border-bottom-color:#cccccc; border-right-color:#cccccc; margin:5px 0 10px; } #footer { background-color:#f8f8f8; clear: both; width: 100%; font-size: 0.7em; color: #999; border: 1px solid #eebb88; border-width: 1px 0; } .footerblock { width:600px; margin-left:auto; margin-right:auto; text-align:center; } .bottomlink { color:gray; } #leftcol { font-size: 0.9em; font-family:Verdana, sans-serif; width: 25%; float: left; padding: 0.5% 0.5%; margin-top:0px; text-align:justify; } #content { background: #ffffff; /*background-image: url(images/horsebridge.gif);*/ background-repeat: repeat-y; padding: 0 5px 0 5px; margin-left: 27%; margin-top:0px; } #content h2, #content h3 { padding: 0.25em 0 .75em; } /* This is where styling the comes into play. The "home" page will display all three columns while the "about me" will hide the right column. */ /* On a page with two columns the right column is hidden and therefore we adjust content to stretch all the way */ body.twocolumns #content { margin-right: 0%; } body.onecolumn #content { margin-left:0px; } body.onecolumn #leftcol { display: none; } /* This rule simply demonstrates how you can use a id instead of its class to manupulate visibility of elements */ body#contact #footer { display: none; } .mainlogo { margin-top:4px; margin-left:4px; } /* ================================================================ Horizontal top menu ================================================================ */ .menubar { font-size:small; height:20px; font-family:'Helvetica'; /*text-align:center; */ font-weight:bold; margin-top:3px; } .menul, .menur{ /*background-image: url(images/bluefade20.gif); background-repeat: repeat-x;*/ color: #4444ff; padding-left:2px; padding-right:2px; } .menul{ float:left; margin-right:3px; } .menur { float:right; margin-left:3px; } .menubar a { color: #4444ff; } .menubar a:hover { font-size:1em; text-decoration:none; } /* ================================================================ Service heading boxes ================================================================ */ .ServiceBox { /*height:150px;*/ width:700px; /*background-color:gray;*/ margin-bottom:0px; } .ServiceBoxTopBorder { position:relative; background-image:url(images/FadingBlue700x5.gif); background-repeat:repeat-y; height:10em; left:4px; top:0px; font-size:0.1em; line-height:0.1em; z-index:0; } .ServiceBoxContent { min-height:120px; width:700px; padding:5px 0 5px 15px; margin:0 10px 10px 0; background:url(images/FadingBox700x300.gif) no-repeat 0 100%; background-repeat:no-repeat; } .ServiceBox img { width:133px; height:100px; float:right; margin-top:5px; margin-left:10px; margin-bottom:0px; } .freeimageslink { font-size:0.7em; color:#9094BC; } .freeimageslink a{ color:#9094BC; } /* ================================================================ Credits: Dynamic Drive CSS Library URL: http://www.dynamicdrive.com/style/ ================================================================*/ .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: yellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 0; left: 50px; /*position where enlarged image should offset horizontally */ height:250px; width:499px; border:none; } .pic { background-color: #FFFFFF; position: relative; z-index: 10; float:right; } .pic a .large { border: 0px; display: block; height: 1px; left: -1px; position: absolute; top: -1px; width: 1px; } .pic a img { border:solid 1px #cccccc; } .pic a.p1, #pic a.p1:visited { background: #FFFFFF; display: block; height: 90px; text-decoration: none; width: 135px; } .pic a.p1:hover { background-color: #8C97A3; color: #000000; text-decoration: none; } .pic a.p1:hover .large { z-index:100; display: block; height: 238px; left: -180px; position: absolute; top: -120px; width: 350px; border:solid 2px #cccccc; background-color:Red; margin-bottom:5px; }