html {width:100%; }
body {background: url('../images/bbg.jpg') ; margin:0px; padding:0px; font-family:"Trebuchet MS", Verdana, Arial, "Times New Roman", serif; font-size:80%; color:#000000; width:100%; }
p {padding:0px 0px 15px 0px; margin:0px; line-height:140%; }
h1 {margin:0px; padding:0px; font-size:130%; font-weight:normal; }
h2 {margin:0px; padding:0px 0px 20px 0px; font-size:140%; font-weight:normal; }
/*link styling*/
a {color:#000000; text-decoration:underline; }
a:hover {text-decoration:none; }
#footer a {color:#637076; }
/*structural elements*/
.section {text-align:center; width:100%; border-bottom:1px solid #978773; }
#header {background:#2A241E; margin:0px auto; text-align:left; padding:20px 20px 20px 20px; width:720px; border-left:1px solid #978773; border-right:1px solid #978773; }
#container {margin:0 auto; text-align:left; padding:0px 20px 20px 20px; width:720px; border-left:1px solid #978773; border-right:1px solid #978773; }
h1#logo {background:#F0EFDE; float:left; padding:20px 1px 1px 10px; width:710px; border:1px solid #978773; text-align:left; min-height:110px; }
#pictureRail {text-align:center; }
#news {background: url('../images/side-bg.gif') repeat-y 0px 0px; float:right; width:200px; padding:20px 20px 5px 20px; border:1px solid #FFFFFF; }
#menu {background:#221D16; margin:0px 260px 0px 0px; width:430px; border:1px solid #978773; padding:10px; color:#FFFFFF; text-align:center; }
#content {background:url('../images/main-bg.gif'); margin:20px 260px 0px 0px; width:410px; padding:20px 20px 5px 20px; border:1px solid #978773; }
#footer {margin:0px auto; text-align:left; padding:20px 20px 60px 20px; width:720px; border-left:1px solid #52473C; border-right:1px solid #978773; }
#footer p {background:#221D16; padding:10px; font-size:90%; color:#fff; border:1px solid #978773; text-align:center; }
#gallery {margin:0 auto; padding:20px 40px 0px 20px; width:350px; }
/*section dependant style over-rides*/
#news h3 {margin:0px; padding:0px 0px 20px 0; color:#000000; font-size:120%; font-weight:bold; }
#news p {padding:10px 0px; border-top:1px solid #000000; }
#header p {text-align:center; font-size:170%; color:#E8EDF7; padding:45px 0px 0px 0px; }
ul#menu { }
ul#menu li {margin:0px; padding:0px; list-style:none; display:inline; }
ul#menu a {color:#FFFFFF; text-decoration:none; padding:10px 15px; }
ul#menu a:hover {color:#FFC700; text-decoration:none; padding:10px 15px; }
#pictureRail img {margin:20px 10px;border:1px solid #FFFFFF; }
#content img {border:1px solid #000000; float:right; margin:0px 0px 20px 20px; }
#content1 img {border:0px; margin:0px 0px 20px 0px ; text-align:left; float:left; }
#content2 img {border:0px; margin:0px 10px 0px 0px ; text-align:left; float:left; }
/*This adds a little arrow under the menu item of the page you are on. (handy for navigation and usability)
To modify, edit the tag by changing the id.
e.g, if the page you are on is the contact page, change: to */
#home #homeLink,
#about #aboutLink,
#services #servicesLink,
#portfolio #portfolioLink,
#contact #contactLink
{background:url('../images/menu-a-bg.gif') no-repeat center bottom;
color:#FFC700;}
/*just makes sure the content doesn't spill out the boxes, see http://www.positioniseverything.net/easyclearing.html for details*/
.clearfix:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: ffffff;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
width:475px;
}
.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: 380px; /*position where enlarged image should offset horizontally */
}
.thumbnail2{
position: relative;
z-index: 0;
}
.thumbnail2:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail2 span{ /*CSS for enlarged image*/
position: absolute;
background-color: ffffff;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
width:265px;
height:270px;
}
.thumbnail2 span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail2:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 380px; /*position where enlarged image should offset horizontally */
}