/* CSS Mastery: Advanced Web Standards Solutions - Simon Collison's tutorial */

/* the appropriate background class will be applied based on class attached to the body */

body {
	margin: 0;
	padding: 0;
	font:70% 'Lucida Grande',Verdana, Helvetica, sans-serif;
	background: #633 url(images/Tom_bg.gif) repeat;
	/*background: #633 url(images/body_bg3.jpg) repeat-y;*/
	/*background:#FF0;*/ 
}
#threeColLayout {
/*background: #fff url(background.gif) repeat-x fixed;*/
}
#twoColLayout {
/*background: #fff url(background.gif) repeat-x fixed;*/
}
#oneColLayout {
/*background: #fff url(background.gif) repeat-x fixed;*/
}

/* default links */

a:link {
	text-decoration: underline;
	color: #930;
	font-weight:bold;
}
a:visited {
	text-decoration: underline;
	color: #930;
	font-weight:bold;
}

a:hover {
color: #633;
text-decoration: underline;
font-weight:bold;

}
a:active {
text-decoration: underline;
color: #930;
font-weight:bold;
}

/* headers here */

.text {
color:#CC8A00;
}

.boldface {
	font-weight:bold;
	text-transform:lowercase;
}

.newbold {
	font-weight:bold;
}
		
h1 {
margin: 0;
padding: 5px;
font-size: 150%;
color: #FFF;
background: #633 url(images/subheader.jpg) repeat-x;
border-bottom:1px solid #633;
/*text-indent: -9000px;*/
}

h2 {
/*margin: 0 10px 0 10px;*/
margin: 0;
padding: 2px;
font-size: 130%;
color: #FFF;
background: #633 url(images/subheader.jpg) repeat-x;
}

/* and then these h3 statements, unique to whichever section has been attached above, will give the headers the appropriate background color */

h3 {
text-transform: uppercase;
/*display: inline;*/
font-size: 92%;
margin: 10px 5px 0 5px;
padding: 2px;
color:#930;
}

.contact h3 {
background: #94B8E9;
}
.resources h3 {
background: #94B8E9;
}
.services h3 {
font-size: 110%;
background: #94B8E9;
}
.projects h3 {
font-size: 110%;
/*background: #94B8E9;*/
}
.profiles h3 {
background: #94B8E9;
}

/* main wrapper that holds it all centrally //#622000*/ 

#wrapper {
width:800px;
margin:5px auto;
background-color: #FFF;
padding: 0 10px 10px 10px; 
border:30px solid #F7911B;

}

/* default masthead hold ing the banner and mainNav */

#header {
width: 800px;
height: 200px;
background: #633 url(images/banner2_new.jpg) no-repeat;
}

#subheader {
	margin-top:0.1em;
	height:38px;
	background: #930 url(images/subheader.jpg) repeat-x;
}

#clock {
	float:left;
	margin-top:0.1em;
	width:800;
	/*height:25px;*/
	font-size:1.5em;
	color:#FFf;
}

#lookout {
	float:right;
	margin-top:0.1em;
}

#subheader #lookout form input.txt {
		width:120px;
		float:left;
		margin:0.1em 0.5em;
}

#subheader #lookout form input.search {
	width:25px;
	float:left;
	margin:0.2em;
}

/* now the three main columns, named in order of importance and display when styles switched off */

#primaryContent {
float:left;
width:750px;
display:inline;
margin: 0 0 20px 0;
}

/* note here that specifying threeColLayout in the body will activate the following div instead of the default primaryContent */

#threeColLayout #primaryContent {
float:left;
width:295px;
margin: 0 0 20px 195px;
}

/* note here that specifying twoColLayout in the body will activate the following div instead of the default primaryContent */

#twoColLayout #primaryContent {
width:605px;
float:left;
margin: 0 0 20px 195px;
}

/* just incase twoColLayout is specified in body, and secondaryContent is left in, we turn it off - not ideal, but it works */

#twoColLayout #secondaryContent {
display: none;
}

#secondaryContent{
float:left;
width:295px;
margin: 0 0 20px 15px;
}

#sideContent{
float:left;
width:180px;
margin: 0 0 20px -800px;
}

/* just incase oneColLayout is specified in body, and these are left in, we turn them off - not ideal, but it works */

#oneColLayout #secondaryContent, #oneColLayout #sideContent {
display: none;
}

/* twoColContent - used to span two right-hand columns - ONLY LEAVE THIS IN IF I DISCUSS IT - box used only if no selector */

#twoColContent{
width:555px;
float:left;
margin: 0 0 20px 195px;
}

/* cbSide controls non-rounded boxes in the thinner left column, known as sideContent */

.cbSide {
width:160px;
margin: 5px 0 0 5px;
padding: 10px 0 5px 0;
/*background: #FFF;*/
}

.cbSide_pic {
width:177px;
height:140px;
margin: 15px 0 0 0px;
/*padding: 10px 0 5px 0;*/
/*background: #FFF url(images/billingford_sidebar.jpg) no-repeat;*/
/*background: #FFF url(images/office-external.jpg) no-repeat;*/
/*background: #FFF;*/
}

.cbSide1 {
width:270px;
margin: 5px 0 0 10px;
padding: 10px 0 5px 0;
height:250px;
background: #FFF;
}

.cbSide2 {
width:575px;
margin: 5px 0 0 10px;
padding: 10px 0 5px 0;
background: #FFF;
}
.cbSide p {
margin: 0;
padding: 0 5px 5px 5px;
color: #CC0000; /*#333;*/
line-height:170%;
font-weight:bold;
font-size:110%;
}

.cbSide1 p {
margin: 0;
padding: 0 5px 5px 5px;
color: #333;
line-height:170%;
}

.cbSide2 p {
margin: 0;
padding: 0 5px 5px 5px;
color: #333;
line-height:170%;
}

/* box is the shaded area that holds a rounded corner box or flat box, fitting the given width of the column it is in. Usually combined with another class to control inner elements, eg box default */

.box {
margin: 15px 0 0 0;
/*padding: 5px 0 5px 0;*/
border:2px inset #633;
`
background:  #FFF;
/*background: #94B8E9 url(diags.gif);*/
}

.box1 {
margin:15px auto 0 0;
border:1px solid  #633;
background:  #FFF;
}


/* Styling of the boxes if there is no JavaScript support */

.cbb {
margin: 0 10px 0 10px;
background: #FFF;
padding: 5px 0 5px 0;
line-height: 170%;
}

/* paragraph styles for any main boxes */
.cbb p, .cb p {
margin: 0;
padding: 0 5px 5px 50px;
color: #333;
}

/* Insert the custom corners and borders for browsers with sufficient JavaScript support */

.cb {
margin: 0.5em 0;
line-height: 170%;
	}

/* Rules for the top corners and border */
.bt {
	background:url(images/box.png) no-repeat 100% 0 !important;
	background:url(images/box.gif) no-repeat 100% 0;
	margin:0 0 0 18px;
	height:27px;
	}
.bt div {
	height:27px;
	width:18px;
	position:relative;
	left:-18px;
	background:url(/images/box.png) no-repeat 0 0 !important;
	background:url(images/box.gif) no-repeat 0 0;
	}

/* Rules for the bottom corners and border */
.bb {
	background:url(images/box.png) no-repeat 100% 100% !important;
	background:url(images/box.gif) no-repeat 100% 100%;
	margin:0 0 0 12px;
	height:14px;
	}
.bb div {
	height:14px;
	width:12px;
	position:relative;
	left:-12px;
	background:url(images/box.png) no-repeat 0 100% !important;
	background:url(images/box.gif) no-repeat 0 100%;
	}

/* Insert the left border */
.i1 {
	padding: 0 0 0 12px;
	background:url(images/borders.png) repeat-y 0 0 !important;
	background:url(images/borders.gif) repeat-y 0 0;
	}
/* Insert the right border */
.i2 {
	padding: 0 12px 0 0;
	background:url(images/borders.png) repeat-y 100% 0 !important;
	background:url(images/borders.gif) repeat-y 100% 0;
	}
/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
	background:#FFF;
	border: 1px solid #FFF;
	border-width:1px 0;
	padding:0 5px;
	}
/* CSS for the box ends here */

/* date and posted control the small text info in article blurbs */

.date {
font-size: 85%;
font-weight: bold;
color: #666;
}

.posted {
display: block;
margin: -5px 0 0 5px;
padding: 0 0 10px 0;
font-weight: bold;
color: #000;
}

.postedUnderline {
display: block;
margin: 0 5px 5px 50px;
padding: 0 0 5px 0;
font-weight: bold;
color: #666;
border-bottom: 1px solid #999;
}

address {
margin-left: 50px;
}

/* erm, the footer */

#footer{
clear:both;
width: 800px;
height: 50px;
background: transparent url(footer.gif);
padding: 0px;
}

#media {
	clear:both;
	width:80px;
	height:60px;
	padding:0px;
}
.media li {
	list-style-type:none;
	display:inline;
	margin:10px;
}
	
#footer p {
margin: 10px 10px 0 0;
padding: 20px 4px 4px 0;
font-weight: normal;
}

#footer a:link, #footer a:visited {
color: #630;
font-weight: bold;
}
/*#footer a:hover {
color: #F90;
font-weight: bold;
}*/

/* image control. First we define stuff common to ALL images on the page. It is then up to other styles to override these. By default, all images will have a 2px border, and bottom and right margins of 5px. They will all float left. */

img {
float: left;
margin: 0px 5px 2px 0px;
border: 1px solid #930;
}
 
.noborder {
	border:none;
}

.thanks {
  margin-left:15px;
  border:none;
 }

/* For any images in the default boxes - the pencil icons - I don't want the 2px border. So I set border to 0 */

.sideimage {
margin: 0px 5px 2px 0px;
border: 1px solid #930;
}

.imageclass {
	height:30px;
	width:80px;
	border:none;
}

/* For these larger images, I don't want them to float, for that causes the h3 above to be pushed to the right. I also declare a top margin to space the header and image apart, and also increase the border width slightly.  We also set it to display:block so that if body id is twoColLayout, the image will force the header and other bits to wrap around it */

.mainImage {
display: block;
float: none;
margin-top: 4px;
border: 3px solid #C5BDBD;
}

/* drop shadow effect for the gallery thumbnails. Sadly this requires a div to be wrapped around the image markup, which is a shame */

.img-wrapper {
margin: 20px 40px 0 0;
background: url(shadow.gif) no-repeat bottom right;
float:left;
line-height:0;
}
 
.img-wrapper img {
float:none;
margin:0;
background:#fff;
padding:4px;
border:1px solid #C5BDBD;
position:relative;
left:-5px;
top:-5px;
}

#footer .image {
	float:left;
	margin-right:200px;
}

#wrapper2 {
width:800px;
margin:0 auto;
/*background-color: #FFF;*/
padding: 0 10px 10px 10px;

}
#wrapper2 .namedanchor {
	float:right;
	font-weight:bold;
	
}
.namedanchor a:link {
	text-decoration: underline;
	color: #FFF;
	font-weight:bold;
}
.namedanchor a:visited {
	text-decoration: underline;
	color: #FFF;
}

.namedanchor a:hover {
color: #FFF;
text-decoration: underline;

}
.namedanchor a:active {
text-decoration: underline;
color: #FFF;
}
/* used to ensure all our floated thumbnails stay the right width away from the left side of the box */

.thumbnails {
margin: 0 0 20px 50px;
}

/* spacer used immediately after the floated gallery thumbnails to ensure the box expands to hold them all */

.spacer {
clear: both;
}

/* CSS for the ticked off links. Note, I am not ordering things in the LVHA way, as I prefer the visited tick to work above the arrow once visited. */

.cbSide ul {
list-style-type: none;
margin-top: 0px;
margin-left: 0;
margin-bottom: 0;
padding: 3px;
}

.cbSide ul ul {
list-style-type: none;
margin-top: 0px;
margin-left: 0;
margin-bottom: 0;
padding: 3px;
}

.cbSide li a:link {
color:#000;
font-weight:normal;
line-height:150%;
text-decoration:none;
display:block;
width:154px;
border-bottom: 1px solid #EDEAEB;
background: url(images/ticks.gif);
}


.cbSide li a:active {
color:#000;
font-weight:normal;
line-height:150%;
text-decoration:none;
display:block;
width:154px;
border-bottom: 1px solid #EDEAEB;
background: url(images/ticks.gif);
}

.cbSide li a:hover {
color:#930;
font-weight:normal;
line-height:150%;
display:block;
width:154px;
border-bottom: 1px solid #EDEAEB;
background: url(/images/ticks.gif) 0px -20px;
text-decoration:none;
}

.cbSide li a:visited {
color: #9B5A2D;
font-weight:normal;
text-decoration:none;
line-height:150%;
display:block;
width:154px;
border-bottom: 1px solid #EDEAEB;
background: url(images/ticks.gif);
background-position: 0 -40px;
}

.cbSide li li a:link {
color:#900;
line-height:150%;
text-decoration:none;
display:block;
}

.cbSide li li a:hover {
color:#369;
line-height:150%;
display:block;
text-decoration:none;
}

/* horizontal main menu navigation - based on a method from Richard Rutter */

 #mainNav
{
margin: 15px 0 0 0;
padding: 0;
width: 800px;
height: 25px;
font-weight: bold;
font-size: 90%;
/*background:#F4F8FF;*/
}

#mainNav ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;

}

#mainNav li
{
display: block;
margin: 0;
padding:10px 0;
float: left;
width: auto;

}

#mainNav a
{
color: #FFF; 
text-decoration: none;
/*background: #930;*/
background: #930 url(images/subheader.jpg) repeat-x;
margin: 0;
padding: 10px 25px;
border-right: 1px solid #FFF;
}

#mainNav a:hover, #mainNav a:active { 
	background: #F90 url(images/hover.jpg) repeat-x;
	/*background: #F90;*/
	color: #000; 
}
/*#mainNav a:hover, #mainNav a:active { background: #94B8E9;/*color: #000; }*/

#mainNav a.active:link, #mainNav a.active:visited
{
position: relative;
z-index: 102;
background: #BBB;
color: #D7D493;
font-weight: bold;
}

/* Highlighting the current page */

body.home #mainNav a.mark, 
body.profile #mainNav a.mark,
body.products #mainNav a.mark,
 body.services #mainNav a.mark, 
  body.news #mainNav a.mark,
   body.faq #mainNav a.mark,
	body.projects #mainNav a.mark,
	 body.contact #mainNav a.mark,
	  body.shop #mainNav a.mark { 
  color: #000;
  /*background-color:#000;*/
  background: #000 url(images/highlight1.jpg) repeat-x;
text-decoration: underline;
}
body.home #mainNav a:hover.mark, 
 body.profile #mainNav a:hover.mark,
  body.products #mainNav a:hover.mark, 
   body.services #mainNav a:hover.mark,
    body.news #mainNav a:hover.mark,
	 body.faq #mainNav a:hover.mark,
	  body.projects #mainNav a:hover.mark,
	   body.contact #mainNav a:hover.mark,
	    body.shop #mainNav a:hover.mark { 
  color: #FFF;
}

/* Highlighting external links ONLY in the main text areas, so as not to screw up the ticked-off links */

.box.default a[href^="http:"] { 
  background: url(external.gif) no-repeat right top;
  padding-right: 10px; 
} 
 .box.default a[href^="http://www.collylogic.com"], .box.default a[href^="http://www.collylogic.com"] { 
  background-image: none; 
  padding-right: 0; 
}




.datatable {
	border: none;
	background:#FFF2F2;
	width:30em;
	font-size:1.2em;
}

.datatable td {
	border: 1px solid #633;
	padding: 4px;
	vertical-align:top;
}

 fieldset {
  margin: 1em 0; /*  space out the fieldsets a little*/
  padding: 0.5em;
  border : 1px solid #633;
  background: #FFF4F4;
 }
 
 legend {
  font-weight: bold;
  color:#000;
}

.contactbold {
	color: #930;
}

#primaryContent label {
  display: block;
  font-size:1.2em;
} 

#primaryContent label .required {
	font-style:italic;
	font-size:0.75em;
	color:#F00;
}
	
.frmbutton {
	height:10px;
	float:left;
	margin-left:2em;
}

 input.submit {
	width:auto;
	background: #930 url(images/highlight1.jpg) repeat-x;
	color:#000;
	font-weight:bold;
	border:1px outset #000;
	float:left;
	margin-right:1em;
}

 input.reset {
	width:auto;
	background: #930 url(images/highlight1.jpg) repeat-x;
	color:#000;
	font-weight:bold;
	border:1px outset #000;
	float:left;
	/*padding-top:0;*/
}

input:focus, textarea:focus {
  background: #ffc;
}
	  

.response {
	font-size:1.5em;
}
.response p {
	font-size:1em;
	}