@charset "utf-8";
/* 	Strathaven Ales
	A Red Chili design
	For a free quote telephone: 07932 800 112
*/



/* 	General setup for the page
	will include body, headings and paragraph settings
	linking features and image setups
*/
body
{
	margin: 		0;
	padding: 		0;
	background:		#12131E url(../images/bg.gif) repeat-x;
	font-family:	"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:		13px;
	color:			#666666;
}


h1
{
	margin:			0;
	font-weight:	normal;
	font-size:		197%;
	color:			#666666;
}

h2
{
	margin:			0;
	font-weight:	normal;
	font-size:		167%;
	color:			#85C329;
}

h3
{
	margin:			0;
	font-weight:	bold;
	font-size:		100%;
	color:			#85C329;
}

p
{
	line-height:	172%;
}

.ContactText
{
	margin-top:		3px;
	line-height:	120%;
}

strong
{
	font-weight:	bolder;
	color:			#333333;
}

a:link
{
	text-decoration: none;
	font-weight:	bold;
	color:			#85C329;
}

a:hover
{
	text-decoration: none;
	color:			#750000;
}

a:visited
{
	text-decoration: none;
	font-weight:	bold;
	color:			#85C329;
}

img
{
	border:			none;
}

img.left
{
	float:			left;
	margin:			0 15px 0 0;
}

img.right
{
	float:			right;
	margin:			0 0 0 15px;
}

blockquote
{
	margin:			0;
	padding-left:	20px;
	border-left:	15px solid #85C329;
	font-style:		italic;
	color:			#7F7F7F;
	line-height:	125%;
}

hr 
{
	display: none;
}

br
{
	line-height:	5px;
}


/*	Page Setup */

/*	Header Logo and Navbar Section */
#Header
{
	width:			760px;
	height:			85px;
	margin:			0 auto;
	background-color:#FFFFFF;
}

#HeaderLogo
{
	float:			left;
	width:			215px;
	height:			95px;
	background: url(../images/logo.gif) no-repeat right center;
}

#HeaderNav
{
	float:			right;
}

#HeaderNav ul
{
	margin:			0;
	padding:		32px 0 0 0;
	list-style:		none;
	line-height:	normal;
}

#HeaderNav li
{
	display:		inline;
}

#HeaderNav a
{
	padding:		0 20px;
	border-left:	1px solid #85C329;
	text-decoration: none;
	font-size:		95%;
}

#HeaderNav a:hover
{
	color:			#FF9900;
	font-weight:	normal;
	text-decoration: none;
}

#HeaderNav a:link
{
	color:			#85C329;
	font-weight:	normal;
}

#HeaderNav .firstLink a
{
	color:			#85C329;
	font-weight:	normal;
	border:			none;
}



/*	Image and Main Navbar Area */
#LowerHeader
{

	width:			760px;
	height:			200px;
	margin:			10px auto;
}

#NavBar
{
	float:			left;
	width:			220px;
	height:			200px;
	background:		url(../images/navbg.gif);
	font:			Calibri, Arial;
}

#NavBar ul
{
	margin:			0;
	padding:		4px 20px 0 20px;
	list-style:		none;
	line-height:	normal;
}

#NavBar li
{
	display:		inline;
}

#NavBar a, #NavBar a.Active
{
	display:		block;
	padding:		7px 10px;
	border-top:		1px dotted #999999;
	text-decoration: none;
	font-size:		100%;
}

#NavBar a:link
{
	font-weight:	normal;
	color:			#FFFFFF;
	font-size:		19px;
	font:			Calibri, Arial;
}

#NavBar a.Active:link
{
	font-weight:	normal;
	color:			#85C329;
	font-size:		19px;
	font:			Calibri, Arial;
}

#NavBar a:visited
{
	font-weight:	normal;
	color:			#FFFFFF;
	font-size:		19px;
	font:			Calibri, Arial;
	text-decoration: none;
}

#NavBar a.Active:visited
{
	font-weight:	normal;
	color:			#85C329;
	font-size:		19px;
	font:			Calibri, Arial;
	text-decoration: none;
}

#NavBar a:hover, #NavBar a:visited:hover
{
	font-weight:	normal;
	color:			#85C329;
	font-size:		19px;
	font:			Calibri, Arial;
	text-decoration: none;
}

#NavBar a.Active:hover, #NavBar a.Active:visited:hover
{
	font-weight:	normal;
	color:			#FFFFFF;
	font-size:		19px;
	font:			Calibri, Arial;
	text-decoration: none;
}


#NavBar .firstLink a
{
	border:			none;
}

#NavBar .firstLinkActive a
{
	border:			none;
	color:			#85C329;
}

#Image
{
	float:			right;
	width:			540px;
	height:			200px;
	background: url(../images/castle.jpg) no-repeat;
}


/* The page section */
#Page
{
	width:			760px;
	height:			auto;
	background:		#FFFFFF;
	margin:			0 auto;
	padding:		30px 0;
}

/* The content section */
#PhotoAlbumTitle
{
	width:			740px;
	padding-left:	20px;
}

#PhotoAlbumBackBut
{
	float:			left;
	width:			80px;
	height:			228px;
	padding-top:	150px;
	padding-left:	20px;
	padding-right:	20px;
	text-align:		center;
}

#PhotoAlbumForwardBut
{
	float:			right;
	width:			80px;
	height:			228px;
	padding-top:	150px;
	padding-left:	20px;
	padding-right:	20px;
	text-align:		center;
}

#ThePhotoSection
{
	float:			left;
	width:			517px;
	height:			378px;
	text-align:		center;
	background-color:#E1E1E1;
	border:			solid 1px #666666;
}

#PhotoName
{
	width:			760px;
	text-align:		center;
}



#Content
{
	float:			left;
	width:			490px;
	padding-left:	20px;
}

#Content ul
{
	list-style-type:square;
	color:			#999999;
}

#Content li
{
	text-align:		left;
}

#Content li a:link, #Content li a:vistied
{
	color:			#85C329;
}

#Content li a:hover, #Content li a:visited:hover
{
	color:			#666666;
}

.title
{
	padding-top:	3px;
}

.content
{
	padding:		15px;
	background:		url(../images/contentbg.gif) no-repeat;
}


/* The news section */
#News
{
	float:			right;
	width:			220px;
}

#News ul
{
	margin:			0;
	padding:		0;
	list-style:		none;
}

#News li
{
	margin-bottom:	20px;
	background: #E6E6E6 url(../images/articlebg.gif) no-repeat right bottom;
}

#News li ul
{
	padding:		10px 20px;
	font-size:		90%;
}

#News li li
{
	margin:			0;
	padding:		5px 0;
	background:		none;
	border-top:		1px dashed #CCCCCC;
}

#News h2 
{
	height:			30px;
	margin:			0;
	padding:		8px 0px 0px 19px;
	background:		url(../images/newsbg.gif) no-repeat;
	font-size:		122%;
	font-weight:	bold;
	color:			#145997;
}

#News h3
{
	margin:			0;
	font-size:		112%;
}

#News p
{
	margin:			0;
	line-height:	normal;
}

#News p a, #News p a:visited
{
	font-size:		90%;
	color:			#666666;
	margin:			0;
	line-height:	normal;
	text-decoration:none;
}

#News p a:hover, #News p a:visited:hover
{
	font-size:		90%;
	color:			#666666;
	margin:			0;
	line-height:	normal;
	text-decoration:underline;
}

#News h2 a, #News h2 a:visited
{
	height:			30px;
	margin:			0;
	padding:		8px 0px 0px 19px;
	background:		url(../images/newsbg.gif) no-repeat;
	font-size:		122%;
	font-weight:	bold;
	color:			#145997;
	text-decoration:none;
}
#News h2 a:hover, #News h2 a:visited:hover
{
	height:			30px;
	margin:			0;
	padding:		8px 0px 0px 19px;
	background:		url(../images/newsbg.gif) no-repeat;
	font-size:		122%;
	font-weight:	bold;
	color:			#145997;
	text-decoration:underline;
}

#News a:visited
{
	text-decoration:none;
}

#News .firstLink
{
	border:			none;
}


/* The footer section */
#Footer-Wrapper
{
	height:			100px;
	padding:		15px 0;
	background:		#E6E6E6;
	border-top:		10px solid #CDCDCD;
}

#Footer
{
	width:			760px;
	margin:			0 auto;
}

#Footer p
{
	margin:			0;
	line-height:	normal;
}

#Footer a
{
	color:			#666666;
}

#FooterLogo
{
	float:			left;
	padding:		40px 0 10px 60px;
	background:		url(../images/bottomlogo.gif) no-repeat right center;
	height:			30px;
	width:			190px;
}

#FooterText
{
	float:			right;
	padding:		25px 0 0 0;
	width:			500px;
}

.RedChiliRedText
{
	color: 			#750000;
}


/*	Below will go the code for the
	product grid used to display the
	beers on offer.
	
	Each "cell" will be a clickable link
	that shall open up a 'pop-thru' page
	giving more info about the product
*/

#ProductGrid
{
	list-style-type: none;
	width: 			490px;
	padding-left:	0px;
}

#ProductGrid ul
{
	margin:			0;
	list-style:		none;
	padding-left: 	8px;
}

#ProductGrid li 
{
	display: 		block;
	float: 			left;
	margin: 		0 11px 11px 0;
	width: 			135px;
	border: 		1px dotted #999999;
	padding: 		4px;
	height:			auto;
}

#ProductGrid p
{
	margin:			-6px;
	padding:		0px;
	line-height:	100%;
}

#ProductGrid .images
{
	margin-top:		6px;
	text-align:		center;
}

#ProductGrid .BeerTitle
{
	font: 			Calibri, Arial;
	font-size: 		18px;
	font-style: 	italic;
	text-transform: uppercase;
	color: 			#85C325;
	text-align: 	center;
	margin-top:		10px
}

#ProductGrid .BeerAvail
{
	font: 			Calibri, Arial;
	font-size: 		14px;
	font-style: 	italic;
	text-transform: uppercase;
	color: 			#990000;
	text-align: 	center;
	margin-top:		5px;
}

#ProductGrid .Percentage
{
	font: 			Calibri, Arial;
	font-size: 		18px;
	font-style: 	italic;
	color: 			#333333;
	text-align: 	center;
	margin-top:		7px;
}

#ProductGrid .ABV
{
	font: 			Calibri, Arial;
	font-size: 		12px;
	text-transform:	lowercase;
	font-style: 	italic;
	color: 			#333333;
	text-align: 	center;
}

#ProductGrid .Text
{
	font: 			Calibri, Arial;
	font-size: 		12.5px;
	font-style: 	italic;
	text-align:		center;
	color: 			#666666;
	padding-left:	5px;
	padding-right:	5px;
	margin-top:		10px;
	margin-bottom:	6px;
}


/*	Below will go the code for the
	product grid 'pop-thru' pages.
	
	The Oversheet will start in the
	top left hand corner and spread
	through-out the entire width of
	the page. It will be an alpha layer
*/

#PopupOversheet
{
	background-color:#12131E;
	opacity:		0.65;
	-ms-filter: 	"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
	filter:			progid:DXImageTransform.Microsoft.Alpha(opacity=65);
	filter:			alpha(opacity=65);
	position:		absolute;
	z-index:		1000001;
	top:			0px;
	left:			0px;
	width:			100%;
	display:		none;
}

#PopupItem
{
	position:		absolute;
	background-color:#E7E7E7;
	border:			7px solid #333333;
	width:			500px;
	height:			auto;
	z-index:		1000002;
	display:		none;
	padding:		5px 5px 5px 5px;
	text-align:		right;
}

#TapImage
{
	float:			left;
	width:			152px;
	height:			auto;
}

#TapImage .images
{
	background-position: center;
	text-align: 	center;
	vertical-align: middle;	
}

#FullText
{
	float:			right;
	width:			340px;
	padding-left:	5px;
	vertical-align: top;
}

#FullText .BeerTitle
{
	font: 			Calibri, Arial;
	font-size: 		26px;
	text-transform: uppercase;
	color: 			#85C325;
	text-align: 	left;
	margin-bottom:	-15px;
}

#FullText .pclass
{
	font:			Calibri, Arial;
	size:			12px;
	color:			#666666;
	text-align:		left;
}

#FullText .BeerAvail
{
	font: 			Calibri, Arial;
	font-size: 		26px;
	font-style: 	italic;
	text-transform: uppercase;
	color: 			#990000;
	text-align: 	left;
}