/* Berkshire Inns MainB CSS */
/*------- 5/13/09 2:15PM -------*/
/*   
Theme Name: biMainMU
Theme URI: www.berkshireinns.com
Description: Theme for Berkshire Inns
Author: Allan Douglas, DDGraphics WebMedia
Author: URI: www.ddgwebmedia.com
 */

/**********************************/

/* @group HTML Elements */

/*-------- HTML Elements --------*/

body {
	color: #08083E;
	font: 90% Optima, "Sans Serif";
}

a {
	text-decoration: none;
	color: navy;
}

p, td, h1, h2, h3, h4, h5, ul, li {
	font-family: Optima, "Sans Serif";
	color: #333;
}

p {
	font-size: .95em;
}

h1 {
	color: #333;
	font-size: 1.8em;
}

h2 {
	font-size: 1.5em;
	color: #333333;
}

h3 {
	font-size: 1.2em;
	color: #333333;
}

/* @end HTML Elements */
/**************************/
/* @group ID Selectors */

/* ---- ID Selectors ---- */
/*- Container Around Everything -*/

.container16 {
	width: 96%;
	max-width: 90em;
	margin: 0 auto;
	color: #3F5D6B;
}

/*************************/
/* @group Sub Content */

#subcontent {
	float: right;
	width: 28%;
	margin: 0;
	padding: 0;
	/*border: thin solid maroon;*/
}

/* @end Sub Content */

/*------ Header Stuff ------*/

/* default masthead holding the banner and mainNav */

#header {
	width: 100%;
}

#header h1 {
	color: #08083E;
	font: 3em "Imprint MT Shadow";
	margin: 0 0 0 1em;
}

.lefthdr {
	float: left;
	width: 40%;
	margin: 0;
	padding: 0;
}

.righthdr {
	float: right;
	width: 59%;
	margin: 0;
	padding: 0;	
}

.righthdr h1 {
	color: #484833;
	padding: 0;
	font-weight: bold;
	font-size: 2.5em;
	font-variant: small-caps;
	text-align: left;
	margin: .3em 0 .3em 1em;
}

.righthdr p {
	color: #484833;
	padding: 0;
	font-size: .9em;
	font-variant: small-caps;
	text-align: right;
	margin: .3em 1em 0 0;
}

/*----- End Header Stuff -----*/
/* @end ID Selectors */
/************************/
/* @group Box Stuff */

/* 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: 1.5em 0 0 0;
	padding: .5em 0 .5em 0;
}

/*.boxinns {
	margin: 0;
	padding: .5em 0 .5em 0;
	background-color: #FFF;
	opacity: 0.8;
}*/

.boxinns {
	width: 99%;
	padding: .5em 0;
	margin: 0 auto;
}

.boxfull {
	clear: both;
	width: 99%;
	margin: 0 auto;
	padding: .5em 0 .5em 0;
}

.boxfull p a {
	clear: both;
	width: 95%;
	text-transform: uppercase;
	text-align: center;
	margin: 1em 0 0;	
}

.boxfull h4 {
	clear: both;
	text-transform: uppercase;
	font-size: 92%;
	padding: .2em;
	margin: 1em 0 0;	
}

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

.anyCol {
	width: 95%;
	padding: .5em 0;
	margin: 0 .5em;
}

/* paragraph styles for any main boxes */

.anyCol p, .col p {
	color: #333;
	margin: 0;
	padding: 0;
}

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

.box h1 {
	font-size: 160%;
	background: white;
	padding: .2em;
	margin: 0 .5em;
}

/*h2 {
	font-size: 140%;
	color: whitesmoke;
	background-color: #424665;
	margin: 1em auto 0 0;
	letter-spacing: .3em;
	font-variant: small-caps;
	padding: .2em .2em .2em .5em;
}*/

h3 {
	text-transform: uppercase;
	font-size: 92%;
	margin: 1em .5em 0;
	padding: .2em;
}

h4{
	text-transform: uppercase;
	font-size: 92%;
	padding: 2px;
	margin: 1em 0 0 .5em;
}

/********************************/

.news p {
	margin: 0;
	color: #333;
	padding: 0 .5em .5em .8em;
	line-height: 105%;
}

.news .date {
	font-size: 1em;
	margin: 0;
	color: #333;
	padding: 0 .5em .5em .8em;
}

.about p {
	margin: 0;
	padding: 0 .5em .5em .8em;
}


/* CSS for the box ends here */

/* @end Box Stuff */
/***************************/
/* date and posted control the small text info in article blurbs */

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

.posted {
	display: block;
	margin: 0 0 0 5em;
	padding: 0 0 1em 0;
	font-weight: bold;
	color: #666;
}

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

address {
	margin-left: 5em;
}
/**************************/
/* @group Specials Stuff */
/*- Controls specials on Index.php -*/

.specials {
	width: 98%;
	margin: 0 auto 0 0;
}
.specialsita {
	width: 98%;
	margin: 1em auto 0 0;
	border: thin inset navy;
}
.specialsbrdr {
	border-right: thin inset navy;
	border-bottom: thin inset navy;
	border-left: thin inset navy;
}

.specials h2 {
	color: whitesmoke;
	background-color: #424665;
	margin: 1em auto 0 0;
	letter-spacing: .2em;
	text-transform: none;
	padding: .2em .2em .2em .5em;
	font: 140% Zapfino;
}

.specials h3 {
	text-transform: none;
	font-size: 120%;
	margin: 1em 0 0;
	padding: 0;
	color: navy;
	font-weight: normal;
	font-style: normal;
}

.specials a {
	color: navy;
}

.specials p {
	text-align: center;
}
.specials ul {
	width: 96%;
	list-style-type: disc;
	margin: .8em auto 0;
}

.specials li {
	margin: .5em auto .5em .5em;
}

.specials li a {
	color: #363644;
}

.specials li a:hover {
	color: #827ea6;
}

.smallfont {
	font-variant: small-caps;
	font-size: 93%;
}
/* @end Specials Stuff */
/***************************/
/* @group Reservation Stuff */ 

.resies {
	font-variant: small-caps;
	text-align: center;
}

.reziesdropdowns {
	text-align: center;
	margin: .5em 0 0;
	padding: 0;
}

/* @end Town Stuff */
/***********************/
/* @group Contacts Page Stuff */

/*--- Contacts Page Stuff ---*/
/*-- Needed in every site that uses our DB for contact information --*/

#contact {
	float: left;
	width: 98%;
	position: relative;
	margin: 0 .5em;
	padding: 0;
	z-index: -6;
}

#contact .modules {
	clear: both;
	padding-top: 5px;
	text-align: center;
  }
  
#contact h2 {
	margin-bottom: 0px;
	-moz-border-radius: 10px;
	color: white;
	background-color: #807E59;
	border-bottom-width: medium;
	border-bottom-style: groove;
	border-bottom-color: #666666;
	text-align: center;
	margin-top: 15px;
}

#contact h4 {
	margin: 0 auto;
	text-align: center;
	margin-bottom: 0px;
	-moz-border-radius: 10px;
	color: white;
	background-color: #807E59;
	border-bottom-width: medium;
	border-bottom-style: groove;
	border-bottom-color: #666666;
}

#contact h5 {
	text-align: center;
	font-weight: normal;
	color: #333;
}

#contact .contact {
	text-align: center;
	float: left;
	display: block;
	font-size: small;
	width: 33%;
}
#rightcolcntct {
	float: right;
	width: 20%;
	margin: 0;
	z-index: 0;
	position: fixed;
	left: 78%;
}
.rowcccntct {
	clear: both;
	width: 100%;
}
.imagerc {
	width: 100%;
	border: thick ridge white;
}
.imagecc {
	width: 31%;
	border: thick ridge white;
}
/****************************/
/*---- Form Stuff ----*/
#frmcontainer {
	background-color: #CCCCCC;
	width: 500px;
	border: thin dashed #660099;
	margin: 0 auto;
	clear: both;
}
#frmcontainer h2 {
	font-size: 1.1em;
	margin: .5em 0em;
}

div.row {
	clear: both;
	padding-top: 5px;
	text-align: center;
  }
div.row1 {
	clear: both;
	padding-top: .5em;
	text-align: center;
}
div.row span.label {
  float: left;
  width: 35%;
  text-align: right;
  }

div.row span.formw {
  float: right;
  width: 55%;
  text-align: left;
  }
div.row span.labelcr {
	float: left;
	width: 30%;
	text-align: right;
}
div.row span.labelbg {
	float: left;
	width: 15%;
	text-align: right;
}

div.row span.formcr {
float: right;
width: 70%;
text-align: left;
color: #000066;
} 
div.row span.formbg {
float: right;
width: 10%;
text-align: left;
} 
div.rowbttns {
	clear: both;
	padding-top: .5em;
	text-align: center;
}
 
/*------ Form Button ------*/
.formbttn {
	cursor: pointer;
	background-color: #807E59;
	color: white;
	border: outset 1px #ccc;
	padding: 1px 2px;
}
.formbttnoff {
	background-color: #666699;
	color: #CCCCCC;
	border: outset 1px #ccc;
	padding: 1px 2px;
}

/*---- Button Classes ----*/

.sbmtbutton a:link, .sbmtbutton a:visited {
	width: 7em;
	display: block;
	border-top: medium solid #CCCCCC;
	border-right: medium solid #666;
	border-bottom: medium solid #666;
	border-left: medium solid #CCCCCC;
	color: navy;
	background-color: #FF7745;
	text-align: center;
	font-size: 1em;
	padding-top: 3px;
	padding-bottom: 3px;
	float: left;
}

.sbmtbutton a:hover, .sbmtbutton a:active {
	color: #FF7745;
	background-color: navy;
	text-align: center;
	border-top-color: #666;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #666;
}
 /*---- End Form CSS ----*/

/* @end Contacts Page Stuff */
/***************************/
/* @group Form Stuff */

/* form styling - not much though kids */

form {
	margin: 0;
	padding: 0;
	/* font-size: 100%; */
}

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

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

legend {
	text-transform: uppercase;
	font-size: 99%;
	font-weight: bold;
	background: #D72E2E;
	color: #FFF;
	margin: 1em 0 .2em;
	padding: .2em;
}

.default legend {
	display: none;
}

label {
	display: none;
}


.default label {
	display: block;
	font-weight: bold;
}

input {
	margin-top: 0;
	padding: .2em;
	border: 0;
	background: #CABA8A;
	color: #FFF;
}

textarea {
	margin-top: 0;
	padding: .2em;
	border: 0;
	background: #CABA8A;
	color: #FFF;
}

.default input {
	display: block;
}

input.submit {
	border: 0;
	margin-bottom: -6px;
	padding: 2px;
	background: transparent;
	font-size: 1em;
}
/*-- rezies form stuff --*/

.rowrc {
	clear: both;
	margin: .5em 0 0;
	text-align: center;
}
.labeldd {
	float: left;
	width: 49%;
	text-align: right;
	font-weight: bold;
}

.formdd {
	float: right;
	width: 50%;
	text-align: left;
}

/* @end Form Stuff */
/***********************/
/* @group Image Stuff */
/*-- used to scroll images on index page -*/

#pic {
	position: relative;
	width: 98%;
	text-align: center;
	overflow: hidden;
	margin: 1em auto 1.2em 0;
}

#picscroll {
	/*left: -100px;*/
	border-top: medium groove #030;
	border-bottom: medium groove #030;
	padding: .2em 0;
}

/* @group Portfolio Stuff */

#imgthmbswrapper {
	position: relative;
	width: 100%;
	margin: 0 auto;
}	

.thmbsrow {
	clear: both;
	width: 90%;
	margin: 0 auto;
	border: medium inset #807E59;
}

.thmbsfloat {
	float: left;
	/*width: 28%;*/
	text-align: center;
	margin: .2em .1em;
}

/*---- Portfoilio Classes ----*/
/*-------- Classes --------*/

.photoCol {
	margin: 0 1em;
	padding: .5em 0;
	background: #FFF;
}

.photoCol img {
	display: block;
	text-align: center;
	margin-top: .4em;
	border: .3em solid #C5BDBD;
}

.phototitle {
	clear: both;
	font-size: 1.2em;
	font-variant: small-caps;
	text-align: center;
	margin: .5em 0;
}

.pfgalleryrow {
	clear: both;
	width: 70%;
	margin: 0 auto;

}

.pfgalleryprev, .pfgallerynext {
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
	color: #B7A07F;
}

.pfgalleryprev {
	float: left;
	text-align: left;
	width: 34%;
	/*border: .2em solid #C5BDBD;*/
	line-height: 120%;
}

.pfgallerynext {
	float: right;
	text-align: right;
	width: 34%;
	/*border: .2em solid #C5BDBD;*/
	line-height: 120%;
}

.pfpiclargepic {
	display: block;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}
/*--- End Portfolio CSS ---*/

/* @end Portfolio Stuff */
/* 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: 0 0 .3em;
	/*-border: .2em 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;
	padding-right: .6em;
}

/* 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;
	text-align: center;
	float: none;
	margin-top: .4em;
	border: .3em solid #C5BDBD;
}

.imgaligncntr {
	display: block;
	text-align: center;
}
.imgcntrnegmargin {
	display: block;
	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: 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;
}

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

/* @end Image Classes*/
/************************/
/* @group Navigation */
/*------ Navigation ------*/
/*-- 11/9/09 --*/

/* @group Top Nav */

#navigation {
	float: right;
	width: 100%;
	height: 2.3em;
	background: #181860;
}

#ournav, #ournav ul {
	float: right;
	width: 100%;
	list-style: none;
	line-height: 1.5em;
	background: #181860;
	font-weight: bold;
	padding: 0;
	margin: 0;
	border-top: thin solid #00440f;
	/*border-bottom: thin solid #00440f;*/
}

#ournav a {
	display: block;
	/*width: 10em;
	w\idth: 6em;*/
	text-decoration: none;
	color: white;
	padding: 0.2em .7em;
}

#ournav a:hover, #ournav a:active {
	color: navy;
}

#ournav li {
	float: left;
	padding: .3em 0; 
	/*width: 10em;*/
}

#ournav li a:before {
	content: ":: ";
}

#ournav li a:after {
	content: " : ";
}

#ournav li.wide8 {
	width: 8em;
}

#ournav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 12em;
	font-weight: normal;
	margin: 0;
	border: thin solid #00440f;
}

#ournav li ul.iehalf {  /*second-level lists*/
	width: 6em;
}

#ournav li ul.iehalf li {  
	width: 6em;
	padding-right: 0;
}

#ournav li ul.iehalf li ul {  
	margin: -2em 0 0 6em;
	width: 6em;
}

#ournav li li {
	padding-right: .5em;
	width: 11.5em
}

#ournav li ul a {
	width: 10em;
	/*w\idth: 9em;*/
}

#ournav li ul ul {
	margin: -2.1em 0 0 12em;
}

#ournav li:hover ul ul, #ournav li:hover ul ul ul, #ournav li.sfhover ul ul, #ournav li.sfhover ul ul ul {
	left: -999em;
	z-index: 1;
}

#ournav li:hover ul, #ournav li li:hover ul, #ournav li li li:hover ul, #ournav li.sfhover ul, #ournav li li.sfhover ul, #ournav li li li.sfhover ul {
	left: auto;
	z-index: 1;
}

#ournav li:hover, #ournav li.sfhover {
	background: #6767B0;
	color: #181860;
}

/* Highlighting the current page */

body.home #ournav a#home, body.about #ournav a#about, body.towngov #ournav a#towngov, body.bylaws #ournav a#bylaws, body.permits #ournav a#permits, body.events #ournav a#events, body.history #ournav a#history, body.gallery #ournav a#gallery, body.contact #ournav a#contactc {
	color: gray;
	text-decoration: underline;
}

body.home #ournav a:hover#home,
body.about #ournav a:hover#about, body.bylaws #ournav a:hover#bylaws, body.towngov #ournav a:hover#towngov,
body.permits #ournav a:hover#permits, body.events #ournav a:hover#events, body.history #ournav a:hover#history, body.gallery #ournav a:hover#gallery, body.contact #ournav a:hover#contactc {
	color: black;
}

/* @end Top Nav */
/***********************/
/* @group Column Nav */
/* column nav links */

.colnav, .colnav ul {
	padding: 0;
	list-style: none;
	float: left;
	width: 99%;
	text-align: right;
	margin: 1em .5em 0 0;
}

.colnav a {
	color: #666;
	line-height: 150%;
	text-decoration: none;
	display: block;
}

.colnav a:hover, .colnav a:active {
	color: maroon;
}

.colnav li {   
	position: relative;
	float: left;
	line-height: 150%;
	width: 100%; 
}

.colnav li ul li {  
	margin-left: .5em;
}
/*-- end column nav links --*/
/* @end Column Nav */
/*************************/
/* @group Footer Nav */
/*---- Footer ----*/

#footer {
	clear: both;
	width: 90%;
	margin: 1em auto 0;
	text-align: center;
	font-size: .9em;
	padding: 0;
	border-top: 1px solid #2D356A;
}

#footer p {
	font-size: .9em;
}

#footer a:link, #footer a:visited {
	color: #181860;
}

#footer a:hover, #footer a:active {
	background: #181860;
	color: silver;
}

/*--- End Footer ---*/
/* @end Footer Nav */
/* @end Navigation */
/**************************/

/* @group Clearing-Floats */
/*------ ClearFix ------*/
/*---- Used to push divs ----*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

	/*--- End ClearFix ---*/

/* =Clear Floated Elements -----*/
/* http://sonspring.com/journal/clearing-floats */

html body * span.clear,
html body * div.clear,
html body * li.clear,
html body * dd.clear {
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* @end Clearing-Floats */
/******************************/
/* @group Site Wide Classes */

/*-------- Classes --------*/
	
.banner {
	font-variant: small-caps;
	text-align: center;
	color: silver;
	background-color: #2f3955;
	font-style: italic;
	letter-spacing: .5em;
}

.imgindexadd {
	display: block;
	width: 90%;
	font-variant: small-caps;
	font-size: 110%;
	text-align: center;
	padding: 0;
	margin: 1em auto 0;
	border: medium inset #536386;
}

.row {
	clear: both;
}

.bdrbottom {
	border-bottom: medium ridge #800;
}

.tagline {
	text-align: center;
	border-bottom: medium ridge #800;
	color: #800;
	width: 90%;
	margin: 1em auto 1.5em;
	padding: 0;
}

.fontbigger {
	font-size: 200%;
}

.transwhite {
	background: url(../SiteAssets/Jpeg/transwhite85.jpg) repeat left top;
}

.transblack {
	clear: both;
	background: url(../SiteAssets/Jpeg/transblack45.png) repeat left top;
}

.opac7 {
	background: #FFF;
	opacity: 0.7;
}

.zlayer1 {
	position: relative;
	z-index: 10;
	border: thin groove green;
}

.zlayer2 {
	/*display: none;*/
	z-index: -1;
	position: relative;
}
.ddGraphics {
	font-family: "Comic Sans MS";
	font-size: .85em;
	font-weight: bold;
	color: #666666;
	text-decoration: none;
}
.WebMedia {
	font-family: "Comic Sans MS";
	font-size: .85em;
	font-weight: bold;
	color: #990000;
	text-decoration: none;
}

/* @end Site Wide Classes */