body {
	margin: 0;
	padding: 0;
	font:84% Verdana, Helvetica, sans-serif;
}
#threeColLayout {
	color: inherit;
	background-color: #cac78a;
}
#twoColLayout {
	color: inherit;
	background-image: url(../images/maple_river_bg.jpg);
	background-color: #dca;
}
#oneColLayout {
	color: inherit;
	background-color: #CAC78A;
}

/* default links */

a:link {
background-color: none;
text-decoration: none;
color: #666;
}
a:hover {
background-color: #D9D0B9;
text-decoration: underline;
color: #666;
}
a:visited {
background-color: inherit;
text-decoration: none;
color: #5D5D5D
}

/* headers here */

h1 {
margin: 0;
padding: 2px;
font-size: 110%;
color: #B3885E;
}

h2 {
margin: 0;
padding: 2px;
font-size: 135%;
color: #B3885E;
}

.h2Side {
margin: 0 10px;
}

/* 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: 25px 5px 0 37px;
padding: 22px 0 0 2px;
}

.careers h3 {
color: inherit;
background: #F762E0;
}
.one_man h3 {
font-size: 110%;
color: inherit;
background: #B18FD1;
}
.interviews h3 {
font-size: 110%;
color: inherit;
background: #D7D493;
}
.profiles h3 {
color: inherit;
background: #C4DDB8;
}

h3 .main { 
font-size: 90%;
color: inherit;
background: #FFF;
margin: 10px 5px 0 5px;
padding: 2px;
}

/* main wrapper that holds it all centrally */

#wrapper {
	width:750px;
	margin:0 auto;
	color: inherit;
	background-color: #e6dac1;
	padding: 0 10px 10px 10px;
	border:2px solid #888;
	}

/* default masthead holding the banner and mainNav */

#header {
	width: 750px;
	height: 141px;
	color: inherit;
	background-color: #FAA819;
	background-image: url(../images/maple_river_banner.gif);
	background-repeat: no-repeat;
}

/* 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:270px;
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:555px;
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:270px;
margin: 0 0 20px 15px;
}

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

/* 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;
}

.contact {
	margin: 25px 0 0 35px;

	font-size: 14px;
}

.underline {text-decoration: underline;}

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

.cbSide {
width:160px;
margin: 5px 0 0 10px;
padding: 10px 0 5px 0;
color: inherit;
background: #FFF;
}
.cbSide p {
margin: 0;
padding: 0 5px 2px 5px;
font-size: 90%;
color: #666;
background-color: inherit;
}

/* 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: 0;
padding: 15px 0 5px 0;}

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

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

/* paragraph styles for any main boxes */
.cbb p, .cb p {
font-size: 93%;
margin: 10px 0;
padding: 0 35px 5px 40px;
background-color: inherit;
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() no-repeat 100% 0 !important;
	/* background:url() no-repeat 100% 0; */
	margin:0 0 0 18px;
	height:27px;}
	
.bt div {
	height:27px;
	width:18px;
	position:relative;
	left:-18px;
	background:url() no-repeat 0 0 !important;
	/* background:url() no-repeat 0 0; */
	}

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

/* Insert the left border */
/*.i1 {
	padding: 0 0 0 12px;
	background:url() repeat-y 0 0 !important;
	background:url() repeat-y 0 0; 
	}*/
	
/* Insert the right border */
/*.i2 {
	padding: 0 12px 0 0;
	background:url() repeat-y 100% 0 !important;
	background:url() 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 {
	border: 1px solid #EEE;
	padding:0 5px;
	color: inherit;
	background-color: #FFF;
	}
/* CSS for the box ends here */

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

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

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

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

address {
margin-left: 50px;
}

/* erm, the footer */

#footer{
	clear:both;
	width: 750px;
	height: 25px;
	padding: 0px;
	margin: 5px 0;
	color: inherit;
	background-color: #ccbda8;
	font-size: 10px;
}
#footer p {
	margin: 5px 0;
	padding: 5px 0;
	height: 15px;
	font-weight: 400;
	background-color: inherit;
	color: #4A4A4A;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#footer a:link, #footer a:visited {
background-color: inherit;
color: #91794F;
}
#footer a:hover {
color: #000;
background: #dca;
}

/* 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 0 2px 5px;
border: 2px solid #C5BDBD;
}

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

.default img {
border: 0;
}

/* 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;
padding: 10px 0 15px 0;
margin: 4px 0 0 45px;
border: 3px solid #C5BDBD;
}

.requirementsImage {
display: block;
float: none;
padding: 10px 0 12px 0;
margin: 15px 0 0 10px;
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-color: inherit;
color: inherit;
background: url(../images/shadow.gif) no-repeat bottom right;
float:left;
}
 
.img-wrapper img {
float:none;
margin:0;
color: inherit;
background:#fff;
padding:4px;
border:1px solid #C5BDBD;
position:relative;
left:-5px;
top:-5px;
}

/* 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 li a:link {
color:#3A3A3A;
line-height:150%;
text-decoration:none;
display:block;
width:154px;
border-bottom: 1px solid #EDEAEB;
background: #FFF url(../images/ticks.gif);
}

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

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

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

#topnav {
	float: left;
	width: 750px;
	height: 25px;
	margin: 120px 0 0 0;
	padding: 0;
	list-style: none;
	font-size: small;
	color: #cacaca;
	background-color: #ccbda8; 
	background-image: url(); 
	background-repeat: repeat-x; 
	border-top: 1px solid #a78c67;
	border-bottom: 1px solid #a78c67;	
	vertical-align: middle;
	}

#topnav li {
	float: left;
	margin: 7px 0 0 0;
	padding: 0 1px 0 0;
	list-style: none;
	}

#topnav li current {
	font-weight: bold;
	}

#topnav a {
	float: left;
	padding: 1px 25px;
	text-decoration: none;
	background-color: inherit;
	color: #fff;
	}
#topnav a:hover, #topnav a.current {
	color: #fff;
	background-color: #d7cab9;
	}
#topnav a.current {
	font-weight: bold;
	}


/* Highlighting the current page */

body.home #mainNav a#home, body.gallery #mainNav a#gallery, body.contact #mainNav a#contact { 
  	background-color: inherit;
	color: #fff;
	text-decoration: underline;
}
body.home #mainNav a:hover#home, body.gallery #mainNav a:hover#gallery, body.contact #mainNav a:hover#contact { 
	background-color: inherit;
  	color: #3399ff;
}

/* 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() no-repeat right top;
  padding-right: 10px; 
} 
 .box.default a[href^="http://www.mapleriverpheasanthunts.com"], 
 .box.default a[href^="http://www.mapleriverpheasanthunts.com"] { 
  background-image: none; 
  padding-right: 0; 
}

/* form styling - not much though kids */

form {
margin: 0;
padding: 0;
font-size: 80%;
}

fieldset {
width: 146px;
border: 0;
margin: 0 0 10px 0;
padding: 5px;
}

.default fieldset {
width: auto;
border: 0;
margin: 10px 0 10px 25px;
padding: 0;
}

legend {
text-transform: uppercase;
font-size: 110%;
font-weight: bold;
margin: 10px 0 2px 0px;
padding: 2px;
background: #D72E2E;
color: #FFF;
}

.default legend {
display: none;
}

label {
display: none;
}

.default label {
	display: block;
	font-weight: bold;
	font-size: 10px;
	font-style: normal;
}

input {
margin-top:1px;
padding: 2px;
border: 0;
background: #D7E7E9;
color: #333;
}

textarea {
margin-top:0;
padding: 2px;
border: 0;
background: #D7E7E9;
color: #333;
}

.default input {
display: block;
}

input.submit {
	border: 0;
	margin-bottom: 1px;
    padding: 2px;
	background: transparent;
	font-size: 10px;
}





/* CSS for the box starts here
================================================*/
/* Default styling. Used when JavaScript is unsupported */
.cbb {
	padding:0 10px;
	margin:1em 0;
	background:#fff;
	border:1px solid #666;
	}
.cbb h1 {
	margin:0 -10px;
	padding:0.3em 10px;
	color: inherit;
	background:#efece6;
	font-size: 1.2em;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
/* Insert the custom corners and borders for browsers with sufficient JavaScript support */

/* Two of the boxes are floated just for this demo. Adjust to your needs. */
.cb {
	margin:0.5em 0;
	}
.two {
	width:40%;
	float:left;
	}
.three {
	width:45%;
	float:right;
	}
/* Rules for the top corners and border */
.bt {
	background:url() no-repeat 100% 0;
	margin:0 0 0 18px;
	height:17px;
	}
.bt div {
	height:17px;
	width:18px;
	position:relative;
	left:-18px;
	background:url() no-repeat 0 0;
	}

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

/* Insert the left border */
.i1 {
	padding:0 0 0 12px;
	background:url() repeat-y 0 0;
	}
/* Insert the right border */
.i2 {
	padding:0 12px 0 0;
	background:url() 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 {
	color: inherit;
	background:#fff;
	border:1px solid #fdfdfd;
	padding:0 10px;
	}
/* CSS for the box ends here */

/* You can use different borders for different boxes on the same page. Just adjust the CSS. The following is an example that uses the GIF images instead of the PNG images. Note that you can also adjust borders, heights and paddings this way. Remember to adjust the IE CSS as well. */
.three .i1,
.three .i2 {
	background-image:url();
	}
.three .bt,
.three .bt div,
.three .bb,
.three .bb div {
	background-image:url();
	}

.thanks {
	margin: 40px 0 0 40px;
	}
	
.phone1 {
	padding: 0 0 0 25px;
	}
.phone1a {
	padding: 0 0 0 27px;
	}

.phone2 {
	padding: 0 0 0 70px;
	}
.phone2a {
	padding: 0 0 0 15px;
	}
	
.right_40px {
	margin: 0 0 0 42px;
	}
	
.right_25px {
	margin: 0 0 0 10px;
	}	
	
.right_10px {
	margin: 20px 0 0 10px;
	}	
	
.right {
	margin: 0 0 0 -45px;
	}	
	
.center {
	text-align:center;
	background-color: #E6DAC1;
	line-height: 30px;
	color: #282828;
}

.mailform {
	text-align:left;
	margin: 0 0 0 42px;
}

#center {
	text-align:center;
}

/* 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: 25px 0 0 45px; background: url(../images/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; }