/*
Name: Main Style Sheet
Author: Ludek Cernocky; ludek@faceit.cz, www.faceit.cz
Date: 20.9.2008
Note: Donīt steal, just watch and learn. This CSS is copyrighted like all other stuff on this domain ;)

1. Main
2. Construction
3. Header
	3.1 Logo
	3.2 Menu
	3.3 Breadcrumb
4. Content
	4.1 Search
	4.2 How does it work?
	4.3 Search results
	4.4 Detail of restaurant / cafe
5. Footer
6. Other visuals
7. Send invitation ajax window

*/

/* 1. Main
-----------------------------*/
* {margin:0; padding:0;}

html {background: #736C5C;}

body {background: #736C5C; color:#222; font-family: sans-serif; font-size: medium; text-align:center; /* for older browsers */}

p {line-height: 140%; margin: 0.3em 0; padding: 0.1em 0 0.5em 0;}

.hide, hr {display: none;}

.clear {background:none; border: none; clear:both; float:none; display:block; height: 0px; line-height: 0px; font-size:0; width:auto !important;  padding: 0 !important; visibility: hidden;}

input, textarea {font-family: sans-serif; font-size: 100%;}

/* links */
a {color: Black; outline: none;}
a:hover {color:#333; text-decoration: none;}

/* headlines */
h1 {color: White; font-size: 219.2%;}
h2 {color: #333; font-size: 166.7%;}
h3 {color: #444; font-size: 125%;}

/* 2. Construction
-----------------------------*/
#main {background: #FFF8D7 url('../img/bg.jpg') repeat-x 0 0; font-size: 75%;}

div div.inside, #header {margin: 0 auto; position: relative; width: 922px;}

#header {background: #49453C url('../img/bg.jpg') repeat-x 0 0; height: 210px;}
#content {min-height: 500px; padding: 0 0 1em 0; text-align: justify;}
#footer {background: #736C5C url('../img/footer.jpg') repeat-x 0 0; min-height: 30px; padding-top: 1.7em;}

* html #content {height: 500px;} /* IE 6 */
* html #footer {height: 30px;}  /* IE 6 */

/* 3. Header
-----------------------------*/

/* 3.1 Logo */
h1 a {padding-top: 15px;}
h1 a, h1 a:link, h1 a span {color: White; cursor: pointer; display: block; float: left; overflow: hidden; width: 451px; height: 114px; position: relative; left: 0px; top: 46px; z-index: 10;}
h1 a span {background: url('../img/logo.jpg') no-repeat 0 0; position: absolute; top: 0; left: 0;}
h1 a:hover {color: #999;}

/* 3.2. Menu */
menu {position: absolute; top: 6px; right: 0; z-index: 1000;}
menu li {background: url('../img/menu-spacer.jpg') no-repeat 100% 50%; display: inline; list-style: none; margin: 0 0 0 1em; padding-right: 1.3em; position: relative;}
menu li a {color: #ABA391; text-decoration: none;}
menu li a:hover {color: #d0c8b6;}

menu li.search a {background: url('../img/menu-search.jpg') no-repeat 0 50%; padding-left: 20px;}
menu li.search a:hover {background: url('../img/menu-search-hover.jpg') no-repeat 0 50%;}

/* fulltext */
menu li.search form {background: #35322B; position: absolute; left: 0; top: 20px; display: none; padding-top: 10px; height: 40px; width: 100%; z-index: 1000;}
* html menu li.search form {width: 235px;} /* IE 6 */
menu li.search form input {display: inline; height: 18px;}
menu li.search form input.button {border: none; background: Black; color: #CCC; cursor: pointer; height: 21px; margin: 0 0 0 5px; padding: 1px 2px 3px 2px; position: relative; top:1px;}
menu li.search form input.button:hover {color: #C2E968;}

/* 3.3 Breadcrumb */
#header p {background: #B3DC50 url('../img/bg.jpg') repeat-x 0 -183px; color: #8FB51F; font-size: 91.7%; position: absolute; left: 0; top: 180px; height: 30px; width: 922px; text-align: left;}
#header p a {color: #72940D;}
#header p a:hover {color: #607F05}
#header p span {color: #4C6600;}


/* 4. Content
-----------------------------*/
#content h2 {margin: 0.25em 0 1em 0;}
#content .inside {padding-top: 15px; padding-bottom: 15px;}

/* 4.1 Search */
#search {background: url(../img/search/bg.gif) no-repeat 0 0; margin-bottom: 2em; position: relative; height: 479px; width: 922px;}

#search div.google-map {position: absolute; left: 11px; top: 11px; height: 450px; width: 620px;}

#search form.filters {background: #4C4535 url(../img/search/filters.jpg) no-repeat 0 0; position: absolute; right: 10px; top: 11px; height: 450px; width: 281px;}

#search form.filters fieldset {border: none;}
#search form.filters legend {display: none;}

#search form.filters fieldset p {position: relative; height: 69px; margin: 0; padding: 0;}
#search form.filters fieldset p label {color: White; font-size: 91.7%; position: relative; top: 30px; padding-left: 15px; padding-right: 10px;}

/* location */
#search form.filters fieldset p.location label, #search form.filters fieldset p.location label span {display: block; float: left; top: 0; left: 5px; height: 68px; width: 82px; overflow: hidden; z-index:500;}
#search form.filters fieldset p.location label span {background: url('../img/search/location.jpg') no-repeat 0 0; position: absolute; top: 0; left: 0; z-index: 500;}
#search form.filters fieldset p.location.active label span {background-position: 0 -68px;}
#search form.filters fieldset p.location input {background: url('../img/search/location.gif') no-repeat 0 0; border: none; margin: 0; position: absolute; top: 23px; margin-left: -8px; padding: 4px 5px 0 5px; overflow: hidden; height: 21px; width: 168px;}
@media all and (-webkit-min-device-pixel-ratio:10000),
		   not all and (-webkit-min-device-pixel-ratio:0) {
		#search form.filters fieldset p.location input {left: 105px;} /* Opera 7.2 up */
}

/* checkboxes */
#search form.filters span.checkbox {cursor: pointer; width: 261px; height: 48px; padding: 0 5px 0 0; display: block; position: absolute; left: 5px; top: 17px;}
 
#search form.filters .wifi span.checkbox {background: url('../img/search/wifi.jpg') no-repeat 0 0;}
#search form.filters .breakfast span.checkbox {background: url('../img/search/breakfast.jpg') no-repeat 0 0;}
#search form.filters .patio span.checkbox {background: url('../img/search/patio.jpg') no-repeat 0 0;}
#search form.filters .smoke span.checkbox {background: url('../img/search/smoke.jpg') no-repeat 0 0;}
#search form.filters span.checkbox:hover {background-position: 0 -48px;}

/* search button */
#search form.filters blockquote button, #search form.services blockquote button {background: transparent url(../img/search/search.jpg) no-repeat scroll 0 0; border:none; cursor:pointer; overflow:hidden; position:absolute; left: 5px; top:350px; height:100px; padding:100px 0 0; width:276px;}
#search form.filters blockquote button:hover, #search form.services blockquote button:hover {background-position: 0 -100px;}


/* 4.2 How Does It Work? */
#how-does-it-work:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#how-does-it-work {display: inline-block; margin: 0 0 1em 0;}
* html #how-does-it-work {display: block; height: 5%;} /* fixing clear for IE 6 */
#how-does-it-work div {float: left; margin-right: 7px; width: 230px;}
#how-does-it-work div ul {margin: 0;}
#how-does-it-work div ul li {background: url('../img/how-does-it-work/arrow.gif') no-repeat 0 50%; list-style: none; padding: 0.2em 0 0.3em 2.2em;}
#how-does-it-work div h3 {margin: 135px 0 15px 0;}
#how-does-it-work div p {line-height: 150%;}

#how-does-it-work div.business {background: url('../img/how-does-it-work/business.jpg') no-repeat 0 0;}
#how-does-it-work div.sunday {background: url('../img/how-does-it-work/sunday.jpg') no-repeat 0 0;}
#how-does-it-work div.evening {background: url('../img/how-does-it-work/evening.jpg') no-repeat 0 0;}
#how-does-it-work div.mobile {background: url('../img/how-does-it-work/mobile.jpg') no-repeat 0 0; margin: 0; width: 209px;}
#how-does-it-work div.mobile p {padding-right: 10px;}

/* 4.3 Search Results */
#search-results {margin-bottom: 1.5em;}
#search-results blockquote {background: White; border: 1px solid #EEE; height: 42px; margin: 0.3em 0 0; padding: 0.4em; overflow: hidden; position: relative; width: 910px;}
#search-results blockquote.dark {background: #F5F5F5;}

#search-results blockquote h3, #search-results blockquote p {padding-left: 5px;}

#search-results blockquote address {background: url('../img/results/address.jpg') no-repeat 0 0; position: absolute; top: 8px; right: 8px; height: 36px; width: 283px; margin:0; padding: 0;}

#search-results blockquote address a, #search-results blockquote address a span {color: White; cursor: pointer; display: block; float: right; position: relative; height: 22px; padding: 10px 0 0 0; text-align: center; overflow: hidden;}
#search-results blockquote address a span {position: absolute; top: 0px; left: 0px; z-index: 500;}

#search-results blockquote address a.send {top: 2px; right: 2px;}
#search-results blockquote address a.send, #search-results blockquote address a.send span {width: 192px;}
#search-results blockquote address a.send span {background: url(../img/results/send.jpg) no-repeat 0 0;}
#search-results blockquote address a.send:hover span {background-position: 0 -32px;}

#search-results blockquote address a.detail {left: -2px;top: 2px;}
#search-results blockquote address a.detail, #search-results blockquote address a.detail span {width: 87px;}
#search-results blockquote address a.detail span {background: url(../img/results/detail.jpg) no-repeat 0 0;}
#search-results blockquote address a.detail:hover span {background-position: 0 -32px;}

/* 4.4 Detail of restaurant / cafe */
#search.detail {background: url('../img/detail/bg.gif') no-repeat 0 0;}

#search.detail div.info {background: #EEE url(../img/detail/info.jpg) no-repeat 0 0; position: absolute; right: 0px; top: 0px; height: 470px; width: 276px;}

#search.detail div.info h3, #search.detail div.info p, #search.detail div.info address, #search.detail div.info blockquote, #search.detail div.info div.services {margin-left: 10px; margin-right: 10px; text-align: left;}

#search.detail div.info h3 {color: Black; font-size: 150%; line-height: 100%; margin-top: 13px;}
#search.detail div.info p {margin-top: 0;}

#search.detail div.info address {color: #333; font-size: 125%; font-style: normal; font-weight: bold; margin-top: 15px;}
#search.detail div.info blockquote {color: #444; line-height: 140%; margin-top: 5px;}
#search.detail div.info blockquote a {color: #444;}

/* services */
#search div.info div.services {position: absolute; margin-left: 0; left: 0px; top: 200px;}
#search div.info div.services blockquote, #search div.info div.services p {margin: 0 0 0 1px;}
#search div.info div.services h4 {color: #333; font-size: 112.5%; margin-bottom: 0.2em;}
#search div.info div.services p {font-weight: bold; margin: 0; height: 26px; padding-top: 10px; padding-left: 60px;}
#search div.info div.services p acronym {border: none; color: #8DBC00;}

#search div.info div.services p.wifi {background: url('../img/detail/ico-wifi.gif') no-repeat 0px 0;}
#search div.info div.services p.breakfast {background: url('../img/detail/ico-breakfast.gif') no-repeat 0px 0;}
#search div.info div.services p.patio {background: url('../img/detail/ico-patio.gif') no-repeat 4px 0;}
#search div.info div.services p.smoke {background: url('../img/detail/ico-smoke.gif') no-repeat 0px 0;}

/* send invitation */
#search div.services blockquote a, #search div.services blockquote a span {background: url('../img/detail/send.gif') no-repeat 0 0; cursor: pointer; display: block; width: 257px; height: 70px; top: 190px; left: 0px; position: absolute;}
#search div.services blockquote a span {position: absolute; left: 0; top: 0;}
#search div.services blockquote a span:hover {background-position: 0 -70px;}

/* 5. Footer
-----------------------------*/
#footer a {color: #26231D; text-decoration: none;}
#footer a:hover {color: #FFF8D7;}

#footer ul {float: left;}
#footer ul li {background: url('../img/footer-spacer.jpg') no-repeat 100% 60%; display: inline; list-style: none; margin: 0 1em 0 0; padding-right: 1.5em;}

#footer p {float: right; margin: 0; padding: 0;}

#footer p a, #footer p a span {cursor: pointer; display: block; float: right; position: relative; top: -5px; width: 39px; height: 28px;}
#footer p a span {background: url('../img/footer-faceit.jpg') no-repeat 0 0; position: absolute; top: 0; left: 0;}
#footer p a:hover span {background-position: 0 -28px;}

#footer p em {display: none;}

/* 6. Other visuals
-----------------------------*/
#absolute {background: url('../img/cup.jpg') no-repeat 0 0; position: absolute; right: 50px; top: 45px; height: 207px; width: 251px; z-index: 500;}

/* 7. Send Invitation
-----------------------------*/
#TB_window h1 {display: none;}
#TB_window #TB_ajaxContent form {margin: 0;}
#TB_window #TB_ajaxContent form h3 {color: White; font-size: 17px; margin: 5px 0 1px 95px; padding: 0;}
#TB_window #TB_ajaxContent form p {color: #222; font-weight: bold; margin: 1px 0 25px 95px; padding: 0;}
#TB_window #TB_ajaxContent form address {color: #222; font-style: normal; font-weight: bold; font-size: 15px; line-height: 150%; margin: 10px 0 0 95px; padding: 0;}
#TB_window #TB_ajaxContent form dl {margin: 3em auto 0 auto; padding-left: 25px; width: 235px;}
#TB_window #TB_ajaxContent form dl dd {margin: 0 0 0.9em 0;}
#TB_window #TB_ajaxContent form dl dd input, #TB_window #TB_ajaxContent form dl dd textarea {width: 100%;}
#TB_window #TB_ajaxContent form dl dd button {background: url('../img/invitation/send.jpg') no-repeat 0 0; border: none; cursor: pointer; padding:0; position: relative; top: 5px; width: 238px; height: 53px; padding-top: 53px;}
#TB_window #TB_ajaxContent form dl dd button:hover {background-position: 0 -53px;}