/* GOOD TO HAVES */
.clear {clear: both;}
pre {display: inline; font-weight: bold;}

/* STANDARD HTML */
body {background: #000; font-family: Verdana, sans-serif; color: #fff;}
a {text-decoration: none; color: #fff;}

h1 {font-weight: bold; font-size: 18px; line-height: 22px; margin-bottom: 10px;}
h2 {font-weight: bold; font-size: 13px; line-height: 17px; margin-bottom: 10px;}
h3 {margin-top: 15px; font-size: 14px; color: #2687c5;}
h5 {margin-top: 15px; font-size: 14px; color: #2687c5;}
p {font-size: 12px; line-height: 17px; margin: 10px 0;}
	p a, li a {color: #006eaf; text-decoration: underline;}

.bar {font-size: 13px; padding: 3px 10px 4px; margin-left: 5px; background: #2687c5; color: #FFF;}
	
a {color: #006eaf; outline: none;}
	a:hover {color: #57befa;}

/* LAYOUT */ 
#main {width: 900px; margin: 5px auto;}
#header {height: 100px;}
#content {clear: both; margin: 20px 0 0 0; padding: 0 0; background: #000000; min-height: 400px;}
#footer {clear: both; margin: 0 0 10px; padding: 5px 0; font-size: 11px; color: #fff; }

/* HEADER */
#header h5#logo {background: #000 url(images/fract_logo.gif) 0 0 no-repeat; width: 252px; height: 90px; float: left; margin: 0 0 0 0;}
	#header h5#logo a {display: block; width: 252px; height: 90px;}
	#header h5#logo span {display: none;}
#header h6#tagline {text-align: right; font-size: 25px; color: #fff; font-weight: bold; margin: 0 20px 0 0; padding: 30px 0 0 0;}

#header #nav {float: right; padding: 64px 0 10px 0; font-size: 14px; text-transform: capitalize;}
	#header #nav ul li {float: left; padding: 0 4px;}
	#header #nav ul li a {padding: 2px 8px 2px 0; text-decoration: none; color: #2687c5;}
	#header #nav ul li a:hover {color: #57befa;}
	 #header #nav ul li a.current {color: #fff;}
	
/* FOOTER */
#footer a {color: #fff;}
#footer ul#footnav {float: right;}
	#footer ul#footnav li {float: left; padding: 0 2px;}
	#footer ul#footnav li a {padding: 2px; text-decoration: none; color: #FFF;}
	
	
/* SIDEBAR */
#sidebar {float: left; width: 232px; padding: 0 15px 20px 15px; margin: 0 15px 0 0;}
#sidebar ul {font-size: 12px; margin: 3px 0;}
#sidebar ul li {list-style: circle; padding: 2px 0;}
	#sidebar ul li a {text-decoration: none;}

#sidebar h3 {margin-top: 0; font-weight: normal;}

/* CONTENT AREA */
#area {margin: 0 0 0 262px; padding: 0 0 20px 15px; border-left: 1px solid #babbc0;}
	#area ul {font-size: 11px; margin-left: 20px;list-style: circle;}
	#area ul li {padding: 1px;}



/* HOME */
#home .box {margin: 10px 10px 13px 660px; border: 1px solid #2687c5;  text-align: center; }
#home .box h2 {background: #2687c5; padding: 5px; font-size: 12px; text-align: center; }
	#home .box h2 a:hover {text-decoration: underline !important;}
#home .box p {padding: 0 5px; font-size: 10px;}
#home .box ul {font-size: 10px; padding: 5px;}

#home #testimonialbox {float: left; padding: 0 0; width: 380px; margin: 0 20px 0 10px;}
	#testimonialbox p {font-style: italic; }
	#testimonialbox p em { font-style: normal; margin: 0 0 0 0; font-size: 11px; color: grey;}

#home #featuredestination {}

#home #newlistings {margin-top: 35px;}

/* CRUMBS */
ul.crumbs {padding: 0; font-size: 14px; height: 25px; list-style: none !important;}
 ul.crumbs li {float: left; padding: 0 4px 0 0;}
	ul.crumbs li a {padding: 0 1px 2px 0; text-decoration: none; color: #006eaf;}
	ul.crumbs li a:hover {color: #57befa;}
	ul.crumbs li a.current {color: #fff;}

/* LISTING CRUMBS */
ul#listingcrumbs {margin-bottom: 15px;}
ul#listingcrumbs li {width: auto; text-align: left;padding: 4px; border: 1px solid #f1f1f1; margin-left: -1px;  margin-bottom: 15px; display: block; color: #006eaf }
ul#listingcrumbs li a {}
	ul#listingcrumbs li.current, ul#listingcrumbs li.current a {color: #8ac300;}
	
	ul#listingcrumbs li span {background: url(images/crumb_circle_off.png) 50% 50% no-repeat; width: 15px; height: 15px;float: left;  text-align: center; color: #000; margin-right: 3px; }
	ul#listingcrumbs li.current span {background: url(images/crumb_circle.png) 50% 50% no-repeat; width: 15px; height: 15px;float: left;  text-align: center; color: #000}

/* FILTER LISTS */
ul.filter {list-style: none !important;}
ul.filter li {list-style: none !important; border-bottom: 1px dashed #333;}
ul.filter li a {display: block; padding: 1px 0;}
ul.filter li a:hover {text-decoration: underline !important; background: #333;}

/* LISTING VIEW SPECIFIC */
.listing_half {float: left; width: 310px;}
ul.listing_detail_list {margin: 10px 0 0 10px; font-size: 12px; list-style: none !important;}
	ul.listing_detail_list li span { font-size: 14px;}

div.detail_section {margin: 20px 0; border-top: 1px solid #2687c5; float: left; width: 100%;}
	div.section_half {width: 50%; float: left;}

/* LISTING PREVIEW */
div.listing_preview {padding: 10px 15px; margin: 0 0 8px;}
	div.listing_preview img {float: left; padding-right:10px;}
	div.listing_preview h1 {font-size: 13px; margin: 0; padding: 0;}
	div.listing_preview p {font-size: 12px; margin: 0; padding: 0;}
	
/* OWNER PREVIEW */
ul.owner_preview {font-size: 12px; padding: 15px; border: 1px solid gray; list-style: none !important;}
	ul.owner_preview li {list-style: none;}
	ul.owner_preview li img {float: left;}

/* COLUMN CONTENT SECTIONS */
#columnI {float: left; width: 500px;}
#columnII {float: right; width: 380px; margin-left: 20px;}

	#columnII ul {margin-bottom: 20px;}

#area #columnI {float: left; width: 330px; margin: 0 0 0 20px;}
#area #columnII {float: right;  width: 250px;}


/* CUSTOM LISTING */
#custom_listing {}
	#custom_listing ul {list-style: disc; font-size: 12px; margin: 20px;}

/* FORM */
form.form {margin: 0 20px 20px; color: #8ac300; width: 450px; }
	#columnII form.form {width: 450px !important;} 
	#area #columnII form.form {width: 300px;}
form.form h4 {margin: 0 0 10px; font-weight: bold; color: #8ac300;}
form.form p {margin: 20px 0 3px; font-size: 14px !important; font-weight: bold;}
form.form div {padding: 3px 0; font-size: 12px;}
form.form label {display: block; font-size: 12px;}
form.form div.boxsection label {display: inline; font-size: 14px;}
form.form div.boxsection span {float: left; width: 150px; padding: 5px 0;}
form.form div.boxsection input {width: auto !important; float: left; margin: 0 5px !important;}

form.form input { width: 425px; font-size: 12px; padding: 2px;}
form.form select { font-size: 12px;}
form.form textarea {width: 430px; height: 100px; }
form.form input.button {float: right; margin: 20px 10px; width: auto; height: 28px; font-size: 14px; color: #2687c5; cursor: pointer;}
form.form input.short {width: 12px !important;}

form.form div.full {width: 460px; float: left;}
form.form div.full input {width: 425px;}

form.form div.half {width: 225px; float: left;}
form.form div.half input {width: 200px;}

form.form div.third {width: 133px; float: left;}
form.form div.third input, form.form div.third select {width: 90px;}

form.form input.small {width: 15px!important;}
}

/* ERRORS */
#errors {color: red}


/* THREE STEPS */
#three_steps {border: 1px solid #e8e000; margin-bottom: 20px;}
	#three_steps h4 {background: #e8e000;padding: 3px 0 5px; font-size: 14px; font-weight: bold; text-align: center; color: #000;}
	#three_steps ul {font-size: 13px;}
	#three_steps ul li {display: inline-block; width: 32%; text-align: center; padding: 5px 0; }
		#three_steps ul li.active span {background: url('images/icons/add-yellow.jpg') 0 50% no-repeat; margin: 0 0 0 -18px; padding: 0 0 0 18px;}
		#three_steps ul li.todo span {background: url('images/icons/add-grey.jpg') 0 50% no-repeat;margin: 0 0 0 -18px; padding: 0 0 0 18px}
		#three_steps ul li.done span {background: url('images/icons/accept-green.jpg') 0 50% no-repeat;margin: 0 0 0 -18px; padding: 0 0 0 18px}


/* LOCATION / RESORT LISTS */
ul.location_list {font-size: 12px; margin: 3px 10px; list-style:none !important;}
	ul.location_list li {font-style: italic; list-style:none !important;}
		ul.location_list li a {color: #FFF;}
		ul.location_list li a:hover {color: #57befa;}
		
ul.resort_list {font-size: 12px; margin: 3px 0;}
	ul.resort_list li {padding: 5px 15px;}
		/* ul.resort_list li.r1 {background: #222222;} */
		/* ul.resort_list li.r2 {background: #333333;} */

/* TABLES EWW.... I PROMISE THIS TABLE IS BEING USED FOR TABULAR DATA **/
table.listings {margin: 5px 0; width: 300px;  border-left: 1px solid #647f86; border-top: 1px solid #647f86;}
table.messages {margin: 5px 0; width: 600px;  border-left: 1px solid #647f86; border-top: 1px solid #647f86;}

table.listings th, table.listings td {text-align: left; padding: 4px 6px 3px; border-bottom: 1px solid #647f86; }
table.listings td { font: 13px Arial; border-right: 1px solid #647f86; }
	table.listings td.right { text-align: right; }
	table.listings td.name { text-align: left; }
table.listings thead th { font: bold 11px Arial; border: 1px solid #647f86; border-width: 0 1px 1px 0; background: #647f86; color: white; }
table.listings th { border-right: 1px solid #647f86; font: bold 12px Arial; }

table.messages th, table.messages td {text-align: left; padding: 4px 6px 3px; border-bottom: 1px solid #647f86; }
table.messages td { font: 13px Arial; border-right: 1px solid #647f86; }
	table.messages td.right { text-align: right; }
	table.messages td.name { text-align: left; }
table.messages thead th { font: bold 11px Arial; border: 1px solid #647f86; border-width: 0 1px 1px 0; background: #647f86; color: white; }
table.messages th { border-right: 1px solid #647f86; font: bold 12px Arial; }


/* BLOG STUFF */
.blog_category {margin: 0 0 20px 0; padding: 0 0 10px 0;}
.blog_category h1 {background: #006eaf; color: #FFF; padding: 3px; font-size: 10px; line-height: 12px; }
	.blog_category h1 a {color: #FFF;}
h2.pagetitle {background: #006eaf; color: #FFF; padding: 3px;font-size: 18px; line-height: 22px;}
div.post h2 a {color: #fff; font-weight: normal;}
	div.post h2 a:hover {color: #57befa;}

/* TABS */
#tabs { border: 1px dashed #333; padding: 3px; }
#tabs ul {font-size: 11px}
#tabs ul li {display: inline; margin: 2px 0 20px 0!important; border-right: 1px dashed #333;}
	#tabs ul li a {text-decoration: none; padding: 3px 10px; }
	#tabs ul li a:hover, #tabs ul li.current a {background: #333;}

/* OVERLAY STUFF */
.black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}
 
.white_content {
	position: absolute;
	top: 10%;
	left: 50%;
	width: 488px;
	height: 288px;
	z-index:1002;
	margin: 0 0 0 -234px;
	overflow: auto;
	
}