/**************************************************************
 *	CSS Framework, v.1.0
 *	
 *	Author: Kamil Kuczmera 
 *	E-mail: kamil@kuczmera.com
 **************************************************************/

/* Global reset */
*               { margin: 0; padding: 0; }
img             { border: 0; }

/* Paddings & margins */
.margin-top     { margin-top: 25px }
.margin-bottom  { margin-bottom: 25px }
.margin-left    { margin-left: 50px }
.margin-right   { margin-right: 25px }
.padding-both   { padding: 17px 0 }
.no-padding     { padding: 0; margin: 0 }

/* Floats */
.left           { float: left }
.right          { float: right }
.clear          { clear: both }

/* Text positions */
.text-left      { text-align: left }
.text-right     { text-align: right }
.text-center    { text-align: center }
.middle         { vertical-align: middle }

/* Popular selectors styles */
p               { text-align: left; padding: 7px 10px; }
h1              { font: normal 28px Arial, Helvetica, sans-serif; } 
h2              { font: normal 22px Tahoma, Arial, Helvetica, sans-serif; }
h3              { font: bold 14px Tahoma, Arial, Helvetica, sans-serif; } 
a               { color: #d91f00; text-decoration: underline; outline: none; cursor: pointer; }
a:hover         { text-decoration: none; }
:focus          { -moz-outline-style: none; }
ul, ol          { padding: 10px 0 10px 35px; }
ul li, ol li    { padding: 3px 0; }

/* Widths */
.px25           { width: 25px }
.px50           { width: 50px }
.px75           { width: 75px }
.px100          { width: 100px }
.px125          { width: 125px }
.px150          { width: 150px }
.px175          { width: 175px }
.px200          { width: 200px }

/* Other classes */
.submit         { cursor: pointer; }
.logo           { color: #5c5e55; }
.logo em        { color: #d91f00; font-style: normal; }

.back						{ text-align: center; }

/* Tables */
table { width: 95%; margin: 25px 0; }
table tr th { padding: 2px 5px; color: #fff; background-color: #e32000; }
table tr td { padding: 2px 5px; }
	table .odd td { background-color: #f8f9f6; }
	table .even td { background-color: #edefe7; }
table .edit td { background-color: #e1e3de; border: 10px solid #fff; }

table tr td .option { padding-left: 20px; margin-right: 10px; color: #a2a49b; text-decoration: none; background-position: left center; background-repeat: no-repeat; }
table tr td .option:hover { color: #e32000; }
	
	.active { background-image: url(../images/icons/tick.png); }
	.edit { background-image: url(../images/icons/pencil.png); }
	.remove { background-image: url(../images/icons/minus_circle.png); }

table form { padding: 5px; }	
table form fieldset { border: 1px solid #fff; margin-top: 3px; }
table form fieldset p { clear: left; }
table form fieldset p label { float: left; width: 90px; }
table form fieldset p .input,
table form fieldset p select { float: left; width: 125px; margin-right: 10px; font-size: 10px; border: 1px solid #a2a49b; padding: 2px; }
table form fieldset p select { width: 130px; }
table form .submit { padding: 5px 0; }

/**************************************************************
	Layers
**************************************************************/	
html {	
	background: #f0f2eb url(../images/layout/html-bg.gif) 0 0 repeat-x;
}
body {
	background: url(../images/layout/body-bg.gif) center 65px no-repeat;
	font: 11px Tahoma, Helvetica, sans-serif;
	color: #727171;
	text-align: center;	
	line-height: 150%;
}

/*************************** 
* 	Top 
****************************/
#top { height: 190px; background: url(../images/layout/top-bg.gif) center bottom no-repeat; }	
	
	/* Logo */
	#top h1 { float: left; height: 45px; padding: 0; margin: 20px 0 34px; }	
	#top h1 a { float: left; width: 140px; height: 32px; background: url(../images/layout/logo.gif) 0 0 no-repeat; text-indent: -99999px; }
	#top h2 { float: left; height: 20px; padding-left: 23px; line-height: 20px; font-size: 10px; font-weight: normal; color: #a2a49b; border-left: 1px solid #ecedea;
						margin-top: 25px; }	
	
	/* Menu */	
	#top ul { clear: both; height: 45px; padding: 0 0 0 320px; }
	#top ul li { float: left; width: 120px; padding: 0 20px 0 0; list-style: none; }
	
	#top ul li a { float: left; width: 120px; height: 45px; opacity: 0.5; filter: alpha(opacity = 50); background-position: 0 0; background-repeat: no-repeat; 
								text-indent: -99999px; }
	#top ul li a:hover, #top ul .current a { opacity: 1; filter: alpha(opacity = 100); }
		
		#item01 a { background-image: url(../images/layout/menu/01.gif) }
		#item02 a { background-image: url(../images/layout/menu/02.gif) }
		#item03 a { background-image: url(../images/layout/menu/03.gif) }
		
	#top ol { float: right; padding: 0; font-size: 10px; padding-top: 10px; line-height: 45px; }
	#top ol li { float: left; list-style: none; margin-right: 10px; }
	#top ol li a { color: #a2a49b; text-decoration: none; }
	#top ol li a img { vertical-align: middle; }
	#top ol li a:hover { color: #db2800; }
	
/*************************** 
* 	Container
****************************/
#container { width: 768px; margin: 0 auto; padding-bottom: 12px; text-align: left; background: url(../images/layout/main-bg.gif) center bottom no-repeat; }	
#main { background-color: #fff; overflow: hidden; height: 100%; }	
	
	/* Search */
	#search { float: right; width: 540px; height: 60px; padding: 0 15px 0 0px; background: url(../images/layout/content/search-bg.gif) right bottom no-repeat; }
	#search fieldset { float: right; border: 0; }
	#search fieldset .input { padding: 2px 5px; width: 125px; border: 3px solid #dadbd7; border-right-width: 8px; border-left-width: 8px; margin-right: 10px; }
	#search fieldset .input:focus { border-color: #a2a49b; }
	#search fieldset .search  { width: 63px; height: 22px; line-height: 22px; text-align: center; font-weight: bold; font-size: 11px; color: #fff; border: 0;
							background: url(../images/layout/content/submit-bg.gif) no-repeat; cursor: pointer; }
	
	#search p.left { line-height: 30px; font-size: 10px; padding: 0; }
	#search p.left a { text-decoration: none; color: #d91f00; }
	#search p.left a:hover { text-decoration: underline; }
		
	/*************************** 
	* 	Content
	****************************/
	#content { float: right; width: 560px; padding-bottom: 25px; }
		
		/* Header */
		#content h1 { padding-left: 40px; margin: 15px 0 5px; font-size: 22px; line-height: 26px; background: url(../images/layout/content/header-bg.gif) left center no-repeat; letter-spacing: -1px; }
		#content h1 strong { color: #e32000; line-height: 26px; font-size: 26px; letter-spacing: -2px; margin-right: 5px; }
		
		/* Frontpage */
		.stats { line-height: 16px; padding: 5px 0 0 35px; }
		.stats li { list-style: none; padding: 8px 0 8px 25px; background: url(../images/layout/content/arr-1.gif) 7px 14px no-repeat; }
		.stats strong { font-size: 13px; color: #e32000; line-height: 16px; }
		.stats a { color: #e32000; }
		
		/* Spots */
		dl.spot { padding: 8px 0 8px 15px; margin: 15px 0; }
		dl.spot.left { float: left; width: 255px; background: url(../images/layout/content/spot-border.gif) right top repeat-y; }
		dl.spot.right { float: right; width: 260px; margin-right: 15px; }
		
		dl.spot dt { margin-bottom: 15px; font-size: 20px; letter-spacing: -1px; }
		dl.spot dt a { color: #727171; text-decoration: none; }
		dl.spot dt a:hover { color: #e32000; }
		dl.spot dt small { float: right; padding: 0 15px 0 15px; margin-right: 10px; font-size: 10px; font-weight: normal; letter-spacing: normal; background-position: right center; background-repeat: no-repeat; }
			
			dl.spot dt small.free { background-image: url(../images/icons/star_small.png); }	
			dl.spot dt small.pay { background-image: url(../images/icons/star_small_empty.png); }
		
		dl.spot dd { line-height: 19px; font-size: 13px; color: #e32000; font-weight: bold; }
		dl.spot dd strong { float: left; width: 90px; font-weight: normal; font-size: 11px; color: #aaada1; }
		dl.spot dd span { display: block; margin-left: 90px; }
		dl.spot dd a {  }
		dl.spot dd a:hover { color: #e32000; }
		
		
		dl.spot .more { text-align: left; margin: 10px 25px 0 0; font-size: 11px; font-weight: normal; }
		dl.spot .more a { padding-right: 10px; color: #727171; text-decoration: none; background: url(../images/layout/content/arr-1.gif) right 5px no-repeat; }
		dl.spot .more a:hover { text-decoration: none; }
		
		/* Detail */
		dl.spot.detail { height: 170px; padding: 5px 0 0 145px; margin: 0 20px 15px 0; border-bottom: 1px solid #dedede; background: url(../images/layout/content/wireless.gif) 15px top no-repeat; }
		dl.spot.detail dt { font-size: 18px; letter-spacing: 0; padding: 0 0 0 25px; margin-bottom: 10px; background-position: left center; background-repeat: no-repeat; }
		
			dl.spot.detail dt.free { background-image: url(../images/icons/star.png); }	
			dl.spot.detail dt.pay { background-image: url(../images/icons/star_empty.png); }	
		
		dl.spot.detail dd strong { width: 110px; margin-left: 27px; }
			
			form dl.spot.detail { height: 250px; }
			form dl.spot.detail .input,
			form dl.spot.detail select { width: 150px; background: #fff; border: 3px solid #dadbd7; border-left-width: 6px; border-right-width: 6px; font: 11px Tahoma, Arial, Helvetica, sans-serif; padding: 3px 5px; margin-bottom: 5px; vertical-align: middle; }
			form dl.spot.detail select { width: 170px; }
			form dl.spot.detail .input:focus,
			form dl.spot.detail select:focus { border-color: #a2a49b; }
			form dl.spot.detail p { margin: 5px 0 0 17px; }
			form dl.spot.detail .submit { width: 63px; height: 22px;  padding: 0; line-height: 22px; text-align: center; font-weight: bold; font-size: 11px; color: #fff; border: 0;
							background: url(../images/layout/content/submit-bg.gif) no-repeat; cursor: pointer; }
							
		/* Google Map */
		#spot-map { height: 200px; margin: 25px 20px 0 0; border: 1px solid #d0d2ca; border-bottom: 0; background: url(../images/others/loader.gif) center center no-repeat; cursor: move; }
		#spot-map p { width: 300px; margin: 130px auto 0; font-weight: bold; text-align: center; }
		
		#spot-size { height: 20px; margin-right: 20px; background: #e1e3de url(../images/others/spot-size.gif) right bottom no-repeat; cursor: n-resize; 
		border: 1px solid #d0d2ca; border-top: 0; }
		
		/* Pagination */
		.pagination { clear: both; text-align: center; padding: 15px 20px 20px 35px; }
		.pagination strong { padding: 2px 4px; background-color: #d32802; color: #fff; }
		.pagination a { padding: 0 3px; margin: 3px 0; font-size: 10px; border: 1px solid #9c9e94; color: #9c9e94; text-decoration: none; }
		.pagination a:hover { border-color: #d32802; color: #d32802; }
		
	/*************************** 
	* 	Left column
	****************************/
	#left { float: left; width: 177px; padding-left: 11px; }			
		
		/* Header */	
		#left h1 { height: 40px; line-height: 40px; padding-left: 10px; font-size: 11px; color: #fff; font-weight: bold; font-family: Tahoma; background: url(../images/layout/left/header-1.gif) no-repeat; }
		#left h1.red { background-image: url(../images/layout/left/header-2.gif) }
		
		/* Menu */
		#left ul { padding: 0 0 13px; margin-bottom: 11px; background: url(../images/layout/left/menu-bg.gif) 0 bottom no-repeat; }
		#left ul li { list-style: none; padding: 5px 10px; margin: 0; overflow: hidden; background-color: #edefe7; border-bottom: 1px solid #e2e5da; }
		#left ul li a { float: left; width: auto; color: #6a6c66; text-decoration: none; padding: 0 3px; }
		#left ul li a:hover { text-decoration: underline; }
		
/*************************** 
* 	Footer
****************************/	
#footer { clear: both; height: 35px; padding: 10px 20px 0; position: relative; top: -25px; background: url(../images/layout/footer-bg.gif) right top no-repeat; }
#footer p { position: relative; top: 20px; }

#footer .left { font-size: 10px; color: #9c9f94; }
#footer .left a { color: #9c9f94; text-decoration: none; }
#footer .left a:hover { text-decoration: underline; }