/*---------------------------------------------------------------------------------------------
Title: Reset CSS for all media types
Project: Shapeshift HTML Project Template
Author: S.A Tarr
Description: Resets all basic tags as based on original version by Eric Meyer (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
Created: 28.10.2008
Revision History:
12.05.2009 : S.A Tarr ? Changed the Page Comment structure + added img tag reset
---------------------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

body {
	line-height: 1;
	color: #000;
	background: white;
}

img {
	display: block;
	border: 0;
}

ol, ul {
	list-style: none;
}

ul ul,
ul ol,
ol ol,
ol ul,
ul p,
ol p {
	font-size:1em;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

form {
	display: inline;
}
/*---------------------------------------------------------------------------------------------
Title: Debug CSS for all media types
Project: Shapeshift HTML Project Template
Author: S.A Tarr
Description: Contains classes for debuging. Adapted from http://www.crucialwebhost.com/blog/master-stylesheet-the-most-useful-css-technique/
Created: 28.10.2008
Revision History:
12.05.2009 : S.A Tarr ? Changed the Page Comment structure
---------------------------------------------------------------------------------------------*/

.d_outlineb {
	outline: 1px solid #000;
}

.d_outlinew {
	outline: 1px solid #fff;
}

.d_borderb {
	border: 1px solid #000;
}

.d_borderw {
	border: 1px solid #fff;
}

.d_underline {
	border-bottom: 1px solid;
}
 
.d_highlight {
	background: #ffc;
}
 
.d_img-left {
	float: left;
	margin: 4px 10px 4px 0;
}
 
.d_img-right {
	float: right;
	margin: 4px 0 4px 10px;
}
 
.d_nopadding {
	padding: 0;
}
 
.d_noindent {
	margin-left: 0; 
	padding-left: 0;
}
 
.d_nobullet {
	list-style: none;
	list-style-image: none;
}

.d_inline {
	display: inline;
}

.d_block {
	display: block;
}

.d_relative {
	position: relative;
}

.d_absolute {
	position: absolute;
}

.d_fixed {
	position: fixed;
}

.d_static {
	position: static;
}
/*---------------------------------------------------------------------------------------------
Title: Global CSS for all media types
Project: Shapeshift HTML Project Template
Author: S.A Tarr
Description: Contains the default website styles for all media types
Created: 28.10.2008
Revision History:
23.02.2009 : S.A Tarr ? Changed the Page Comment structure
---------------------------------------------------------------------------------------------*/

body {
	font: 100%/1.15 Georgia, "Times New Roman", Times,serif;
}

h1 {
	margin: 0 0 23px;
	padding: 20px 0;
	font-size: 1.25em;
	color: #fff;
	font-weight: bold;
	background: #660000;
	text-align: center;
}

h2.vintage {
	margin: 0 0 10px 0;
	padding: 8px 0 8px 8px;
	background: #660000;
	text-align: left;
}

h2 {
	margin: 23px 0 15px 0;
	padding: 0;
	text-align: center;
	font-size: 1em;
	color: #fff;
	font-weight: bold;
	clear: both;
}

h2.wineName {
	width: 70%;
}

h3 {
	position: relative;
	margin: 0px;
	padding: 0px;
	padding-bottom: 12px;
	font-size: 0.875em;
	color: #ffffff;
	font-weight: bold;
}

h4 {
	position: relative;
	margin: 0px;
	padding: 0px;
	padding-bottom: 12px;
	font-size: 0.9em;
	color: #ffffff;
	font-weight: bold;
}

h5 {
	position: relative;
	margin: 0px;
	padding: 0px;
	padding-bottom: 12px;
	font-size: 0.85em;
	color: #ffffff;
	font-weight: bold;
}

h6 {
	position: relative;
	margin: 0px;
	padding: 0px;
	padding-bottom: 12px;
	font-size: 0.8em;
	color: #ffffff;
	font-weight: bold;
}

p {
	margin: 0px;
	padding: 0 0 16px;
	color: #fff;
	font-size: 0.8em;
	text-align: justify;
}

table {
	clear: both;
	margin: 8px 0;
	border: 1px solid #660000;
	border-collapse: collapse;
	color: #fff;
	width: 100%;
	float: left;
}

table.vpi {
	border-collapse: separate;
	width: auto;
	float: none;
}

th {
	border: 1px solid #660000;
	padding: 8px 0 3px 6px;
	font-size: 0.8em;
	font-weight: bold;
	background: #660000;
}

td {
	border-top: 1px solid #660000;
	border-right: 1px solid #660000;
	padding: 5px;
	font-size: 0.8em;
	text-align: center;
}

td a,td a:visited{
	font-size: 0.9em;
}

td.district {
	font-weight: 700;
	padding: 22px 5px 5px 5px;
}

th.address, td.address {
	width: 250px;
	border: none;
	border-top: 1px solid #660000;
}

table.vpi td {
	text-align: left;
}

table.vpi td.noBorder {
	border: none;
}

hr {
	height: 1px;
	color: #000000;
}

ul {
	position: relative;
	margin: 0px;
	padding: 0px;
	list-style: none;
}

ol {
	position: relative;
	margin: 0px;
	padding: 0px;
	margin-left: 22px;
	list-style: decimal;
}

ul li {
	margin: 0px;
	padding: 0px;
	color: #313131;
	line-height: 20px;
}

ol li {
	margin: 0px;
	padding: 0px;
	font-size: .7em;
	color: #313131;
	line-height: 20px;
}

ul li ul {
	margin-bottom: 0px;
	font-size: 1.3em;
	list-style: none;
	list-style-image: url("../images/interface/");
}

ul li ul li ul li {
	margin-bottom: 0px;
	font-size: .7em;
	list-style: none;
}

ul > ul {
	margin-bottom: 0px;
	list-style: none;
	list-style-image: url("../images/interface/");
}

ol li ol {
	margin-bottom: 0px;	
	font-size: 1.35em;
	list-style: lower-roman;
}

ol li ol li ol li {
	margin-bottom: 0px;	
	font-size: .75em;
	list-style: decimal;
}

a, a:visited {
	color: #fff;
	text-decoration: underline;
	font-size: 0.8em;
}

a:hover, a:active {
	color: #ff0000;
	text-decoration: none;
}

img {
	border: 4px solid #660000;
	display: inline-block;
}

/*---------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------
Title: Resets the default CSS for media type aural
Project: Shapeshift HTML Project Template
Author: S.A Tarr
Description: Replaces default tag style for screen readers. Sourced from W3C - http://perishablepress.com/press/2009/03/22/the-voice-of-the-world-wide-web-consortium/
Created: 28.10.2008
Revision History:
12.05.2009 : S.A Tarr ? Changed the Page Comment structure
---------------------------------------------------------------------------------------------*/

@media aural {

   h1, h2, h3,
   h4, h5, h6    { voice-family: paul, male; stress: 20; richness: 90 }
   h1            { pitch: x-low; pitch-range: 90 }
   h2            { pitch: x-low; pitch-range: 80 }
   h3            { pitch: low; pitch-range: 70 }
   h4            { pitch: medium; pitch-range: 60 }
   h5            { pitch: medium; pitch-range: 50 }
   h6            { pitch: medium; pitch-range: 40 }
   li, dt, dd    { pitch: medium; richness: 60 }
   dt            { stress: 80 }
   pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
   em            { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
   strong        { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
   dfn           { pitch: high; pitch-range: 60; stress: 60 }
   s, strike     { richness: 0 }
   i             { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
   b             { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
   u             { richness: 0 }
   a:link        { voice-family: male; }
   a:visited     { voice-family: female }
   a:active      { voice-family: female; pitch-range: 80; pitch: x-high }

}

/*---------------------------------------------------------------------------------------------*/
	/*---------------------------------------------------------------------------------------------
Title: Layout and presentation CSS for media type screen
Project: Shapeshift HTML Project Template
Author: S.A Tarr
Description: Contains all the project specific layout and presentation CSS for the media type screen
Created: 28.10.2008
Revision History:
23.02.2009 : S.A Tarr ? Changed the Page Comment structure + added new Firefox overflow selector
---------------------------------------------------------------------------------------------*/

@media screen {

/*---------------------------------------------------------------------------------------------
MAIN SITE LAYOUT
---------------------------------------------------------------------------------------------*/
	
	html {
		overflow:-moz-scrollbars-vertical;
		background: #000;
	}

	body {
		background: #000;
		
	}
	
	#mainContainer {
		background: url("../images/interface/bg-body.gif") center 0 repeat-y;
		position: relative;
		margin: 0 auto;
		width: 760px;
		height: auto;
		display: block;
	}

	#mainContainer.all {
		/*background: #253;*/
		width: 640px;
		height: auto;
		padding-left: 120px;
	}	
	
	#mainContainer.all.noBG {
		background: none;
	}		
	
	#header {
		position: relative;
		z-index: 1;
		float: left;
	}
	
	#header img.logo {
		display: block;
	}

	#footer	{
		background: #000 url("../images/interface/bg-footer-tile.gif") 0 100% repeat-x;
		height: 32px;
		clear: both;
		margin: 0 0 0 -120px;
		position: relative;
		width: 742px;
	}
	
	body#home #footer {
		display: none;
		position: absolute; 
		left:-9999px;
		visibility: hidden;
	}	
	
	#footer a, #footer a:visited {
		margin: 0 0 0 12px;
		padding: 0 0 0 12px;
		float: left;
		color: #cc9933;
		font: 0.7em/1 Verdana, "Arial", Helvetica, sans-serif;
		letter-spacing: 1.3px;
		text-decoration: none;
		display: inline-block;
		background: #000 url("../images/interface/bg-link-top.gif") 0 2px no-repeat;
		height: 15px;
	}

	#footer img {
		display: block;		
	}
	
	.footerImage {
		display: inline-block;
		position: absolute;
		right: 0;
		bottom: 13px;
		width: 25px;
		height: 333px;
	}
	
	#footer.ourWines .footerImage {
		background: #000 url("../images/interface/bg-footer-ourWines.gif") 0 0 no-repeat;	
	}
	
	#footer.ourHistory .footerImage {
		background: #000 url("../images/interface/bg-footer-ourHistory.gif") 0 0 no-repeat;	
	}

	#footer.contactUs .footerImage  {
		background: #000 url("../images/interface/bg-footer-contactUs.gif") 0 0 no-repeat;	
	}

	#footer.direction .footerImage  {
		background: #000 url("../images/interface/bg-footer-directions.gif") 0 0 no-repeat;	
	}

	#footer.theGallery .footerImage  {
		background: #000 url("../images/interface/bg-footer-theGallery.gif") 0 0 no-repeat;	
	}

	#footer.socialMedia .footerImage  {
		background: #000 url("../images/interface/bg-footer-whatsHappening.gif") 0 0 no-repeat;	
		height: 370px;
	}	

/*---------------------------------------------------------------------------------------------
NAVIGATION
---------------------------------------------------------------------------------------------*/
	#mainNavigation {
		margin: 0;
		padding: 200px 0 0 0;
		width: 160px;
		color: #fff;
		font: 0.7em/1 Verdana, "Arial", Helvetica, sans-serif;
		letter-spacing: 1.5px;
		margin: 0 0 0 -120px;
		position: relative;
		z-index: 2;
		background: none;
	}	
	
	#homeNav {
		padding: 0;
		width: 560px;
		height: 500px;
		margin: 50px auto;
		position: relative;
		z-index: 2;
		background: url("../images/interface/bg-body.gif") 0 0 no-repeat;
		display: block;
	}	
	
	/*#mainNavigation.homeLogo{
		width: 146px;
		margin: 0 0 0 104px;
		padding: 130px 0 0 0;
	}*/
	
	#mainNavigation.homeLogo{
		width: 146px;
		margin: 0 0 0 104px;
		padding: 110px 0 0 0;
	}	

	#mainNavigation.homeLogo {
		background: url("../images/interface/logo-big.gif") 0 0 no-repeat;	
	}
	
	.wines {
		background: url("../images/interface/bg-nav-our-wine.jpg") 50% 0 no-repeat !important;
	}
	
	.history {
		background: url("../images/interface/bg-nav-our-history.jpg") 50% 0 no-repeat !important;
	}
	
	.contact, .directions {
		background: url("../images/interface/bg-nav-contact-us.jpg") 50% 0 no-repeat !important;
	}
	
	.gallery {
		background: url("../images/interface/bg-nav-gallery.jpg") 50% 0 no-repeat !important;
	}
	
	.media {
		background: url("../images/interface/bg-nav-social-media.jpg") 50% 0 no-repeat !important;
	}
	
	#mainNavigation ul {
		margin: 0;
		list-style: none;
		width: 150px;
		display: block;
		text-align: center;
		margin: 0 auto;
	}
	
	#homeNav #mainNavigation.homeLogo ul li.first {
		/*background: url("../images/interface/wines2.gif") 165px 3px no-repeat;*/	
	}	
	
	#homeNav #mainNavigation.homeLogo ul li.second {
		/*background: url("../images/interface/estate2.gif") 165px 3px no-repeat;*/	

	}		

	#homeNav #mainNavigation.homeLogo ul li.third {
		/*background: url("../images/interface/history2.gif") 165px 3px no-repeat;*/	

	}	

	#homeNav #mainNavigation.homeLogo ul li.fourth {
		/*background: url("../images/interface/contact2.gif") 165px 3px no-repeat;*/	

	}	
	
	#homeNav #mainNavigation.homeLogo ul li.fifth {
		/*background: url("../images/interface/map2.gif") 165px 3px no-repeat;*/	
	}	
	
	#homeNav #mainNavigation.homeLogo ul li.sixth {
		/*background: url("../images/interface/wines2.gif") 165px 3px no-repeat;	
		/*padding-right: 290px;*/
	}	
	
	#mainNavigation ul li {
		margin: 0;
		display: inline-block;
		width: 100%;
	}
	
	#mainNavigation ul li a, #mainNavigation ul li a:visited {
		text-decoration: none;
		display: block;
		margin-bottom: 10px;
		text-align: center;
		width: 100%;
		font-size: 1em;
		clear: both;
		position: relative;
	}
	
	#mainNavigation ul li a:hover, #mainNavigation ul li a:active {
		color: #cc9933;
	}	
	
	#mainNavigation p {
		border-top: 1px solid #cc9933;
		color: #cc9933;
		text-align: center;
		padding: 2px 0 35px 0;
		font-size: 1em;
		width: 100px;
		margin: 0 auto;
	}

	#mainNavigation span.upper {
		text-transform: uppercase;
	}	
	
	#mainNavigation span.writeup {
		text-transform: none;
		color: #999;
		float: right;
		display: inline;
		margin: 0 -300px 0 0;
		position: absolute;
		clear: none;
		width: 300px;
		text-align: right;
		right: 0;
	}
	
	#mainContainer.all #mainNavigation.wines span.writeup,
	#mainContainer.all #mainNavigation.history span.writeup,
	#mainContainer.all #mainNavigation.contact span.writeup,
	#mainContainer.all #mainNavigation.directions span.writeup,
	#mainContainer.all #mainNavigation.gallery span.writeup,
	#mainContainer.all #mainNavigation.media span.writeup {
		display: none;
		text-indent: -9999px;
	}
	
	#mainNavigation p.homeTitle {
		/*background: #000 url("../images/interface/mainmenu.gif") 0 0 no-repeat;*/
		color: #cc0000; 
		border-top: 0;
		border-bottom: 1px solid #666;
		font-size: 1.3em;
		letter-spacing: 4px;
		padding: 18px 0;
		margin-bottom: 18px;
		width: 100%;
		font-family:  Verdana, "Arial", Helvetica, sans-serif;
		font-style: normal;
		text-transform: none;
		line-height: 1.4em;
		font-weight: 700;
	}
	
	#mainNavigation p.homeTitle span{
		display: block;
		/*background: #88d;*/
	}
	#mainNavigation p.homeTitle span.menu{
		letter-spacing: 4px;

	}	
	
	#homeNav #mainNavigation a.logo {
		display: none;
		text-indent: -99999px;
	}	
	
	#mainNavigation a.logo, #mainNavigation a:visited.logo {
		background: #000 url("../images/interface/logo-small.gif") 0 0 no-repeat;
		width: 91px;
		height: 70px;
		margin: 60px auto 20px auto;
		clear: both;
		position: relative;
		display: block;
	}
	
/*---------------------------------------------------------------------------------------------
CONTENT
---------------------------------------------------------------------------------------------*/
	#content {
		display: inline-block;
		float: left;
		position: relative;
		width: 555px;
	}

	/*#content.eventide-cabsauv {
		background: url("../images/interface/wine-eventide-cabsauv.jpg") 458px 80px no-repeat;
	}

	#content.eventide-classic {
		background: url("../images/interface/wine-eventide-classic.jpg") 458px 80px no-repeat;
	}	
	
	#content.eventide-sauvblanc {
		background: url("../images/interface/wine-eventide-sauvblanc.jpg") 458px 80px no-repeat;
	}	
	
	#content.eventide-shiraz {
		background: url("../images/interface/wine-eventide-shiraz.jpg") 458px 80px no-repeat;
	}
	
	#content.eventide-viogner {
		background: url("../images/interface/wine-eventide-viogner.jpg") 458px 80px no-repeat;
	}	
	
	#content.eventide-vns {
		background: url("../images/interface/wine-eventide-vns.jpg") 458px 80px no-repeat;
	}

	#content.estate-cabsauv {
		background: url("../images/interface/wine-estate-cabsauv.jpg") 458px 80px no-repeat;
	}	
		
	#content.estate-cerno {
		background: url("../images/interface/wine-estate-cerno.jpg") 458px 80px no-repeat;
	}	
	
	#content.estate-merlot {
		background: url("../images/interface/wine-estate-merlot.jpg") 458px 80px no-repeat;
	}	

	#content.estate-shiraz {
		background: url("../images/interface/wine-estate-shiraz.jpg") 458px 80px no-repeat;
	}*/
	
	img#wineBottle {
		position: absolute;
		border: 0;
		left: 458px;
		top: 80px;
	}

	ul.columns, ul.columns.contactLayout  {
		float: left;
		position: relative;
		font-size: 0.8em;
		clear: both;
		margin-bottom: 10px;
	}	
	
	ul.columns.contactLayout  {
		clear: none;
		width: 180px;
	}

	ul.columns li, ul.columns.contactLayout li  {
		clear: both;
		float: left;
		position: relative;
		width: 255px;
		padding-left: 300px;
		margin-bottom: 5px;
		color: #fff;
	}

	ul.columns.contactLayout li {
		padding: 0 !important;
		width: 180px;
	}	
	
	ul.columns.contactLayout li.mailFooter {
		margin-bottom: 20px;
	}

	ul.columns li a, ul.columns li a:visited,
	ul.columns.contactLayout li a, ul.columns.contactLayout li a:visited  {
		background: url("../images/interface/mischa_bullet.gif") 0 3px no-repeat;
		bottom: 0;
		clear: both;
		height: 100%;
		margin-left: -300px;
		padding: 0 0 0 20px;
		float: left;
		top: 0;
		width: 100%;	
		font-size: 1em;
		display: inline;
		text-indent: 0;
	}
	
	ul.columns li.twitter a, ul.columns li.twitter a:visited,
	ul.columns.contactLayout li.twitter a, ul.columns.contactLayout li.twitter a:visited  {
		background: url("../images/interface/twitter_16.jpg") 0 3px no-repeat;
		bottom: 0;
		clear: both;
		height: 100%;
		margin-left: -300px;
		padding: 0 0 0 20px;
		float: left;
		top: 0;
		width: 100%;	
		font-size: 1em;
		display: inline;
		text-indent: 0;
	}
	
	ul.columns li.blogger a, ul.columns li.blogger a:visited,
	ul.columns.contactLayout li.blogger a, ul.columns.contactLayout li.blogger a:visited  {
		background: url("../images/interface/blogger_16.jpg") 0 3px no-repeat;
		bottom: 0;
		clear: both;
		height: 100%;
		margin-left: -300px;
		padding: 0 0 0 20px;
		float: left;
		top: 0;
		width: 100%;	
		font-size: 1em;
		display: inline;
		text-indent: 0;
	}
	
	ul.columns li.fbook a, ul.columns li.fbook a:visited,
	ul.columns.contactLayout li.fbook a, ul.columns.contactLayout li.fbook a:visited  {
		background: url("../images/interface/facebook_16.jpg") 0 3px no-repeat;
		bottom: 0;
		clear: both;
		height: 100%;
		margin-left: -300px;
		padding: 0 0 0 20px;
		float: left;
		top: 0;
		width: 100%;	
		font-size: 1em;
		display: inline;
		text-indent: 0;
	}

	ul.columns.contactLayout li a, ul.columns.contactLayout li a:visited {
		margin-left: 0;
	}
	
	/*ul.columns li span a, ul.columns li span a:visited {
		background: none;
		padding: 0;
		margin-left: 0;
	}

	ul.columns li span {
		color: #fff;
		bottom: 0;
		float: left;
		width: 100%;	
	}*/
	
	.winemakersComments, .awards  {
		display: inline-block;
		border: 1px solid #660000;
		width: 433px;
		clear: both;
		margin-bottom: 9px;
	}	
	
	.awards  {
		width: 553px;
	}
	
	.awards ul  {
		padding: 6px;
	}	
	
	.awards ul  li {
		color:#fff;
		font-size:0.8em;
		margin:0;
	}
	
	 h3 {
		background: #660000;
		padding: 8px 0 3px 6px;
	}
	
	.winemakersComments p {
		display: inline-block;
		padding: 6px 4px 14px 4px;
	}
	
	.pCaption {
		float: right;
		
	}
	
	.galleryListing {
		float: left;
		display: inline-block;
		width: 468px;
		margin: 0 0 27px 20px;
		padding: 0 0 0 20px;
	}

	.galleryListing h3 {
		display: inline-block;
		font-weight: 700;
		background: none;
		padding: 0;
		margin-bottom: 15px;
		position: relative;
		margin-left: -40px;
	}
	
	.galleryListing h3 a, .galleryListing h3 a:visited{
		background: url("../images/interface/mischa_bullet.gif") 0 3px no-repeat;
		margin: 0 3px 0 0;
		padding: 0 0 0 20px;
		font-size: 1em;
	}		
	
	.galleryListing ul {
		position: relative;
		margin-left: -20px;
	}			
	
	.galleryListing ul li {

		display: inline;
	}		
	
	.galleryListing ul li a, .galleryListing ul li a:visited {
		margin: 0;
		padding: 0;
	}	
	
	.galleryListing ul li a img, .galleryListing ul li a:visited im {
		border: 0;
	}
	
	#galleryView  span {
		background: #660000;
		width: 125px;
		font-weight: 700;
		display: inline-block;
	}	
	
	#galleryView  li {
		color: #fff;
		font-size: 0.8em;
		padding-bottom: 5px;
	}

	#galleryView  li a {
		font-size: 1em;
	}
	
	.photoContainer {
		margin: 25px auto auto;
		display: inline-block;
	}	
	
	.photoContainer img{
		border: 3px solid #333;
		margin: 0 auto;
		display: block;
	}

	.photoContainer h4{
		text-align: center;
		padding: 0;
	}
	
	#galleryNav {
		width: 90px;
		margin: 0 auto auto;
		display: block;
		background: #4522aa;
	}

	#galleryNav li {
		float: left;
		display: inline;
		color: #fff;
		text-align: center;
	}	
	
	#galleryNav li a {
		width: 45px;
	}
	
	#galleryLinks {
		width: 542px;
		margin: 20px auto auto;
		display: inline-block;
	}	

	#galleryLinks li{
		float: left;
		padding-right: 3px;
	}

	dl {
		float: right;
		margin: 0 0 5px 10px;
		text-align:center;
		width: 258px;
	}
	
	dl.left {
		float: left;
		margin: 0 10px 5px 0;
	}

	dt,dd {
		float: left;
		display: inline-block;
		width: 100%;
		margin: 0;
	}

	dt {
		height: auto;

	}/* vertical space between the images */

	dd {
		background: #660000;
		font: 0.7em/1 Verdana, "Arial", Helvetica, sans-serif;
		padding: 8px 0;
		color: #fff;
		margin-top: -3px;
	}
	
/*---------------------------------------------------------------------------------------------
GENERAL
---------------------------------------------------------------------------------------------*/

	.button {
		float: left;
		margin-top: 10px;
		border: 1px solid #cfcfcf;
		background: #f2f2f2;
		padding: 5px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: .65em;
		font-weight: bold;
		cursor: pointer;
	}

	.button:hover {
		color: #eb1922;
	}
	
	
/*---------------------------------------------------------------------------------------------
POPUPS
---------------------------------------------------------------------------------------------*/

	.popupDiv {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1000;
	}

	.popupDiv .bgDiv {
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		filter: alpha(opacity=75);
		opacity: 0.75;
		width: 100%;
		height: 100%;
	}

	.popupDiv .loadingBG {
		position: fixed;
		top: 0;
		left: 0;
		filter: alpha(opacity=100);
		opacity: 1;
		width: 100%;
		height: 100%;
		cursor: wait;
		visibility: hidden;
	}

	.popupDiv .contentContainer {
		position: relative;
		margin: 0 auto;
		background: #fff url("../images/interface/bg-pop-up-request.gif") repeat-x 0 0;
		width: 348px;
		padding: 20px 16px;
	}
	
	.popupDiv .contentContainer h1{
		font-size: 0.95em;
		padding: 0 0 38px 0;
	}	
	
	.popupDiv .contentContainer p{
		padding: 0;
	}

	.popupDiv .contentContainer .close {
		position: absolute;
		top: 7px;
		right: 21px;
		background: url("../images/interface/popup-close.jpg") 0 0 no-repeat;
		width: 23px;
		height: 23px;
		text-indent: -999999px;
		cursor: pointer;
		z-index: 9;
	}

	.popupDiv .contentContainer .close a {
		display: block;
		background: url("../images/interface/popup-close.jpg") 0 0 no-repeat;
		width: 100%;
		height: 100%;
	}

	.popupDiv .contentContainer .close a:hover {
		background-position: 0 -23px;
	}
	
/*---------------------------------------------------------------------------------------------
FORMS
---------------------------------------------------------------------------------------------*/

	form {
		display: block;
		top: 0;
		clear: both;
		position: relative;
		margin-top: 30px;
	}

	.hide {
		display: none;
	}

	.rowContainer {
		clear:both;
		display:block;
		float:left;
		position:relative;
		width:100%;
	}

	fieldset {
		padding: 0;
		position: relative;
		margin: 0;
	}

	label {
		display: block;
		color: #4e4e4e;
		float: left;
		width: 65px;
		font-size: 0.75em;
		padding: 0;
		position: relative;
	}

	input.inputBox, input.inputBoxlong, select.selectBox, textarea.textArea {
		background: #fff;
		border: 1px solid #d7dbe3;
		color: #4e4e4e;
		display: inline-block;
		margin: 0 0 10px 0;
		padding: 1px 0 1px 2px;
		position: relative;
		width: 278px;
		height: 17px;
		font-family: Arial ,Helvetica,sans-serif;
		font-size: 0.75em;
		float: right;
		outline: 0;
	}

	select.selectBox {
		width: 227px;
		height: 21px;
	}

	textarea.textArea  {
		padding-top: 20px;
		height: 144px;
	}

	input.checkBox {
		border: 0;
		width: 13px;
		height: 13px;
		padding: 0;
		margin: 0 5px 5px 0;
		vertical-align: bottom;
		position: relative;
		float: left;
	}

	.buttonRight input, .buttonLeft input {
		border: 0;
		background: none;
		color: #fff;
		cursor: pointer;
		display: inline-block;
		overflow: visible;
		padding: 0 0 1px 0;
		position: relative;
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		white-space: nowrap;
		font-size: 0.75em;
		font-family:  "Arial", Helvetica, sans-serif;
		width: 100%;
		height: 27px;
		font-weight: 700;
	}
	
	.buttonRight {
		float: right;
		background: #fff url("../images/interface/bg_download_bttn.gif") repeat-x 0 0;
		width: 75px;
		height: 27px;
	}	


}
/*---------------------------------------------------------------------------------------------
Title: General CSS lauouts for all media types
Project: Shapeshift HTML Project Template
Author: S.A Tarr
Description: Contains a library of general CSS classes for all media types.
Created: 28.10.2008
Revision History:
23.02.2009 : S.A Tarr ? Changed the Page Comment structure + shortend class names for left, right, b, i and u
---------------------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------------------------
COMMON CLASSES
---------------------------------------------------------------------------------------------*/

.left {
	float: left;
	display: inline;
}
 
.right {
	float: right;
	display: inline;
}

.center {
	display: block;
	margin: 0 auto;
}

.textleft {
	text-align: left;
}
 
.textright {
	text-align: right;
}
 
.textcenter {
	text-align: center;
}
 
.textjustify {
	text-align: justify;
}
 
.b {
	font-weight: 700;
}
 
.i {
	font-style: italic;
}

.u {
	border-bottom: 1px solid;
}

.hidden {
	position:absolute; 
	left:-9999px;
	visibility: hidden;
}

.clear {
	clear: both;
}

.clearfix:after {
	content: ".";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}

/*---------------------------------------------------------------------------------------------
CONTENT LAYOUTS
---------------------------------------------------------------------------------------------*/


/*---------------------------------------------------------------------------------------------
Title: Layout and presentation CSS for media type handheld
Project: Shapeshift HTML Project Template
Author: S.A Tarr
Description: Contains all the project specific layout and presentation CSS for the media type screen
Created: 03.08.2009
---------------------------------------------------------------------------------------------*/

@media handheld {

	html, body {
		margin: 0;
		background: #fff;
		padding: 3px;
		color: #000;
		font: 12px/15px sans-serif;
	}

	* {
		float: none;
	}

	h1, h2, h3, h4, h5, h6 {
		font-weight: normal;
	}

	#content img { 
		max-width: 250px;
	}

	a:link, a:visited {
		text-decoration: underline;
		color: #0000CC;
	}

	a:hover, a:active {
		text-decoration: underline;
		color: #660066;
	}

}

/* iPhone-specific styles */
@media only screen and (max-device-width: 480px) { 

	html {
		-webkit-text-size-adjust: none;
	}

}
/*---------------------------------------------------------------------------------------------
Title: Layout and presentation CSS for media type print
Project: Shapeshift HTML Project Template
Author: S.A Tarr
Description: Contains all the project specific layout and presentation CSS for the media type print
Created: 28.10.2008
Revision History:
23.02.2009 : S.A Tarr ? Changed the Page Comment structure
---------------------------------------------------------------------------------------------*/

@media print {

/*---------------------------------------------------------------------------------------------
MAIN SITE LAYOUT
---------------------------------------------------------------------------------------------*/

	body {
		background: #ffffff url("../images/interface/body-bg-tile.jpg") repeat-x;
	}

	#mainContainer {
		position: relative;
		margin: 0 auto;
		background: #ffffff url("../images/interface/") 0 177px repeat-x;
		width: 760px;
		height: auto;
	}
	
	#header {
		position: relative;
		z-index: 1;
	}
	
	#header img {
		display: block;
	}

	#navigation {
		display: none;
	}

	#content {
		clear: both;
		position: relative;
	}
	
	#footer	{
		clear: both;
	}

	#footer img {
		display: block;		
	}

/*---------------------------------------------------------------------------------------------
NAVIGATION
---------------------------------------------------------------------------------------------*/



/*---------------------------------------------------------------------------------------------
CONTENT
---------------------------------------------------------------------------------------------*/



/*---------------------------------------------------------------------------------------------
GENERAL
---------------------------------------------------------------------------------------------*/

	.button {
		display: none;
	}

}