/* - colors 

*** Primary Color:

   var. 1 = #02B362 = rgb(2,179,98)
   var. 2 = #259562 = rgb(37,149,98)
   var. 3 = #008146 = rgb(0,129,70)
   var. 4 = #39E396 = rgb(57,227,150)
   var. 5 = #66E3AA = rgb(102,227,170)

*** Secondary Color A:

   var. 1 = #00BABA = rgb(0,186,186)
   var. 2 = #228989 = rgb(34,137,137)
   var. 3 = #007676 = rgb(0,118,118)
   var. 4 = #37DBDB = rgb(55,219,219)
   var. 5 = #62DBDB = rgb(98,219,219)

*** Secondary Color B:

   var. 1 = #FA7303 = rgb(250,115,3)
   var. 2 = #BF7130 = rgb(191,113,48)
   var. 3 = #A64B00 = rgb(166,75,0)
   var. 4 = #FF9640 = rgb(255,150,64)
   var. 5 = #FFB273 = rgb(255,178,115)

*** Complementary Color:

   var. 1 = #D3420D = rgb(211,66,13)
   var. 2 = #BF5730 = rgb(191,87,48)
   var. 3 = #94330F = rgb(148,51,15)
   var. 4 = #FF7340 = rgb(255,115,64)
   var. 5 = #FF9973 = rgb(255,153,115)
*/

/* 
Title: Master Styles for Screen Media
Author: davidkrodriguez@gmail.com
*/



body{
font: 62.5% "Lucida Grande", Verdana, Arial, sans-serif;
color: rgb(60,60,60);
background: url(http://www.ocmdhotels.com/images/ocmd/oceanic/ocbackground.jpg)  no-repeat -8px 0 fixed rgb(192,244,244);	}

/* text */

h1{ font-size:1.6em; }
  
h2{ font-size: 2em;  margin:1em 20px .5em;  line-height: 1.2; font-weight:bold; color:rgb(2,179,98);}
	
h3 { font-size: 1.6em;  margin:.5em 20px .2em;  font-weight:normal; color:#BF7130; line-height:1.4; }
	
p { font-size: 1.3em; margin: 0 0 .5em 0; line-height: 1.6;	}

li { font-size:1.35em; line-height:1.3; margin:0 0 .5em 0; list-style:outside disc; }

/* Links */

a:link, a:visited { outline: none; color: rgb(255,115,64); }


a:hover, a:focus { background:rgb(255,150,64); color:rgb(232,252,252);	}
	
dl.one { font-size:1.5em; margin:0 0 0 20px; width:200px; }

dt { font-size:1.1em; margin:.5em 0 .1em; color:#E3AC3E; font-weight:bold; }

dd { margin:0 0 1em 0; }

strong { font-weight:bold; }

/*------------
  LAYOUT
-------------*/	

#wrapper{
width: 975px;

margin: 0 auto;
position: relative;
}

/* Header */
		
header{
float:left;
width:100%;
}
	
header h1{
width: 200px;
height: 116px;
display: block;
background: url(http://www.ocmdhotels.com/images/ocmd/oceanic/OC_LOGO.png) no-repeat;
position: absolute;
left: -15px;
top:5px;
z-index:50;
}
	
header h1 a{
width: 200px;
height: 116px;
display: block;
text-indent: -9999px;
position:relative;

}

header h1 a:hover, header 
a:focus {
background:rgba(255,178,115,.4);
}


/*----------------------
   NAV 
*/

header nav{
float: right;
width:100%;
padding-top:75px;
	}

header nav ul{
margin:0px;
max-width:800px;
float:right;		
}
	
header nav li{
float: left;
font-size: 1.4em;
list-style:none;
margin:0;		
}

header nav li a:link, header nav li a:visited{
padding:10px 12px;
text-decoration:none;
float: left;
color:#94330F;
}
header nav li a:visited{color:#BF5730;}

header nav li a:hover, header nav li a:focus{
background:rgb(255,150,64);
color:rgb(232,252,252);
}

	
#mainContent{
padding-bottom: 30px;
clear:both;
background:rgb(232,252,252);

}


/*-- reserve --*/

#reserve h1{ text-indent:-9999px;}

#reserve{ 
width:300px; 
float:right; 
background:url(http://www.ocmdhotels.com/images/ocmd/seabonay/a_lightBlueTrans.png) repeat transparent;
background:rgba(192,244,244,.9); 
position:relative;
padding:0px 0 10px 10px;
position:relative;
z-index:2;
}

#reserve label { display:block; color:#008146; font-size:.9em; font-weight:bold;}

#resDetails p { float:left; width:28%;}

#rateType { float:left; width:30%; clear:left;}

#rateType select { width:100%;}

#checkins, #checkouts { width:80%; padding-bottom:3px; float:left;}



#promocode { width:50%; float:left; margin-left:30px;}

#reserve button { font-size:1.5em; clear:both; margin:10px 0; padding:5px 10px;  background:#008146; color:white; border:1px solid transparent;}

#reserve button:hover{background:#66E3AA; color:#008146; border:1px solid #008146; }

#reservePhone{width:975px; background:url(http://www.ocmdhotels.com/images/ocmd/oceanic/oc3.jpg) no-repeat -335px -265px ; float:left; position:relative; }

#phone{ 
width:960px; 
float:left; 
background:url(http://www.ocmdhotels.com/images/ocmd/seabonay/a_lightBlueTrans.png) repeat transparent;
padding:20px 5px 20px 10px;
background:rgba(192,244,244,.9); 
position:absolute; 
bottom:0; 
z-index:1;
color:rgb(0,118,118);
 }

#phone em{display:block; font-weight:normal; font-style:normal; font-size:.9em;}


.inset{margin:0;}

.left{float:left;}

.right{float:right;}

.one{width:233px; margin:5px; }

.two{width:477px; margin:5px; }

.three{width:721px; margin:5px; }

.four{width:965px; margin:5px; }

.left, .right{display:inline; }


.text h1, .text p, .text li{ margin:.1em 25px .75em 20px;}

.text h1{margin-top:20px;}

section h1{
font-size: 1.8em;
line-height: 1.5;
text-transform:uppercase;
letter-spacing:.1em;
color:rgb(0,118,118);
margin:.1em 25px .75em 20px;
}

 

/*----------- 
  Photo Gallery 
------------------*/

#photoGallery{ position:relative; float:left; width:975px;}

.pictures{ position:relative; background:#D5FAF4; border-top:2px solid #37D7BC; z-index:5;}

.pictures p{ margin:5px 80px;}

#loader{position:absolute; width:30px; height:30px; left:220px; top:150px; z-index:1;}

.pictures .controls{position:absolute; top:-5px; left:0;   width:100%; line-height:1;}

.controls a{ padding:5px; font-size:30px; margin:0 5px; text-decoration:none; }

.thumbs{width:477px; float:right;}

.thumbs a{float:left; padding:0; text-decoration:none; margin:2px; width:115px; height:115px; }

.thumbs a:hover img, .thumbs a:focus img{border:2px solid #37D7BC;}

.thumbs a img{margin:0; padding:0; border:2px solid transparent; float:left;}
.thumbs a img.selected{border:2px solid #37D7BC; opacity:.5;}
.controls a em{ font-style:normal;}


aside.flickr{ float:left; width:100%; margin-top:25px; padding-bottom:25px; }

aside.flickr h1 {padding:12px; }


aside.flickr ul li{float:left; list-style:none; margin:10px; width:200px;  }

aside.flickr ul li a img{float:left; border:2px solid transparent;}

aside.flickr ul li a:hover img{border:2px solid #37D7BC; text-decoration:none; background:none; }

/*-------------
 Rates 
--------------*/
body.rates section h1, body.specials section h1, body.contactus section h1, #photoGallery h1{
font-size: 2em;
line-height: 1.5;
padding:15px 0 10px 25px;
margin:10px 0;
float:left;
width:950px;
background:#FF9640;
color:#E8FCFC;
}

/*Rates Table */

#ratesTable{
width:500px;
text-align:left;
font-size:1.5em;
margin-left:100px;
float:left;
}

table#ratesTable tr.rateDates th{
color:rgb(0,118,118);
padding:40px 0 10px;
font-weight:bold;
}

table#ratesTable th em{
color: rgb(0,186,186);
display:block;
font-weight:normal;
font-style:normal;
}

#ratesTable thead, #ratesTable tfoot{ text-indent:-9999px; }


table#ratesTable tr th{
font-weight:normal;
padding:1px 0 5px 0;
}

table#ratesTable tr td{
font-size:1em;
padding-left:30px;
}


/*--------------
 SPECIALS
-----------------*/

p.finePrint, .finerPrint p{ font-size:1.2em;}

.finerPrint h2{ font-size:1.3em; margin:1em 20px;}

/*--------------
 CONTACT US
-----------------*/

#contact label{display:block; margin:.3em 0;}

#contact span{ font-size:smaller; color:gray; font-style:italic;}

#contact button { font-size:1.5em; clear:both; margin:10px 20px; padding:5px 10px;  background:#008146; color:white; border:1px solid transparent;}

#contact button:hover{background:#66E3AA; color:#008146; border:1px solid #008146; }


div.bottom{
position: relative;
min-height: 190px;

}

footer{
margin: 0 auto;
width: 965px;
border-top:5px solid #FF9640;
padding: 20px 0 0 10px;
}

footer p{
margin:5px 0;
font-size:1.4em;}

footer address{
margin:5px 0;
font-size:1.4em;
}



/*-------------
	GRIDS
--*/
#grid4{
	background: url(http://www.ocmdhotels.com/images/ocmd/harrisonhall/9754ColGrid.png) repeat-y;
	position: absolute;
	top:0;
	left: 0;
	height: 1000px;
	width: 975px;
	z-index: 5;}
	
#grid5{
	background: url(http://www.ocmdhotels.com/images/ocmd/harrisonhall/9755ColGrid.png) repeat-y;
	position: absolute;
	top:0;
	left: 0;
	height: 1000px;
	width: 975px;
	z-index: 5;}
		
/*-------------
	SELF CLEARING FLOATS
---------------*/
.group:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}