﻿/* -----------------------------------------------------------------------

	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;

}

form{ margin:0px; padding:0px;}

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 repeat-x #ffffff;

}



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: #2d5ea7;

}



a:visited {

	text-decoration: none;

	color: #1E53A2;

}



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: 1000px;

	margin-bottom: 27px; background: url(../../images/header_new.jpg) top no-repeat;

}



#content {

	/*float: left;*/

	width: 970px; margin:auto;

}



#sidebar {

	float: left;

	width: 168px;

}



#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;*/ height:229px;

}



#header h1 a span {

	display: none;

}



#header ul {

clear:left;

	list-style: none; background: url(../../images/navigation_bg.jpg) top no-repeat; width:970px; height:50px; margin:auto;position:relative;

}

#header ul li  {

	float: left;

	/*border-right: 1px solid #ced5dd;

	height: 19px; margin-top: 27px;*/

	padding: 0px 19px 0 19px;

	font-weight: bold; line-height:48px;

	position:relative;

	

}



#header ul li:hover ul{position:absolute; display:block;}



#header ul li ul{width:174px; /*top:15px; border:1px solid #FFFFFF;*/ display:none; padding:0px; margin:-15px 0px 0px 0px; list-style:none; position:relative; overflow-y:scroll; height:170px; float:left; #margin:15px 0px 0px 0px;#left:20px;}

#header ul li ul li{float:none; padding:5px; margin:0px; line-height:12px; background:#eba510; border-bottom:1px solid #000000; position:relative;}

#header ul li ul li a:visited{text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size:11px; font-weight:normal; text-align:left; color:#FFFFFF;}

#header ul li ul li a:link{text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size:11px; font-weight:normal; text-align:left; color:#FFFFFF;}

#header ul li ul li:hover{float:none; padding:5px; margin:0px; background-color:#1e53a2;}



#header ul li ul li a:hover{text-decoration:none; color:#ffffff;}





#header ul li ul li.anylinkcss1{

	padding:0px;

	

	

	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:visited {

	font-family: Myriad Pro, Arial, Helvitica, sans-serif;

	font-size: 120%;

	text-decoration: none;

	color: #2d5ea7; font-weight:bold; text-transform:uppercase;

}



#header ul li a {

	font-family: Myriad Pro, Arial, Helvitica, sans-serif;

	font-size: 120%;

	text-decoration: none;

	color: #2d5ea7; font-weight:bold; text-transform:uppercase;

}



#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 #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 #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 #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 #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 #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 25px 0;

	float: left;

}



#sidebar #subnav ul {

	float: left;

	width: 168px; padding:0px; margin:0px;

}



#sidebar #subnav ul li {

	float: left; padding:0px 8px 0px 8px; background: url(../../images/sub-nav-bg.png) top no-repeat; width:152px; font-size:11px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;

}



#sidebar #subnav ul li ul li{

	float: left; padding:0px 8px 0px 8px; background:none; width:152px; font-size:11px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;

}



#sidebar #subnav ul li a {

	float: left;

	/*width: 169px;

	height: 16px;*/

	padding: 6px 7px 10px 7px;

	text-transform: uppercase;

	text-decoration: none;

	color: #ffffff; font-weight:bold;

	outline: none; font-family:Arial, Helvetica, sans-serif;

}



#sidebar #subnav ul li ul {

	float: left;

	width:153px;

	/*padding: 10px 0 30px 0;*/

}



#sidebar #subnav ul li ul li a:visited {

	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 {

	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:#A8DFA6; 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 */




