/********************************************************

Style sheet for www.reggaebarbangkok.com

Author: 					Joost Kiens
Author email:			joost@impendulo.net
Author website:		www.impendulo.net

Site built with MODx

Colors:
red:				#d63c3c
green: 			#37853d
yellow: 		#d7d24c
black: 			#121212
grey: 			#222222
light grey: #666666
white: 			#f3efcd


********************************************************/

/*______________LAYOUT______________*/

body{background: #222222 url(../images/pattern.jpg); text-align: center;}
#branding{background: url(../images/bg-stripes.png) repeat-x scroll;}
.main-wrapper{margin: -3px auto 0 auto; text-align: left; width: 810px; background: url(../images/bg.jpg); padding-bottom: 50px;}
.hidden {display: none;}
a.logo {float: left; margin: 25px 0 1px 50px;}
.clear-both {clear: both; line-height: 0px; font-size: 0px; margin: 0px; padding: 0px;}
#content{padding: 0 60px; min-height:300px; height: auto !important; height: 300px;}
.centered {text-align: center; margin: 0 auto;}
#mp3player {position: relative; top: 20px; margin-top: -20px; left: 250px;}


/*______________MAIN NAVIGATION______________*/
#main-nav{float: right; margin: 28px 50px 10px 0;}
#main-nav{display: inline;}
#main-nav a , .site-info-nav a{background: url(../images/nav-sprite.png) no-repeat;}
#main-nav a.home:link, #main-nav a.home:visited , .site-info-nav a.home:link, .site-info-nav a.home:visited{background-position:0px 0px;display: block; float: left; height: 37px; width: 80px;}
#main-nav a.home:active, #main-nav a.home:hover, #main-nav a.home.active:link, .site-info-nav a.home:active, .site-info-nav a.home:hover, .site-info-nav a.home.active:link{background-position:0px -44px;}
#main-nav a.gallery:link, #main-nav a.gallery:visited, .site-info-nav a.gallery:link, .site-info-nav a.gallery:visited{background-position:-80px 0px;display: block; float: left;  height: 37px; width: 113px;}
#main-nav a.gallery:active, #main-nav a.gallery:hover, #main-nav a.gallery.active:link, .site-info-nav a.gallery:active, .site-info-nav a.gallery:hover, .site-info-nav a.gallery.active:link{background-position:-80px -44px;}
#main-nav a.contact:link, #main-nav a.contact:visited, .site-info-nav a.contact:link, .site-info-nav a.contact:visited{background-position: -194px 0px;display: block; width: 190px;  height: 37px;float: left;}
#main-nav a.contact:active, #main-nav a.contact:hover, #main-nav a.contact.active:link, .site-info-nav a.contact:active, .site-info-nav a.contact:hover, .site-info-nav a.contact.active:link{background-position: -194px -44px;}

/*______________FONTS______________*/
body {color: #f3efcd;}
h1 {font-size: 2.5em; font-family: georgia, serif;}
h2 {font-size:1.4em; font-family: georgia, serif; margin-bottom: 12px; padding-bottom: 2px border-bottom: 1px dashed #f3efcd;} 
.copyright-backlink {color: #666; margin-left: 50px; width: 810px;}
div.hr, div.hr-long {height: 26px; margin: 12px 0 20px 0;}
div.hr {background: url(../images/hr-small.png) no-repeat scroll center;}
div.hr-long {background: url(../images/hr-long.png) no-repeat scroll center;}
div.hr hr, div.hr-long hr { display: none;}
p {margin: 8px 0;}
a:link, a:visited {color: #d7d24c;}
a:hover, a:active {color: #d63c3c;}

/*______________GRAPHIC ELEMENTS______________*/
.tape-tl {z-index: 10; position: relative; bottom: 5px; left: -23px;}
.tape-tr {z-index: 10; position: relative; bottom: -05px; right: -528px;}
.tape-m {z-index: 10; position: relative; bottom: 15px; right: -180px;}

div.frontpage-description-gallery-wrapper{background: #222 url(../images/textbox-bg.jpg);/* height: 310px; */margin: -70px 0px 50px 0px; border: 1px solid #000;} 
img.frontpage-description{float: left;}
div.frontpage-gallery {float: left; margin:30px 0 20px 10px;}
#myGallery1{border: 1px solid #000;}
div.contact-description {float: left; margin: 30px; width: 200px;}
div.gallery-description {float: left; margin: 30px; width: 190px;}
.picturecontainer {margin-right: 30px;}
.thumbscontainer{padding: 0 2px;margin: 15px 0;}

#maxImage, .thumbnail {border: 1px solid #000;}

div.content-box-small {padding: 15px; background: #222 url(../images/textbox-bg.jpg); width: 440px; float: left; margin-top: -30px;border: 1px solid #000;}
div.content-column-small {width: 210px; float: left; padding: 5px;}
ul.editor-menu{float: right; background: #222;font-size: 1.2em; padding: 10px; margin-top: 20px;}
ul.editor-menu li {display: inline; padding: 0 20px;}
ul.editor-menu li a:hover {background: #000;}
div.face {width: 149px; height: 303px; background: url(../images/face.gif) no-repeat; float: right; margin-top: -20px;}
div.centered {text-align: center;}
div.site-info-border {background: url(../images/border.gif) repeat-x; height: 9px;}
div#site-info {padding:15px 70px 5px 0px; text-align: center; background: #222 url(../images/textbox-bg.jpg)}
.login a:link,.login a:visited{color: #222;}
.login a:active,.login a:hover{color: #d7d24c;}
.site-info-nav {margin: 0px 0px 20px 0px; margin: 0 auto; width: 690px; padding-left: 80px;}
.site-info-nav  a {margin: 0 50px;}
.g-maps{margin: 10px;}
.g-maps div {color: #000;}
.main-gallery-big{margin-top: 30px; float: right;}
#map {width: 420px; height: 264px; border: 1px solid #000;}


/*______________FORMS______________*/
.login-form {margin: 30px;}
form.contact-form{float: left; width: 410px; margin-top: 20px;}
legend {color: #666; padding: 0 5px; margin-left: 15px;}
input, textarea {margin-bottom: 8px;}
fieldset {border: 1px solid #121212; padding: 15px; margin: 0 15px 30px 0;}
form{ margin: 0; padding: 0;}
label {width: 12em; float: left; display:block;text-align: right; margin-right: 0.5em;}
button.btn {border: none;margin-top: 15px;margin-left: 12.2em; padding: 0;cursor: pointer; color: inherit; background: #121212 url(../images/button.gif) -1px 0px; width: 138px; height: 30px; }
button.btn:hover, button.btn:focus {background: #121212 url(../images/button.gif) -1px -30px;}
.inputbox{background: #222;color: #f3efcd;border:1px solid #666; padding: 3px; font-family: inherit; font-size: inherit;}
.inputbox:focus{background: #121212; border:2px solid #666; padding: 2px;}
textarea.inputbox {width: 180px;}
label.no-width {width: 100%; text-align: left;}
.shortfields label {width: 4em;}
a.button, input.button {border: 0; background: #333 url(../images/button-bg.jpg) repeat-x; color: #f3efcd; margin: 3px 5px; padding: 5px 12px; border: 1px solid #000; cursor: pointer; font-size: 0.9em; line-height: 1.45;}
a.button:hover, input.button:hover {color: #fff; background: #000 url(../images/button-bg-hover.jpg) repeat-x;}

/*______________EDITOR______________*/
div.content-box-edit {background: #222 url(../images/textbox-bg.jpg); border: 1px solid #000; padding: 15px; margin-top: 30px;}
div.edit-text label{float: none; text-align: left;}
.managepicturecontainer {width: 47%; float: left; margin: 20px 7px; background: #333; border: solid 1px #000;}
.managepicture {margin: 15px; padding: 3px; background: #f3efcd; border: 1px solid #000;}
.shortfields {margin: 15px;}
.deleteform {position:relative; left: 153px; top: -43px;}