﻿/* -----------------------------------------------------------------------
	CSS INFO
	Date	: 13 Nov 2007
	Title	: My Boracay Guide v1 (Design v4)
	Author	: JT Desquitado
	URL		: www.philwebservices.com
	E-mail	: philweb.jude@gmail.com
	Legal	: All images and style elements copyright by MyBoracay Guide
			  unless specified.
   ----------------------------------------------------------------------- */
   
/* -----------------------------------------------------------------------
	AUTHORS NOTE
	Important: 
   ----------------------------------------------------------------------- */
   
   
/* Common Styles
-------------------------------------------------------------------------- */

* {
	margin: 0;
	padding: 0;
}

a.language:visited{color:#6f6a66; text-decoration:underline; font-size:18px; font-family:Arial, Helvetica, sans-serif;}
a.language:link{color:#6f6a66; text-decoration:underline; font-size:18px; font-family:Arial, Helvetica, sans-serif;}
a.language:hover{color:#6f6a66; text-decoration:underline; font-size:18px; font-family:Arial, Helvetica, sans-serif;}

body {
	font-family: Verdana, Arial, Helvitica, san-serif;
	line-height: 16px;
	font-size: 12px;
	word-spacing:normal;
	color: #111;
	background: url(../../images/bg.jpg) top no-repeat #eeffed;
}

ul {
	list-style: none;
}

h1 { font-size: 18px;
	
}

h2 {
	font-size: 160%;
	margin: 4px 0 25px 0;
	color: #615840;
	font-weight: normal;
}

h3 {
	font-size:130%;
}

p {
	margin: 4px 0 16px 0;
}

a:link {
	color: #f58d09;
}

a:visited {
	text-decoration: none;
	color: #d47c08;
}

a:active, a:hover, a:link {
	text-decoration: none;
}
a img { border-color:#F58D09;}

/* Common Classes
-------------------------------------------------------------------------- */
.clear {
	clear: both;
}

.left {
	float: left;
}

.right {
	float: right;
}

.center {
	margin: 0 auto; /* To use this class specify the width with style attribute */
}

img.imgAL {
	float: left;
	margin: 0 27px 27px 0;
}

img.imgAR {
	float: right;
	margin: 0 0 27px 27px;
}

.txtAL {
	text-align: left;
}

.txtAC {
	text-align: center;
}

.txtAR {
	text-align: right;
}

.hBorder {
	border-bottom: 2px solid #928980;
	padding-bottom: 5px;
	display: block;
}
.pH10 { padding:10px 0;}
.pT20 {	padding-top:20px;}
.mT20 {	margin-top:20px;}
.mB20{	margin-bottom:20px;} .mB10 { margin-bottom:10px;}

.mR10{
	margin-right:10px;
}
.none {
	display:none;
}
/* Basic Structure
-------------------------------------------------------------------------- */

#container {
	margin: 0 auto;
	position: relative;
	width: 1000px;
	padding: 0 15px 0 15px;
}

#header {
	float: left;
	width: 970px;
	margin-bottom: 27px;
}

#content {
	float: left;
	width: 970px;
}

#sidebar {
	float: left;
	width: 183px;
}

#main {
	float: right;
	width: 759px;
}

#footer {
	float: left;
	width: 970px;
	text-align: center;
	padding: 40px 0 20px 0;
}

/* Header
-------------------------------------------------------------------------- */

#header h1 a {
	float: left;
	width: 390px;
	height: 140px;
	margin: 50px 0pt 10px;
}

#header h1 a span {
	display: none;
}

#header ul {
	clear: left;
	list-style: none;
}

#header ul li  {
	float: left;
	border-right: 1px solid #ced5dd;
/*	height: 19px;*/
	padding: 0 11px 0 11px;
	font-weight: bold;
	margin-top: 27px;
}

#header ul li ul li.anylinkcss1{
	padding:0px;
	height:170px;
	overflow-y:scroll;
	left:231px;
	top:217px;
	BORDER-RIGHT:1px solid #464646;
	BORDER-TOP:1px solid #464646;
	FONT: 10px/18px Verdana, Arial, Helvetica, sans-serif;
	BORDER-LEFT:1px solid #464646;
	WIDTH: 200px;
	COLOR:#000000;
	BORDER-BOTTOM:none;
	BACKGROUND-COLOR:#6CF;
	overflow-x:hidden;
	position:absolute;
	display:block;
}

	
#header ul li ul li.anylinkcss1 A {
	DISPLAY: block;
	position:absolute;
	WIDTH: 200px;
	text-align:left;
	COLOR: #000000;
	BORDER-BOTTOM:1px solid #464646;
	TEXT-DECORATION: none;
	font-size:13px;
	float:left;
	padding:0px 0px 1px 5px;
	margin:0px;
	float:left;
	white-space:nowrap;
}

#header ul li ul li.anylinkcss1 A:hover {
	DISPLAY: block;
	position:absolute;
	WIDTH: 200px;
	text-align:left;
	COLOR: #464646;
	BORDER-BOTTOM:1px solid #464646;
	TEXT-DECORATION: none;
	font-size:13px;
	float:left;
	padding:0px 0px 1px 5px;
	margin:0px;
	float:left;
	white-space:nowrap;	
	BACKGROUND-COLOR: #eeffed;
}

#header ul li a {
	font-family: Myriad Pro, Arial, Helvitica, sans-serif;
	font-size: 120%;
	text-decoration: none;
	color: #054e8c;
}

#header ul li a span {
	display: none;
}

#header ul li a:hover {
	color: #ecb02d;
}

#header ul #nav5 {
	border: 0;
}

#header ul #home a {
	background: url(../../images/english/nav/home.jpg) no-repeat;
	float: left;
	width: 35px;
	height: 10px;
	margin-top: 5px;
}

#header ul #home a:hover {
	background: url(../../images/english/nav/home_hover.jpg) no-repeat;
}

#header ul #nav2 a {
	background: url(../../images/english/nav/beaches.jpg) no-repeat;
	float: left;
	width: 124px;
	height: 11px;
	margin-top: 4px;
}

#header ul #nav2 a:hover {
	background: url(../../images/english/nav/beaches_hover.jpg) no-repeat;
}

#header ul #nav3 a {
	background: url(../../images/english/nav/booking.jpg) no-repeat;
	float: left;
	width: 103px;
	height: 10px;
	margin-top: 5px;
}

#header ul #nav3 a:hover {
	background: url(../../images/english/nav/booking_hover.jpg) no-repeat;
}
#header ul #nav113 a:hover {
	background: url(../../images/english/nav/transportation_hover.jpg) no-repeat;
}

#header ul #nav113 a {
	background: url(../../images/english/nav/transportation.jpg) no-repeat;
	float: left;
	width: 112px;
	height: 10px;
	margin-top: 5px;
}

#header ul #nav4 a {
	background: url(../../images/nav/eguide.gif) no-repeat;
	float: left;
	width: 52px;
	height: 14px;
	margin-top: 5px;
}

#header ul #nav4 a:hover {
	background: url(../../images/nav/eguide-h.gif) no-repeat;
}

#header ul #nav5 a {
	background: url(../../images/english/nav/contact.jpg) no-repeat;
	float: left;
	width: 76px;
	height: 10px;
	margin-top: 5px;
	border-right: 0;
}

#header ul #nav5 a:hover {
	background: url(../../images/english/nav/contact_hover.jpg) no-repeat;
}
#header ul #nav12 a {
	background: url(../../images/nav/qhf.gif); background-repeat:no-repeat;
	float: left;
	width: 129px;
	height: 9px;
	margin-top: 5px;
}

#header ul #nav12 a:hover {
	background: url(../../images/english/nav/qhf-h.gif); background-repeat:no-repeat;
}

#header ul #nav13 a {
	background: url(../../images/english/nav/blog.jpg) no-repeat;
	float: left;
	width: 35px;
	height: 10px;
	margin-top: 5px;
}

#header ul #nav13 a:hover {
	background: url(../../images/english/nav/blog_hover.jpg) no-repeat;
}

#header ul #nav17 a {
	background: url(../../images/english/nav/transfer.gif) no-repeat;
	float: left;
	width: 172px;
	height: 10px;
	margin-top: 5px;
}

#header ul #nav17 a:hover {
	background: url(../../images/english/nav/transfer-h.gif) no-repeat;
}

#header ul li a {
	
}
#header ul li a:hover {
		COLOR: #656565;
}
/*#header ul li ul li{
		float: left; position:absolute; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; background-color:#FFCC00; line-height:20px; margin:0px; 
}
*/
/* nav2
**********************/
#header ul #nav6 a {
	background: url(../../images/english/nav/more-info.gif) no-repeat;
	float: left;
	width: 150px;
	height: 9px;
	margin-top: 5px;
}
#header ul #nav6 a:hover {
	background: url(../../images/english/nav/more-info-h.gif) no-repeat;
}
#header ul #nav7 a {
	background: url(../images/nav/rooms-prices.gif) no-repeat;
	float: left;
	width: 117px;
	height: 9px;
	margin-top: 5px;
}
#header ul #nav7 a:hover {
	background: url(../images/nav/rooms-prices-h.gif) no-repeat;
}
#header ul #nav8 a {
	background: url(../images/nav/area-map.gif) no-repeat;
	float: left;
	width: 117px;
	height: 9px;
	margin-top: 5px;
}
#header ul #nav8 a:hover {
	background: url(../images/nav/area-map-h.gif) no-repeat;
}
#header ul #nav9 a {
	background: url(../images/nav/guest-book.gif) no-repeat;
	float: left;
	width: 77px;
	height: 9px;
	margin-top: 5px;
}
#header ul #nav9 a:hover {
	background: url(../images/nav/guest-book-h.gif) no-repeat;
}
#header ul #nav10 a {
	background: url(../images/nav/enquiries.gif) no-repeat;
	float: left;
	width: 63px;
	height: 9px;
	margin-top: 5px;
}
#header ul #nav10 a:hover {
	background: url(../images/nav/enquiries-h.gif) no-repeat;
}
#header ul #nav11 a {
	background: url(../images/nav/online-booking.gif) no-repeat;
	float: left;
	width: 122px;
	height: 9px;
	margin-top: 5px;
}
#header ul #nav11 a:hover {
	background: url(../images/nav/online-booking-h.gif) no-repeat;
}
/* Main
-------------------------------------------------------------------------- */

#photo-gallery {
	width: 759px;
	text-align: center;
}

#photo-gallery #preview img {
	width: 635px;
	height: 400px;
}

#photo-gallery #thumbs img {
	height: 110px;
	border: 0;
	/*float: left;*/
	margin: 0 1px 0 1px;
}

#thumbs {
	width: 735px;
	margin: 0 auto;
	position: relative;
}

#prev span, #next span {
	display: none;
}

#prev a {
	width: 50px;
	float: left;
	background: url(../images/prev.gif) no-repeat center;
	height: 150px;
}
#prev a:hover {
	background: url(../images/prev-h.gif) no-repeat center;
}

#next  a {
	float: right;
	background: url(../images/next.gif) no-repeat center;
	width: 50px;
	height: 150px;
}
#next a:hover {
	background: url(../images/next-h.gif) no-repeat center;
}

#imgArray {
	float: left;
	width: 635px;
	height: 200px;
/*	height: 110px; */
	padding: 20px 0 20px 0;
	background: url(../images/gallery-bg.gif) repeat-x;
}

#awrap {
	position: relative;
	width: 635px;
	height: 110px;
	overflow: hidden;
}

.hr-dashed{
	border-top:1px dashed #CCCCCC;
}

.list {
	list-style: disc;
	margin-left:20px;
}

.list li{
	line-height:20px;
}
/* Sidebar
-------------------------------------------------------------------------- */

/* SubNav Accordion */
#sidebar #subnav {
	margin: 15px 0 50px 0;
	float: left;
}

#sidebar #subnav ul {
	float: left;
	width: 183px;
}

#sidebar #subnav ul li {
	float: left;
}

#sidebar #subnav ul li a {
	float: left;
	width: 169px;
	height: 16px;
	padding: 6px 7px 10px 7px;
	background: url(../../images/sub-nav-bg.png) top no-repeat;
	text-transform: uppercase;
	text-decoration: none;
	color: #464646;
	outline: none;
}

#sidebar #subnav ul li ul {
	float: left;
	clear: left;
	/*padding: 10px 0 30px 0;*/
}

#sidebar #subnav ul li ul li a {
	background: none;
	text-transform: none;
	color: #111;
	padding: 7px 5px 7px 5px;
	border-bottom: 1px solid #ecdfbf;
	width: 173px;
	margin: 0; font-size:11px;
}

#sidebar #subnav ul li ul li a:hover {
	color: #106fc0;
}

.accordion_content {
	overflow: hidden;
}

/* Spotlight */
#sidebar #spotlight {
	color: #8a8686;
	font-size:11px;
}

#sidebar #spotlight ul {
	float: left;
}

#sidebar #spotlight ul li {
	float: left;
	width: 168px;
	background: #fff;
	padding: 15px 8px 5px 8px;
	text-align: center;
	margin-bottom: 10px;
}

#sidebar #spotlight ul li h3 {
	margin: 5px 0 2px 0;
	font-size: 120%;
}

#sidebar #spotlight ul li p {
	margin: 0px;
}

#sidebar #spotlight ul li p a {
	display: block;
	font-size: 90%;
	text-align: right;
	margin: 3px 0 3px 0;
	color: #f58d09;
}

#sidebar #spotlight ul li p a:hover,#sidebar #spotlight ul li p a:active {
	text-decoration: none;
}

#sidebar #spotlight ul li p a:visited {
	color: #d0790a;
}

/* Footer
-------------------------------------------------------------------------- */

#footer .copyright {
	margin-right: 20px;
	color: #72675b;
	font-size: 100%;
}

#footer .legal-links {
	color: #72675b;
}

#footer .legal-links a {
	font-size: 100%;
	text-decoration: none;
	color: #72675b;
	margin: 0 3px 0 3px;
}

#footer .legal-links a:hover {
	text-decoration: underline;
}


/******accomodations*****/
#content2 {float:left; }
#main2 { float:right; }
#right_map { position:relative;/* background-image:url(../images/maps/map_right.jpg);*/ height:1240px; width:235px; float:right; top:30px;}
#main2 .sub-nav { clear:both; float:left; width:700px; margin-bottom:15px;}
#main2 .sub-nav .nav { background:#f2dfd0; font-size:14px; float:left; font-weight:bold; width:700px; height:20px; padding-top:5px; overflow:hidden;}
	#main2 .sub-nav .nav a, #main2 .sub-nav .nav span { text-decoration:none; padding-right:25px; padding-left:25px; }
	html:first-child .nav span {margin-left:-20px;} html:first-child #main2 .sub-nav {margin-top:20px;} html:first-child #extra {margin:-5px 0 0 30px !important;position:absolute !important;font-weight:normal;}
#main2 .bottom-details { clear:both; width:720px; float:left; border:1px #ecb875 solid; margin-top:7px;}
#main2 .bottom-details p {margin:6px; color:#0e57a3;}
/*****beaches extension*****/
.lower_map { width:504px; position:relative; background:#ede2d9;}
.map_nav { line-height:.3em; padding:20px 20px 5px 20px; position:relative;}
.lower_descript { padding:20px 20px 5px 20px; text-align:justify; width:190px; position:relative;}
a.yelborder img { border:2px solid #d47c08; display:block;}
/**#main .map_nav p a { color:#000000;}**/

/*****content thumbnail list****/
#main p.mR10, #main2 p.mR10 { width:480px; }
.thumb-link { text-decoration:none; font-size:12px; font-weight:bold; float:right; margin:0 5px 2px 30px;}
.noborder { border:0; padding-left:5px; margin-bottom:-3px;}
.catalog { margin-bottom:5px; text-align:left; }
 .catalog ul{ list-style:none; padding-right:56px; width:500px; margin-left:160px; } /*iehack*/ *html .catalog ul {margin-left:163px; padding-right:41px;}
   .catalog li{ display:inline; float:left; padding-right:5px; margin:0; }
	#main2 .catalog a { text-decoration:none; padding:0px; color:#A7A7A7; font-weight:bold;} #main2 .catalog a:hover { color:#d47c08;}
 /*****thumb listing on beaches and resorts*******/
 .thumb2 {margin-right:10px; margin-top:-10px;} /*iehack*/ *html .thumb2 {margin-top:-20px;}
 html:first-child .thumb2 img {padding:0 !important;}
 .details2 {padding-right:15px; } /*ie hack*/ *html .details2 { margin-bottom:4px;}
 html:first-child .details2 {float:none !important; width:694px !important;padding-top:7px !important;}
/*anti-wiper*/
.spacer { height:420px; position:relative;}

/****************************more-info******************************/
.heading2 { font-size:13px; font-weight:bold; color:#615840; height:25px; padding:6px 0 0 4px;}
.thumbnail p a { display:block; padding-top:5px; clear:both;}
.headerbg2 { background:url(../images/photos/info-thumb/headerbg2.gif) no-repeat;}
.headerbg2-wide { background:url(../images/photos/info-thumb/headerbg2-wide.gif) no-repeat;}
/****positioning****/
.mR40 { margin-right:40px;}
.mL30 { margin-left:30px;}
.pL30 { padding-left:30px;} .pL20 { padding-left:20px;} .pL10 { padding-left:10px;}
/***************enquiries*************/
.inputlabel { width:200px; height:25px; margin-top:5px; font-size:12px; color:#2b1505; }
.enquire form input, .enquire form select {background-color:#f8f1eb; border:1px #e4d3bd solid; padding:3px; margin:5px 0 10px 0; display:block; }

/**adjustments**/
.txt12 { font-size:12px; line-height:1.6em;}
#main2 a.left img { border:0; width:210px;} /*remove border of image ang resize its size */
.abs-float { position:absolute; z-index:999; top:40px; left:480px;}
/*#main p { font-size: 105%; line-height:1.6em;}*/
.dam-exp p { font-size:104%;}
.sub-nav span { padding-right:20px; }
.sub-nav span img { padding: 0 3px 0 3px; }
.announcement { color:#0e57a3;}

table {	font-size:12px;}

/* CSS for my first scrolling box */
	#scrollingContainer{
		width:100%;	/* 170 pixels in width */
		height:50px;	/* Height of box */
		
		border:1px solid #e0ded0;	/* Black border around box */
		background-color: #f8f1eb;	/* Light blue background color */

		padding:2px;	/* A little bit of space between border of box and text inside */
		float:left;	/* I want the text to wrap around the box */
		margin-right:10px;	/* Right margin of 10 pixels */
		
			/* Smaller font size than the rest of the page */
		
		overflow:hidden;	/* Hide overflow content */
	}
	/* End css for my first scrolling box */

