/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

* Friends of the 40s
* Filename: style.css
* Version: 2.0.0 (19-06-2008) DD-MM-YYYY
* Website: http://www.friendsofthe40s.com/
* Author: Dave Musgrove
* Description: Handles the site layout.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


/* _Body
==========================================*/

html { height: 100%; margin-bottom: 1px; }
body {
	margin: 0;
	padding: 0;
	background: #7e9176;
	font-family: Arial, "Times New Roman", Times, serif;
	color: #510a1b;
	font-size: 100%;
}
p { 
	font-family: Arial, "Times New Roman", Times, serif;  
	line-height: 13px; 
	font-size: 12px;
	margin: 0 0 12px 0; 
}
img { border: 0px; }

.events-form { background: #fff; } 
input, select, textarea { background: #fff; border-color: #978868; margin: 2px; padding: 2px; border: 1px solid; }

#line { height: 2px; background: #796846; }

/* _Wraps
==========================================*/

#header-wrap { background: #796846 url(../images/back-header1.gif) repeat-x; }
#content-wrap { margin: 0 auto; width: 925px; padding: 0 16px; background: url(../images/back-main.jpg) repeat-y; overflow: hidden; }

#date-col { height: 25px; width: 911px; float: left; margin-top: 10px; }
#left-col { width: 205px;  float: left; }
#middle-col { width: 552px; float: left; padding: 0 15px 0 0; }
#right-col { width: 140px; float: left; }
#footer-clear { width: 911px; float: left; }
#clear-fix { clear: both; }

/* _Containers
==========================================*/

#header { height: 284px; background: url(../images/back-header.jpg) center no-repeat; }
#tagline { height: 29px; background: url(../images/tagline.gif) center no-repeat; }

#v-spacer { width: 1px; height: 1170px; float: left; }
#content { width: 550px; }
#content-admin { width: 706px; }
#footer { text-align: center; }
#footer a { color: #510a1b; font-size: 13px; }
#footer a:hover { color: #000; text-decoration: none; }

#date-block { width: 908px; height: 18px; text-align: right; }
#date-block p { font-size: 14px; text-transform: uppercase; margin: 0; }
#date-block p span { float: left; }

#have_event-block { width: 138px; margin: 15px 0 0 0; }
#have_event-block p { width: 138px; padding: 5px 0 5px 10px; font-size: 13px; line-height: 22px; }
#have_event-title { height: 48px; background: #500 url(../images/title-have_event.gif) no-repeat; }
#have_event-block img { margin: 0 0 5px 0; }

#advert-block {
	width: 132px;
	padding: 10px 0;
	text-align: center;
	background: url(../images/back-main.jpg) -10px;
	border: 3px solid #796846;	
}

.gallery { width: 550px; text-align: center; }
.gallery_pic { float: left; margin: 3px; width: 126px; height: 135px; padding: 2px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 10px; }
.gallery_clear { clear: right; width: 550px; font-size: 2px; line-height: 2px; }

#gallery-form { width: 549px; height: 527px; border: 1px dashed #000000; }

/* _Navigation
==========================================*/

#nav-block { width: 181px; height: 500px; background: url(../images/back-main.jpg) -10px; border: 3px solid #796846; position: absolute; top: 37px; left: 17px; }
#nav-block img { margin-left: 9px; }
#nav-title { height: 48px; background: #500 url(../images/title-nav.gif) no-repeat; margin-bottom: 13px; }

/* _Events Listings
==========================================*/

#event-form { width: 549px; height: 727px; background: url(../images/back-form.jpg) no-repeat; }

.list-events { width: 548px; height: 205px; position: relative; background: #c9c192; margin: 0 0 15px 0; }
.list-events p { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 0; }
.list-events p a { color: #700; text-decoration: none; }
.list-events p a:hover { color: #000; }
.list-events p span { font-family: "Courier New", Courier, monospace; font-size: 12px; color: #333; font-weight: bold; }

.event-small { width: 532px; height: 150px; background: #ffffff; position: relative; top: 54px; }
.event-title { font-family: Arial, Helvetica, sans-serif; width: 532px; height: 18px; position: absolute; top: 7px; left: 9px; font-size: 18px; color: #700; line-height: 24px; text-transform: uppercase; }
.event-date { font-family: Arial, Helvetica, sans-serif; font-weight: bold; width: 200px; height: 17px; position: absolute; top: 30px; left: 9px; font-size: 12px; color: #333; }
.event-textblock { font-family: Arial, Helvetica, sans-serif; width: 548px; height: 124px; position: absolute; top: 52px; left: 0px; background: #f8ecd0; border-top: 2px solid #796846; border-bottom: 2px solid #796846; overflow: auto; }
.event-text { font-family: Arial, Helvetica, sans-serif; width: 480px; padding: 10px 20px; font-size: 12px; color: #333; }
.event-email { font-family: Arial, Helvetica, sans-serif; font-weight: bold; width: 396px; height: 14px; position: absolute; top: 186px; left: 370px; font-size: 12px; color: #333; }
.event-tel { font-family: Arial, Helvetica, sans-serif; font-weight: bold; width: 300px; height: 17px; position: absolute; top: 185px; left: 10px; font-size: 12px; color: #333; }
.event-flag { width: 45px; height: 22px; position: absolute; top: 33px; left: 518px; }
.event-ad { width: 274px; height: 25px; position: absolute; top: 30px; left: 240px; }

.event-thismonth { align: center; font-size: 18px; color: #000; font-weight: bold;}
.event-calyear { background-color: #510a1b; color: #FFF0BF;	font-weight: bold; }
.event-calyear a { background-color: #510a1b; color: #FFF0BF; font-weight: bold; text-decoration: none; }
.event-calyear a:hover { background-color: #510a1b; color: #FFF0BF; font-weight: bold; text-decoration: none; }

.event-calmonth { background-color: #FFF0BF; color: #510a1b; }
.event-calmonth a { background-color: #FFF0BF; color: #510a1b; text-decoration: none; }
.event-calmonth a:hover { background-color: #FFF0BF; color: #510a1b; text-decoration: none; }

/* _Listing
==========================================*/

#listings-form { width: 549px; height: 727px; background: url(../images/back-listingsform.jpg) no-repeat; }

.list-organisations { width: 548px; height: 205px; position: relative; background: #caccb7; margin: 0 0 15px 0; }
.list-organisations p { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 0; }
.list-organisations p a { color: #700; text-decoration: none; }
.list-organisations p a:hover { color: #000; }
.list-organisations p span { font-family: "Courier New", Courier, monospace; font-size: 12px; color: #333; font-weight: bold; }

.list-entertainers { width: 548px; height: 205px; position: relative; background: #caccb7; margin: 0 0 15px 0; }
.list-entertainers p { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 0; }
.list-entertainers p a { color: #700; text-decoration: none; }
.list-entertainers p a:hover { color: #000; }
.list-entertainers p span { font-family: "Courier New", Courier, monospace; font-size: 12px; color: #333; font-weight: bold; }

.list-traders { width: 548px; height: 205px; position: relative; background: #caccb7; margin: 0 0 15px 0; }
.list-traders p { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 0; }
.list-traders p a { color: #700; text-decoration: none; }
.list-traders p a:hover { color: #000; }
.list-traders p span { font-family: "Courier New", Courier, monospace; font-size: 12px; color: #333; font-weight: bold; }

.list-shows { width: 548px; height: 205px; position: relative; background: #caccb7; margin: 0 0 15px 0; }
.list-shows p { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 0; }
.list-shows p a { color: #700; text-decoration: none; }
.list-shows p a:hover { color: #000; }
.list-shows p span { font-family: "Courier New", Courier, monospace; font-size: 12px; color: #333; font-weight: bold; }

.list-title { width: 467px; height: 30px; position: absolute; top: 17px; left: 56px; font-size: 18px; color: #fdf2bb; text-transform: uppercase; }
.list-text { font-family: Arial, Helvetica, sans-serif; width: 500px; height: 32px; position: absolute; top: 52px; left: 20px; font-size: 12px; color: #000; }
.list-email { width: 260px; height: 14px; position: absolute; top: 109px; left: 87px; font-size: 12px; color: #fdf2bb; }
.list-web { width: 260px; height: 14px; position: absolute; top: 126px; left: 87px; font-size: 12px; color: #fdf2bb; }
.list-tel { width: 300px; height: 32px; position: absolute; top: 109px; left: 404px; font-size: 12px; color: #fdf2bb; }

.list-select { background-color: #510a1b; color: #FFF0BF;	font-weight: bold; }
.list-select a { background-color: #510a1b; color: #FFF0BF; font-weight: bold; text-decoration: none; }
.list-select a:hover { background-color: #510a1b; color: #FFF0BF; font-weight: bold; text-decoration: none; }

.list-q { background-color: #FFF0BF; color: #510a1b; }
.list-q a { background-color: #FFF0BF; color: #510a1b; text-decoration: none; }
.list-q a:hover { background-color: #FFF0BF; color: #510a1b; text-decoration: none; }

.list-news { width: 548px; height: 205px; position: relative; background: #c9c192; margin: 0 0 15px 0; }
.list-news p { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 0; }
.list-news p a { color: #700; text-decoration: none; }
.list-news p a:hover { color: #000; }
.list-news p span { font-family: "Courier New", Courier, monospace; font-size: 12px; color: #333; font-weight: bold; }

.news-title { font-family: Arial, Helvetica, sans-serif; width: 532px; height: 18px; position: absolute; top: 7px; left: 9px; font-size: 18px; color: #700; line-height: 24px; text-transform: uppercase; }
.news-date { font-family: Arial, Helvetica, sans-serif; font-weight: bold; width: 200px; height: 17px; position: absolute; top: 30px; left: 9px; font-size: 12px; color: #333; }
.news-textblock { font-family: Arial, Helvetica, sans-serif; width: 548px; height: 124px; position: absolute; top: 52px; left: 0px; background: #f8ecd0; border-top: 2px solid #796846; border-bottom: 2px solid #796846; overflow: auto; }
.news-text { font-family: Arial, Helvetica, sans-serif; width: 480px; padding: 10px 20px; font-size: 12px; color: #333; }

/* ---------------------------------------------------------------------- Timeline */

.redbar {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 15px;
	color: #FFFFCC;
	padding: 8px;
	background: #800;
	border: 3px outset;
	border-top-color: #A00;
	border-right-color: #900;
	border-bottom-color: #600;
	border-left-color: #700;
}
ul.redbar {
	margin-left: 0;
	padding-left: 0;
	white-space: nowrap;
}

.redbar li {
	display: inline;
	list-style-type: none;
}
.redbar a {
	padding: 2px 2px;
	color: #FFC;
	text-decoration: none;
}
.redbar a:hover {
	background-color: #C00;
	text-decoration: none;
}
.redbar a#current { background-color: #600; }
.redbar a:hover#current { background-color: #C00; }

.graybar { 
	background: #333; 
	padding: 10px; 
	color: #FFC;
	height: 45px;
}
.graybar h4 {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 18px;
	padding-top: 20px;
	font-weight: normal;
	float: left;
	color: #FFC;
	margin: 0;
}
.graybar h3 {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 38px;
	text-align: right;
	color: #FFC;
	font-weight: normal;
	margin: 0;
}

.timeblock1 {
	width: 275px;
	height: 400px;
	background: #F1EFDC;
	float: left;
}
.timeblock1 p { 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 11px;
	padding: 5px 10px;
	color: #222;
	margin: 0 0 0 0;
}
.timeblock2 {
	width: 275px;
	height: 400px;
	background: #D8D1AE;
	float: left;
}
.timeblock2 p { 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 11px;
	padding: 5px 10px;
	color: #222;
	margin: 0 0 0 0;
}

/* _Gallery
==========================================*/

#gallery-block { width: 535px; border: 2px solid #897854; background: #fffce3; padding: 7px 0 7px 7px; overflow: hidden; }

.thumb-pic { width: 160px; height: 120px; margin: 0 4px 4px 0; float: left; 
background: url(../images/bg-gallery-thumb.png) no-repeat; padding: 7px; }

.thumb-pic2 { width: 160px; height: 120px; background-position: center center; 
background-repeat: no-repeat; overflow: hidden; overflow: hidden; }

.thumb-pic2 img { width: 160px; height: 120px; }

.clear { clear: both; }

/* _Lightbox
==========================================*/

#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }


#lightbox img{ border: none; } 
#overlay img{ border: none; }

#overlay{ background-image: url(../images/overlay.png); }

* html #overlay{
	background-color: #000;
	back\ground-color: transparent;
	background-image: url(../images/spacer.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/overlay.png", sizingMethod="scale");
	}

/* _NEW BITS
==========================================*/

.btn-add-event { margin: 0 0 8px 0; }
.search-block { background: #510a1b; padding: 8px; margin: 5px 0; }
.search-block h3 { font-size: 14px; color: #fff0bf; margin: 0 0 5px 0; }
form { margin: 0; padding: 0; border: 0; }

.page-title { border-bottom: 2px solid #a17465; }
.page-title h3 { color: #801223; margin: 10px 0; text-align: center; }
.page-title h3 span { color: #000; font-weight: normal; }
.page-title h2 { margin: 0 0 10px 0; text-align: center; }

.event-block { padding: 8px 0 10px 0; border-bottom: 2px solid #a17465; position: relative; }
.event-block h4 { font-size: 12px; color: #000; margin: 5px 0 0 0; float: right; text-align: right; }
.event-block h3 { font-size: 12px; color: #000; margin: 0 0 5px 0; }
.event-block h3 span { float: right; }
.event-block h3 a { color: #801223; text-decoration: none; }
.event-block h3 a:hover { color: #000; }
.event-block h2 { font-size: 18px; color: #801223; margin: 0 0 7px 0; }
.event-block p { font-size: 12px; color: #000; margin: 0 0 10px 0; line-height: 14px;}

.blog-block { padding: 8px 0 0 0; border-bottom: 2px solid #a17465; position: relative; }
.blog-block img { float: right; border: 3px solid #796846; margin: 0 0 0 10px; }
.blog-block h4 { font-size: 12px; color: #000; margin: 5px 0 0 0; float: right; text-align: right; }
.blog-block h3 { font-size: 12px; color: #000; margin: 0 0 5px 0; }
.blog-block h3 span { float: right; }
.blog-block h3 a { color: #801223; text-decoration: none; }
.blog-block h3 a:hover { color: #000; }
.blog-block h2 { font-size: 18px; color: #801223; margin: 0 0 2px 0; }
.blog-block p { font-size: 12px; color: #000; margin: 0 0 10px 0; line-height: 14px;}
.blog-date { width: 33px; height: 40px; margin: 0 8px 0 0; background: url(../images/bg-blog-date.png) no-repeat;  float: left; overflow: hidden; }
.blog-date h5 { font-size: 9px; font-weight: normal; width: 30px; margin: 6px 0 1px 0; text-align: center; color: #000; }
.blog-date h4 { font-size: 14px; width: 30px; text-align: center; color: #000; margin: 0; padding: 0; float: none; }
.blog-clear { font-size: 0; line-height: 0; clear: both; height: 8px; }

/* _NEW MENU
==========================================*/

#nav-block2 { width: 181px; background: url(../images/back-main.jpg) -10px; border: 3px solid #796846; padding: 0 0 6px 0; }
#nav-block2 img { margin-left: 9px; }
#nav-title2 { height: 48px; background: #500 url(../images/title-nav.gif) no-repeat; margin-bottom: 13px; }
.btn-nav { width: 177px; height: 54px; overflow: hidden; }
.btn-nav-list { width: 177px; height: 49px; overflow: hidden; }
.nav-list { width: 150px; background: url(../images/nav/nav-list-bg.png) no-repeat bottom; margin: 0 0 0 9px; padding: 8px 10px 15px 8px; }
.nav-list p { font-size: 12px; font-weight: bold; color: #000; margin: 0 0 5px 0; padding: 0 0 0 12px; background: url(../images/nav/nav-list-bullet.png) no-repeat 0 2px; }
.nav-list p a { text-decoration: none; color: #000; }
.nav-list p a:hover { color: #801224; }

/* _Index Info
==========================================*/

#index-info { width: 550px; height: 1420px; background: url(../images/bg-index-info.jpg) no-repeat; position: relative; }
#diary-block { width: 215px; height: 210px; position: absolute; top: 303px; right: 10px; cursor: pointer; }
#heros-block { width: 200px; height: 22px; position: absolute; top: 899px; right: 27px; cursor: pointer; }
#editor-block { width: 170px; height: 22px; position: absolute; top: 948px; left: 32px; cursor: pointer; }
#facebook-block { width: 190px; height: 130px; position: absolute; top: 955px; right: 32px; cursor: pointer; }
#pp-block { width: 190px; height: 144px; position: absolute; top: 1090px; right: 32px; cursor: pointer; }
#imgad-block { width: 480px; height: 130px; position: absolute; top: 1254px; left: 35px; cursor: pointer; }

/* _Content Styles
==========================================*/

#content h2, #content h2, #content h3 { color: #5f5852; }

.eventsubmit { padding: 140px 0 0 50px; }
.eventsubmitleft { width: 120px; float: left; text-align: right; margin-top: 3px; }
.eventsubmitright { width: 290px; float: left; margin-left: 10px; }

.listingsubmit { padding: 140px 0 0 50px; }
.listingsubmitleft { width: 130px; float: left; text-align: right; margin-top: 3px; }
.listingsubmitright { width: 290px; float: left; margin-left: 10px; }