/* universal */

body {
/* centre site for IE */
text-align: center;
/* ****************** */
font-size: 62.5%;
font-family: Tahoma, Verdana, Arial, sans-serif;
margin:0;
padding:0;
}

/* centre whole of page vertically*/

/* styles for IE 5 Mac */
 #horizon {
	background-color: transparent;
	position: absolute;
	top: 20px;
	left: 20px;
 }
 
 /* following rules are invisible to IE 5 \*/
 #horizon {
   top: 50%;
   left: 0px;
   width: 100%;
   margin-top: -200px;
   text-align: center;
   min-width: 900px; 
 }
 /* end IE 5 hack */ 


.hide {
display:none;
}

a {
color: #BF0122;
text-decoration:none;
border-bottom: 1px solid #BF0122;
}

a.case {
color: #000;
font-weight: bold;
}

.right {
float:right;
padding: 5px 5px 0 0;
}

/* navigation */

#navsite {
clear:both;
padding-top: 10px;

}

#navsite h5 {
display: none;
}

#navsite ul {
width: 200px;
padding: 3px 0 15px 0px;
margin: 10px;
font: normal 1.2em Tahoma, sans-serif;
text-align: left;
letter-spacing: 0.5px;
}

#navsite ul li {
list-style: none;
margin: 0;
display:block;
}

#navsite a {
display: block;
padding: 2px 2px 2px 100px;
border: 1px solid #fff;
background-repeat: no-repeat;
background-position: 0% 50%;
color: #fff;
font-weight: bold;
}

#navsite ul li a.home {
background-image:url(../images/nav_home.gif);
}

#navsite ul li a.family {
background-image:url(../images/nav_family.gif);
}

#navsite ul li a.commercial {
background-image:url(../images/nav_commercial.gif);
}

#navsite ul li a.contact {
background-image:url(../images/nav_contact.gif);
}

#storyboard ul {
padding: 3px 0 15px 0px;
margin: 10px;
font: normal 1em Tahoma, sans-serif;
text-align: center;
letter-spacing: 0.5px;
}

#storyboard ul li {
list-style: none;
margin: 0;
display:inline;
}

#storyboard a.last {
border-right: 1px solid #fff;
}

#storyboard ul li a {
border-right: 1px solid #ccc;
padding: 3px 0.5em;
margin-left: 2px;
border-bottom: none;
text-decoration:none;
letter-spacing: 1px;
color: #999;
}

#storyboard ul li a:link {
color:#999;
}

#storyboard ul li a:link:hover, #storyboard ul li a:visited:hover {
color:#000;
border-bottom: 1px solid #FA03FF;
}

#storyboard ul li a.on {
border-bottom: 1px solid #BF0122;
}



/* layout */

#containerhome {
width: 750px;
height: 450px;
margin: 0 auto;
text-align: left;
border: 1px solid #ccc;
background:url(../images/intro1.jpg) top right no-repeat;
}

#containercomm {
width: 750px;
height: 450px;
margin: 0 auto;
text-align: left;
border: 1px solid #ccc;
background:url(../images/comm.jpg) top right no-repeat;
}

#containerfam {
width: 750px;
height: 450px;
margin: 0 auto;
text-align: left;
border: 1px solid #ccc;
background:url(../images/family.jpg) top right no-repeat;
}

#header {
width: 750px;
line-height: 0.1;
}


#maincol {
float: left;
width: 450px;
margin-left: 10px;
padding: 0 30px 0 10px;
font-size: 1.2em;
line-height: 2em;
text-align:left;
}

#maincolscroll {
float: left;
width: 450px;
margin-left: 10px;
padding: 0 30px 0 10px;
font-size: 1.2em;
line-height: 2em;
text-align:left;
}

#maincol ul li {
padding: 0;
}

#maincol ul li.portfolio {
padding: 5px;
}

#rightcol {
margin: 0 10px 10px 10px;
padding: 45px 10px 0 10px;
width: 275px;
background-repeat:no-repeat;
background-position: top left;
font-size: 1em;
line-height: 2em;
text-align:justify;
color: #000;
}

#rightcolinner {
margin: 0 15px 10px 500px;
font-size: 1.2em;
line-height: 2em;
text-align:justify;
color: #000;
height: 250px;
}

html>body #rightcol {
margin-top:-10px;
	}
	
#subcol {
background-color:#fff;
padding: 0;
margin: 0 10px 20px 10px;
color: #000;
text-align:left;
}

#subcol p {
margin: 10px;
padding: 10px 10px 0 10px;
font-size: 0.76em;
}

/* hack for any browser other than IE will read the following */
html>body #subcol p {
padding: 10px;
} 

#subcol ul {
	padding: 3px 0 0 0px;
	margin: 10px;
	font: normal 1em Tahoma, sans-serif;
	text-align: left;
	letter-spacing: 0.5px;
}

#subcol ul li {
list-style: none;
margin: 0;
padding: 10px;
color:#000;
line-height: 2em;
}

#footer {
clear:both;
color:#666;
font-size: 1.1em;
background-color:#fff;
padding: 10px 0 0 0;
}

/* sub layout */

#contentintro, #storyboard {
padding: 10px 0 0 0;
line-height: 1em;
font-size: 0.9em;
}

#subleft {
width: 100px;
float: left;
border-right: 1px solid #ccc;
line-height: 2em;
text-align:left;
text-align:justify;
font-size: 1.2em;
}

#subright {
margin: 0px 0 0px 200px;
line-height: 2em;
text-align:left;
text-align:justify;
font-size: 1.2em;
}

/* typography and images on main column */

#maincol p {
color: #999999;
}

#maincol img.right {
float: right;
}

#maincol img.left {
float: left;
padding: 4px;
border: 1px solid #ccc;
margin-right: 10px;
}

#maincol h1 {
font: normal 1em Tahoma, Verdana, Arial, sans-serif;
color: #999999;
margin: 0;
padding: 0;
}

#maincol h1.home span{
/* ensure that this technique doesn't become spam and that screen readers are ok */
overflow: hidden;
width: 0px;
height: 0px;
position: absolute;
z-index: -1;
font-size: 1px;
line-height: 0px;
}

#maincol h2 {
font: bold 1.6em Tahoma, Verdana, Arial, sans-serif;
border-top: 1px solid #ccc;
color: #000;
margin: 0;
padding-top: 10px;
letter-spacing: 1px;
}

#maincol h2.strapline, #maincol h1.strapline {
border-top: 1px solid #fff;
color: #ccc;
display:inline;
}

#maincol h2.strapline {
font-variant:small-caps;
font-size: 1.1em;
}

#maincol h2.top {
font: bold 1.6em Tahoma, Verdana, Arial, sans-serif;
border-top: 0px solid #fff;
color: #000;
margin: 0;
padding-top: 10px;
letter-spacing: 1px;
}