/*----- WHITESPACE RESET & DEFAULT CLASSES -----*/

html, body { margin: 0; padding: 0; }
body { background: #1d1c1c url(/img/body-bg.gif) repeat-x 0 0;  font: 62.5% Verdana, Arial, Helvetica, sans-serif; }

/* Baseline values for browser consistency */
p, div, h1, h2, h3, h4, h5, ul, li, ol, img, fieldset { margin: 0; padding: 0; }
img { border: 0; }
	
/* force scroll bar in FF for centred sites */
html { height: 100%; margin-bottom: 1px; }

/* Element Default Classes */
ul, ol { list-style-position: inside; margin: 0 0 1em; }
ul li, ol li { font-size: 1.2em; margin: 0 0 0.2em; }
hr { background: #000; color: #000; border: 0; height: 1px; margin: 20px 0; }
a:link, a:visited, a:active { color: #c20303; text-decoration: none; outline: 0; }
a:hover { text-decoration: underline; }

/* Global classes */
.clear { clear: both; height: 0px; }
.left { float: left; }
.right { float: right; }


/*----- STRUCTURE -----*/

#container 
{
    color: #fff;
	width:962px;
	background:url(/img/container-bg.gif) no-repeat 0 0;
	margin:0 auto;
	padding:0 0 5px 0;
	position:relative; }

	#navigation {
		width:525px;
		height:124px;
		float:left;
		padding:20px 0 20px 0; }
		
		#navigation a.logo {
			display:block;
			margin:0 0 0 16px; }
			
		#navigation img.right-divider {
			position:absolute;
			top:109px;
			right:0; }
		
	#left-content {
		width:496px;
		padding:0 0 0 25px;
		float:left; }
		
	#full-width-content { 
		width:932px;
		padding:0 0 0 25px;
		float:left; }
		
		#left-content img.on-the-nose {
			margin:5px 0 15px 0; }
		
		#full-width-content h1,
		#left-content h1 {
			font-weight:normal;
			font-size:28px;
			line-height:25px;
			margin:0 0 18px 0;
			font-family:'Myriad Pro', Arial, Helvetica, sans-serif;}
		
		#full-width-content h2,
		#left-content h2 {
			font-weight:normal;
			font-size:25px;
			line-height:25px;
			margin:0 0 18px 0;
			font-family:'Myriad Pro', Arial, Helvetica, sans-serif; }
			
		#full-width-content h3,
		#left-content h3 {
			font-weight:normal;
			font-size:19px;
			line-height:21px;
			margin:0 0 18px 0;
			font-family:'Myriad Pro', Arial, Helvetica, sans-serif; }
			
		#full-width-content h1.maroon,
		#left-content h1.maroon {
			font-weight:normal;
			font-size:23px;
			line-height:25px;
			margin:0 0 10px 104px;
			color:#c20303;
			font-family:'Myriad Pro', Arial, Helvetica, sans-serif; }
			
		#full-width-content h1.grey,
		#left-content h1.grey {
			font-weight:normal;
			font-size:23px;
			line-height:25px;
			margin:0 0 10px 104px;
			color:#727272;
			font-family:'Myriad Pro', Arial, Helvetica, sans-serif; }
		
		#full-width-content p,
		#left-content p {
			margin:0 0 15px 0;
			line-height:20px; }
			
		span.maroon { color:#c20303; }
		sup { font-size:10px; }
		
		img.floating-icon {
			float:left;
			margin:4px 15px 10px 0; }
			
		img.available-icon {
			display:block;
			margin:2px 25px 0 0;
			float:left; }
		
	#right-content {
		width:437px;
		margin:35px 0 0 0;
		float:right; }
		
	#right-content #iphone {
		width:437px;
		height:560px;		
		background:url(/img/iphone-bg.png) no-repeat 0 0; }
		
	#right-content #iphone-plain {
		width:437px;
		height:560px;		
		background:url(/img/iphone-plain-bg.png) no-repeat 0 0; }
		
		#screen {
			width:266px;
			height:399px; }
		
		#buttons {
			width:70px;
			height:32px;
			margin:45px 0 0 80px; }
		
		#screen-slider {
			width:179px;
			height:484px;
			padding:86px 0 0 87px; }
		
		#screen-slider #buttons a.left {
			width:33px;
			height:26px;
			display:block;
			float:left;
			background:url(/img/button-left.png) no-repeat 0 0; }
			
		#screen-slider #buttons a.left:hover {
			background:url(/img/button-left-on.png) no-repeat 0 0; }
			
		#screen-slider #buttons a.right {
			width:33px;
			height:26px;
			display:block;
			float:right;
			background:url(/img/button-right.png) no-repeat 0 0; }
			
		#screen-slider #buttons a.right:hover {
			background:url(/img/button-right-on.png) no-repeat 0 0; }
		
	#right-content #quotes {
		width:278px;
		margin:10px 0 0 62px;
		line-height:19px; }
		
		#right-content #quotes p {
			padding:9px 0 0 0;
			background:url(/img/horizontal-divider.gif) repeat-x 0 0; }
		
		#right-content #quotes span.quote {
			color:#8e8d8d; }
		
/*----- BEGIN ABOUT-SUPPORT-CONTAINER - THIS IS THE DARK GREY CONTENT AREA THAT INCLUDES THE ABOUT AND SUPPORT SECTIONS -----*/		
					
#about-support-container {
	width:100%; 
	background:#1d1c1c url(/img/about-support-bg.gif) repeat-x 0 0;
	margin:0;
	padding:0; }
	
	#about-support-container #content {
		width:962px;
		margin:0 auto;
		background: url(/img/about-support-content-bg.gif) no-repeat 0 0; }
		
		#about-support-container #content .left {
			width:593px;
			padding:0 0 0 25px;
			float:left; }
			
		#about-support-container #content .right {
			width:294px;
			padding:0 25px 0 25px;
			float:right; }
			
			#about-support-container #content .left h2,
			#about-support-container #content .right h2 { 
				color:#8f8f8f;
				font-size:14px;
				height:27px;
				display:block;
				white-space:nowrap;
				background:url(/img/double-line-vertical.gif) repeat-y top right;
				margin:2px 0 10px 0;
				padding:8px 10px 0 0;
				font-weight:normal; }
				
			#about-support-container #content h2.about { width:110px; }
			#about-support-container #content h2.support { width:62px; }
				
			#about-support-container #content .left p,
			#about-support-container #content .right p {
				font-size:12px;
				color:#fff;
				font-family:Verdana, Arial, Helvetica, sans-serif;
				line-height:19px; }
				
			img.coil {
				float:right; 
				margin:5px 5px 10px 15px;
				display:block; }
					
/*----- END ABOUT-SUPPORT-CONTAINER -----*/	

/*----- BEGIN FOOTER-CONTAINER - THIS IS THE LOWEST SECTION OF THE WEBSITE -----*/	
					
#footer-container {
	width:100%;
	height:70px;
	padding:2px 0 0 0;
	background: url(/img/footer-bg.gif) repeat-x 0 0; }
	
	#footer-container #content {
		width:937px;
		height:25px;
		padding:9px 0 0 25px;
		margin:0 auto;
		background:red url(/img/footer-content-bg.gif) repeat-y 0 0;
		color:#c20303; }
			
/*----- END FOOTER-CONTAINER -----*/


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

ul.level1 { 
	width:501px;
	height:33px;
	margin:9px 0 0 0;
	padding:0;
	clear:both;
	list-style:none; }
	
	ul.level1 li {
		float:left;
		height:33px;
		margin:0;
		white-space: nowrap; }
		
		ul.level1 li a,
		ul.level1 li a:visited {
			height:33px;
			color:#bebebe;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:14px;
			display:block;
			line-height:30px;
			text-decoration:none;
			background:url(/img/level1-divider.gif) no-repeat top right; }		
			
		ul.level1 li a:hover,
		ul.level1 li a.on {
			color:#c20303 !important;
			text-decoration:none; }	
			
		ul.level1 li a.wine-ohs {
			width:76px;
			height:33px;
			padding:0 22px 0 28px; }
			
		ul.level1 li a.about-us {
			width:65px;
			height:33px;
			padding:0px 24px 0 26px; }
		ul.level1 li a.home {
			width:45px;
			height:33px;
			padding:0px 24px 0 26px; }
			
		ul.level1 li a.contact-us {
			width:67px;
			height:33px;
			padding:0px 29px 0 21px; }
			
		ul.level1 li a.log-in {
			width:51px;
			height:33px;
			padding:0px 21px 0 29px; }	



/*----- TYPOGRAPHY -----*/

p { 
	font-size: 1.2em; 
	margin: 0 0 1em; }

h1 { 
	font-size: 2em; 
	margin: 0 0 1em; }

h2 { 
	font-size: 1.8em; 
	margin: 0 0 1em; }

h3 { 
	font-size: 1.6em; 
	margin: 0 0 1em; }

h4 { 
	font-size: 1.4em; font-weight: bold;
	margin: 0 0 1em; }

h5 { 
	font-size: 1.3em; font-weight: bold;
	margin: 0 0 1em; }

h6 { 
	font-size: 1.2em; font-weight: bold;
	margin: 0 0 1em; }


/*----- FORM ELEMENTS -----*/

form { 
	background: #eee; 
	padding: 10px; }

form label {
	 cursor: pointer;
	 font-size: 1.2em;
	 display: block; 
	 float: left;
	 width: 150px; }
 	
	form span { font-size: 1.2em; }
 		
form fieldset {
	border: none; clear: left; }
		
input, select, textarea {
 	font: 1.2em Arial, Helvetica, sans-serif;
	margin: 0 0 2px;
 	width: 150px; }
 
 	input.checkbox, input.radio { width: auto; margin-top: 5px; }

button { margin: 0 0 0 10px; }