/*
Theme Name: thehose
Theme URI: http://thehose.com/
Description: A custom theme developed for The Hose
Version: 1
Author: Tomorrow
Author URI: http://www.madebytomorrow.com
*/


/*--[[[ globals ]]]--*/

* {margin:0; padding:0; }

body {background:url('images/bg-body.gif') repeat top left; line-height:1.3em; font-size:14px; font-family:georgia, times, serif; text-align:center; padding-bottom:20px;}

a {color:#fff; text-decoration:none;}

  a:hover {color:#ed1f24;}
  
p, address {margin-bottom:1em; }

small {display:block;}

h2, h3 {text-transform:uppercase; font-style:italic; font-weight:bold;}

  h2.post-title, h3.post-title {font-size:1.8em; line-height:1em; margin-bottom:.5em;}

div.teaser p {font-size:1.5em; font-weight:bold; line-height:1em; text-transform:uppercase; font-style:italic;}

/*utility*/

.float-left {float:left;}
.float-right {float:right;}
.clear-left {clear:left;}
.clear-right {clear:right;}
.clear-all {clear:both;}


/*--- [[[ STRUCTURE ]]]---*/

#main-container {text-align:left; width:940px; margin: 0 auto; color:#fff;}
  
  div#overlay {display:none; position: absolute; z-index:1000; border-top:3px solid #fff; top:0; width:960px; height:960px; background: #000 url('images/bg-reversed.gif') repeat top left;}
  
    div#overlay p {font-style:italic; text-align:center; background:url('images/bg-overlay-logo.png') no-repeat top center; padding-top:400px;}

	#header {border-top:5px solid #fff; height:35px; padding-top:20px; border-bottom:1px solid #fff;}
	
	#content {margin-bottom:20px;}
	
		.left-column {float:left; margin-right:20px;}
	
		.right-column {float:left;}
	
	#footer {padding-top:10px; clear:left; border-top:1px solid #fff; font-size:1.4em;}
	
	
/*--- [[[ #header styles ]]] ---*/

#header {}

	h1 {float:left;}

		h1 a {display:block; float:left; background:url('images/bg-h1.gif') no-repeat top left; text-indent:-5000px; width:126px; height:27px;}

	#header address {float:right; display:block; margin-top:10px; font-style:italic; }


/*--- [[[ #more-info ]]] ---*/

p#viewer {margin:0;}

p#viewer a {display:block; font-style:italic; height:30px; border-bottom:1px solid #fff; text-align:right; padding-top:15px; margin:0;}

	p.clicked {background:url('images/bg-view-more-clicked.gif') repeat top left;}
	
		p.clicked a {background:url('images/bg-logo-white.gif') no-repeat 1em 1em; padding-right:1em; padding-bottom:100px;}
		
			p.clicked a:hover {color:#fff;}
	
#more-info {height:375px; background:url('images/bg-view-more-clicked.gif') repeat top left; margin-bottom:15px; padding:1em;}

	#more-info address, #more-info p {font-size:2em; line-height:1em;}
	
	#more-info a:hover {background:#fff;}
	
	div#google-map {float:right;}
    
  	div#google-map iframe {margin-bottom:.5em;}
      
    div#google-map small {font-size:1em; font-style:italic;}


/*--- [[[ #content styles ---*/

#content {}

  small.event-date { display:block; border-bottom:1px solid #fff; width:140px; margin-bottom:15px; padding-bottom:5px;}

  small.detailed-event-date {font-style:italic; text-transform:uppercase; font-size:1.3em; margin-bottom:5px;}


/*home-page styles*/

  body#home div#content {padding-top:40px;}
  
  body#home .left-column, body#home .right-column {width:460px;}

	h2#featured, h2#upcoming {font-style:normal; text-transform:uppercase; font-weight:bold; border-bottom:3px solid #fff; margin-bottom:40px; padding-bottom:3px;}
  
  div#featured-event div.post {cursor:pointer; background:#fff; width:448px; height:628px; padding:6px;}
  
  	div#featured-event div.post img {width:100%; height:100%;}
  
    div#featured-event div.details {display:none; padding:5px; width:438px; height:618px; background:#ed1f24;}
    
      div#featured-event div.details a:hover {background:#fff;}
      div#featured-event div.post:hover img {display:none;}
      div#featured-event div.post:hover div.details {display:block; }
            
      div.details p { font-size:1.3em; text-transform:uppercase; font-style:italic;}
  
  div.upcoming-event {width:140px; height:225px; float:left; margin:0 13px 20px 0; }
  
  	div.upcoming-event div.post {display:block; width:140px; height:196px;}

			a.event-image {display:block; width:140px; height:196px;}
            
      	a.event-image img {width:100%; height:100%;}
      
      div.event-info {cursor:pointer; display:none; width:134px; padding:3px; background:#ed1f24; height:190px;}
      
      	div.event-info small.detailed-event-date {font-size:.9em; line-height:1em;}
      	
      	div.event-info h3.post-title {font-size:1em; line-height:1.1em;}
      	
      	div.event-info p {font-size:.9em; line-height:1em; text-transform:uppercase; font-style:italic;}
      	
      	  div.event-info div.teaser p { line-height:1.2em;}
		 	
		 	  	div.event-info h3.post-title a:hover, div.event-info p a:hover {background:#fff;}
			
			  /*will need to fix for ie6*/
			  div.post:hover a.event-image {display:none;}
			
			  div.post:hover div.event-info {display:block;}

/*single post page*/
div.post-content-wrapper {background:url('images/bg-white.gif') repeat top left; padding:40px 1em 1em 1em; }

body#interior div.post {color:#000; width:880px; padding:1em; background:#fff; display:inline-block;}
  
  body#interior small.detailed-event-date {width:300px; font-style:italic; border-bottom:none; font-size:1.5em; font-weight:bold; background:#fff; margin:-40px 0 10px -14px; height:27px; line-height:29px; padding:0 0 0 14px; text-transform:none;}
  
  body#interior p#more-events a {display:block; float:right; margin:-40px -14px 0 0; padding-left:7px; color:#ed1f24; width:150px; background:#fff; line-height:27px; height:27px; font-style:italic; }
  
  body#interior div.post:after {display:block;visibility:hidden; clear:both; height:0; content: ".";}
  
  body#interior div.post p {}
  
/*404*/
body#interior div#content h2.404, p.404 {font-size:4em;}
  
  
/*--- [[[ #footer styles ---*/

#footer p {float:right; font-size:.7em;}

	#footer p a {text-decoration:none; font-style:italic;}
	
	
/*-------------------------------------------------------------------------
[[[ forces outer DIV to wrap around all floated DIVs within ]]]
---------------------------------------------------------------*/

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

.clearfix { display: inline-block;}

	html[xmlns] .clearfix { display: block; }

	* html .clearfix { height: 1%; }