/*
Theme Name: Mystery Escape Rooms
Theme URI: http://www.mysteryescaperooms.com
Author URI: www.sleuthbooth.com
Description: The theme designed from a template for Mystery Escape Rooms. 
Author: Sleuth Booth
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags: microformats, one-column 

Mystery Escape Rooms, (c) 2014 Sleuth Booth
*/

/* =Reset default browser CSS.
-------------------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
}

html {
margin-top: 0;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
border: 0;
padding: 0;
}

body {
	line-height: 1;
	background: #e3e3e3 url(images/furley_bg.png) repeat;
	font-family: 'Sorts Mill Goudy', serif;
	font-weight: 300;
	font-size: 18px; letter-spacing: 0px; font-weight: 100; color: #444;
	color: #222222;
	width: 100%;
	text-align: center;
}

patternstochoosefrom {
	background: #e3e3e3 url(images/natural_paper.png) repeat;
	background: #e3e3e3 url(images/wall4.png) repeat;
	background: #e3e3e3 url(images/white_wall.png) repeat;
	background: #e3e3e3 url(images/furley_bg.png) repeat;

}

#awwwards{
position:absolute;
top:40px;
left:0px;
z-index:555;
}
#awwwards a{
width:69px;
height:105px;
text-indent:-8000px;
display:block;
background:url(images/awwwards_siteoftheday_w_left.png) no-repeat;
overflow:hidden;
}


#topbg {background: url(images/blackheaderbg.jpg) repeat;}
#topbglayer2 {background: url(images/toplayer2.png) repeat-x;}

#bottombg {background: url(images/blackheaderbg.jpg) repeat;}

#changetowhite a {color: #CCC; line-height: 1.3em;} 

h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-weight: normal;
}

::selection {
	background: #222222; /* Safari */
	}
::-moz-selection {
	background: #222222; /* Firefox */
}


h1, h2, h3, h4, h5 {
letter-spacing: -2px;
color: #222222;
font-family: 'Sorts Mill Goudy', serif;
text-align: center;
width: 80%;
padding: 0 10% 0 10%;
}

h1 {font-size: 60px; text-shadow: 2px 2px 0px #fff; filter: dropshadow(color=#fff, offx=2, offy=2);}
h2 {font-size: 30px; text-shadow: 2px 2px 0px #fff; filter: dropshadow(color=#fff, offx=2, offy=2); letter-spacing: 0.02em; }
h3 {font-size: 24px; letter-spacing: 0px; font-weight: 100; color: #444;} 
h4 {font-size: 20px; letter-spacing: 0px; font-weight: 100; color: #333;}  
h5 {font-size: 16px; letter-spacing: 0px; font-weight: 100; color: #333;}  



.blackbold {
color: #000; font-weight: bolder;
}

.whitebold {
color: #FFF; font-weight: bolder;
}

.eighteentosixteen {
font-size: 18px;
}

.widgettitle {
text-align: center;
width: 100%;
padding: 20px 0 0 0;
}


@media only screen and (max-width : 1220px) {
h1 {font-size: 48px; text-shadow: 2px 2px 0px #fff; filter: dropshadow(color=#fff, offx=2, offy=2);}
h2 {font-size: 28px; text-shadow: 2px 2px 0px #fff; filter: dropshadow(color=#fff, offx=2, offy=2); letter-spacing: 0.02em; }
h3 {font-size: 20px; letter-spacing: 0px; font-weight: 100; color: #444;} 
h4 {font-size: 16px; letter-spacing: 0px; font-weight: 100; color: #333;} 
h5 {font-size: 12px; letter-spacing: 0px; font-weight: 100; color: #333;} 
.eighteentosixteen {font-size: 16px;}
}

ol, ul {
	list-style: none;
}
a img {
	border: none;
}

a, a:visited, a:hover {
text-decoration: none;
color: #111;
}

/* =Layout
-------------------------------------------------------------- */


#headerbar {
width: 100%; height: 40px; background: #FFF url(images/bar.jpg) repeat-x bottom; position: fixed; z-index: 9999; 
        
}

.logo {
width: 38px; height: 22px; margin-top: 7px; float: left; background: url(images/logo-mini.png) no-repeat center;
}

.refresh {
background: url(images/refresh-loader.gif) left center no-repeat; padding: 0 0 0 20px; height: 16px; position: absolute; right: -75px; top: -150px; color: #d4d2d2; font-size: 13px;
}

#margintop75 {
margin-top: 75px;
}

h2.verticaltext {
padding-top: 25px;
padding-bottom: 25px;
}

h4.verticaltext {
padding-top: 20px;
padding-bottom: 20px;
}

h5.verticaltext {
padding-top: 16px;
padding-bottom: 16px;
}

@media only screen and (max-width : 400px) {

#headerbar {
width: 100%; height: 75px; background: #FFF url(images/bar.jpg) repeat-x bottom; float: left; position: inherit;
}

.logo {
width: 320px; height: 70px; float: left; background: url(images/logo-beta.png) no-repeat center;
}

.refresh {
background: url(images/refresh-loader.gif) left center no-repeat; padding: 0 0 0 20px; height: 16px; position: absolute; right: -75px; top: -150px; color: #d4d2d2; font-size: 13px; display: none;
}

#margintop75 {
margin-top: 0px;
}
}

.fullwidthfloatleft {
width: 100%; height: auto; float: left;
}

#topbarcontainer  {
width: 100%; height: auto; float: left;
}

#topbarargh {
width: 100%; background: #FFFFFF; height: 40px; position: relative; top: 0px;
}

.centre1200 {
margin: 0 auto; height: auto; width: 1200px;
}

.container1200 {
float:left; height: auto; width: 1200px;
}

@media only screen and (max-width : 1220px) {
.centre1200 {
margin: 0 auto; height: auto; width: 900px; text-align: center;
}

.container1200 {
float:left; height: auto; width: 900px;
}
}

@media only screen and (max-width : 400px) {
.centre1200 {
margin: 0 auto; height: auto; width: 320px;
}

.container1200 {
float:left; height: auto; width: 320px;
}

#facebook, #twitter, #devcommunity {
display: none;
float: right; margin: 25px 0 0 0;
}
}

#facebook, #twitter, #devcommunity {
float: right; margin: 10px 0 0 0;
}

#linksbartop {
float: left; width: 1200px; height: auto;
}

@media only screen and (max-width : 1220px) {
#linksbartop {
float: left; width: 900px; height: auto; display: inline;
}

#menubarunderneath {
float: left; width: 900px; height: auto; background: #d4d2d2 url(images/bar.jpg) repeat-x bottom;
}

}

@media only screen and (max-width : 400px) {
#linksbartop {float: left; width: 900px; height: auto; display: none;}

#menubarunderneath {
float: left; width: 320px; height: auto; background: #d4d2d2 url(images/bar.jpg) repeat-x bottom;
}

}

.linksbarheader {
float: left;
width: 1200px;
margin: 0 0px 0 0px;
padding: 7px 0px 15px 0px;
height: auto;
cursor: pointer;
}





@media only screen and (max-width : 1220px) {


.linksbarheader {
float: left;
width: 900px;
margin: 0 0px 0 0px;
padding: 7px 0px 15px 0px;
background: #d4d2d2 url(images/bar.jpg) repeat-x bottom;
}
}

.linktexttwo {
float: left;
font-size: 11px;
padding-top: 3px;
}

.imagefloatleft {
float: left;
margin-right: 10px;
}

.container {
width: 100%; float: left; height: auto; padding: 50px 0;
}

.column400 {
width: 400px; float: left;
}

.column600 {
width: 600px; float: left;
}

.column800 {
width: 800px; float: left;
}


.column1200 {
width: 1200px; float: left;
}

@media only screen and (max-width : 1220px) {
.column400 {
width: 299px; float: left;
}

.column600 {
width: 450px; float: left;
}

.column800 {
width: 600px; float: left;
}


.column1200 {
width: 900px; float: left;
}
}

@media only screen and (max-width : 400px) {
.column400 {
width: 320px; float: left;
}

.column600 {
width: 320px; float: left;
}

.column800 {
width: 320px; float: left;
}

.column1200 {
width: 320px; float: left;
} 
}

.text400 {
float: left;
width: 260px;
padding-left: 40px;
padding-top: 10px;
padding-bottom: 15px;
padding-right: 100px;
background: none;
color: #313030;
}

@media only screen and (max-width : 1220px) {
.text400 {
float: left;
width: 230px;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 15px;
padding-right: 50px;
background: none;
}
}

@media only screen and (max-width : 400px) {
.text400 {
float: left;
width: 230px;
padding-left: 40px;
padding-top: 10px;
padding-bottom: 15px;
background: none;
padding-right: 50px;
}
}


.bar {
background: url(images/bar.jpg) repeat-x bottom;
float: left;
width: 100%;
height: 2px;
}

.bar-lhorizontal {
text-align: center; margin: 0 auto; width: 169px; height: 280px; background: url(images/bar-lhorizontal.png) no-repeat;
} 

.bar-rhorizontal {
text-align: center; margin: 0 auto; width: 169px; height: 280px; background: url(images/bar-rhorizontal.png) no-repeat;
}

.bar-lhorizontal-left {
float: let; width: 169px; height: 280px; background: url(images/bar-lhorizontal.png) no-repeat;
}

.projects {list-style: none;}

.projects li {
font-size: 16px;  width: 80%; padding: 10px 10% 10px 10%; float: left;
}


/* ..........................Header.......................... */

.adidas-halfwidth {
width: 471px;
height: 140px;
background: url(images/threestripe-white.png) repeat-x center;
float: left;
}

@media only screen and (max-width : 1220px) {
.adidas-halfwidth {
width: 290px;
height: 140px;
background: url(images/threestripe-white.png) repeat-x center;
float: left;
}
}

#logo {
width: 208px;
height: 140px;
background: url(images/mysteryescaperooms-logo-white.png) no-repeat center;
float: left;
}

#flyfromleft {
position: relative;
}

#tinylogo {
float: left; width: 45px; height: 45px;
background: url(images/tinylogo.png) no-repeat center;
}

#menu {
float: right;
}

#menu li {
height: 20px;
float: right;
padding: 15px 15px 10px 15px;
font-size: 16px;
}

#menu li a {
color: #CCCCCC;
}

#menu li a:hover {
color: #FFF;
}

#quotes {
float: left; position: relative; width: 900px; height: 110px; padding: 0px 150px 0 150px;
}

.textItem {
width: 900px; position: absolute; top: 0px; left: 150px; padding: 0 0 0 0; color: #FFFFFF; text-shadow: 2px 2px 0px #111; filter: dropshadow(color=#111, offx=2, offy=2); letter-spacing: -2px; font-family: 'Sorts Mill Goudy', serif; text-align: center; font-size: 50px;
}

.textfade {
position: absolute; top: 120px; right: 0px; width: 45%;
}

.textfade-left {
position: absolute; top: 120px; left: 0px; width: 45%;
}

@media only screen and (max-width : 1220px) {
#quotes {
float: left; position: relative; width: 900px; height: 110px; padding: 10px 0px 0 0px;
}

.textItem {
width: 900px; position: absolute; top: 0px; left: 0px; padding: 0 0 0 0; color: #FFFFFF; text-shadow: 2px 2px 0px #111; filter: dropshadow(color=#111, offx=2, offy=2); letter-spacing: -2px; font-family: 'Sorts Mill Goudy', serif; text-align: center; font-size: 50px;
}

.textfade {
position: absolute; top: 120px; right: 0px; width: 25%;
}

.textfade-left {
position: absolute; top: 120px; left: 0px; width: 25%;
}
}

#arrowopacitychange {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

#arrowopacitychange:hover {
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}


/* ..........................Lightbox.......................... */

.clients {
width: 100%;
height: auto;
float: left;
}

.clients li {
width: 200px;
height: 200px;
float: left;
cursor: pointer;
}

@media only screen and (max-width : 1220px) {
.clients li {
width: 300px;
height: 200px;
float: left;
}
}

.mask {
top: 0;
left:0;
width: 100%;
height: 100%;
position: fixed;
background: url(images/transpwhite.png) repeat;
display: none;
z-index: 100;
}
 
.close {
height: 50px;
width: 50px;
float: right;
background: url(images/close.png) no-repeat center;
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
cursor: pointer;
}

.close:hover {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

.lightboxcentre {
margin: 5% auto 5% auto; height: 80%;  width: 1200px; background: #e3e3e3 url(images/furley_bg.png) repeat; -webkit-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.4); box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.4);
}

@media only screen and (max-width : 1220px) {

.lightboxcentre {
margin: 5% auto 5% auto; height: 80%; width: 900px; background: #e3e3e3 url(images/furley_bg.png) repeat;  -webkit-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.4); box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.4);
}

}


/* ..........................Footer.......................... */


#footer {
margin: 10px 0 10px 0; background: url(images/bar.jpg) repeat-x top; padding: 20px 0 20px 0; font-size: 11px;
}

#footer a {
text-decoration: underline;
}

#bottomlogo {
float:right;
}

@media only screen and (max-width : 400px) {
#footer {
margin: 10px 0 10px 0; background: url(images/bar.jpg) repeat-x top; padding: 20px 0 20px 0; font-size: 11px; text-align: center;
}

#bottomlogo {
float:right;
width: 100%;
text-align: center;
margin: 20px 0 0 0;
}

#devcommunityhome{
display: none;
}

#othertweeters{
display: none;
}
}





.twitter-follow {
	-moz-box-shadow:inset 0px -8px 11px -1px #e6e1e6;
	-webkit-box-shadow:inset 0px -8px 11px -1px #e6e1e6;
	box-shadow:inset 0px -8px 11px -1px #e6e1e6;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #faf7fa) );
	background:-moz-linear-gradient( center top, #ffffff 5%, #faf7fa 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#faf7fa');
	background-color:#ffffff;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #d1cfd1;
	display:inline;
	color:#2e2d2e;
	font-family:arial;
	font-size:11px;
	font-weight:bold;
	padding:3px 3px 2px 3px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
	float: left;
	position: inherit;
}.twitter-follow:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #faf7fa), color-stop(1, #ffffff) );
	background:-moz-linear-gradient( center top, #faf7fa 5%, #ffffff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faf7fa', endColorstr='#ffffff');
	background-color:#faf7fa;
}


.small-twitter-bird {
float: left; margin-right: 2px; height: 13px; width: 17px; background: url(images/small-twitter-bird.png) no-repeat center; display: inline;
}


/* ..........................Scrolling Blues Tweets directory.......................... */

#scroller-header a {
float: left;
width: 150px;
height: 190px;
background: #222222;
color: #ddd;
display: inline;
margin: 0px 0px 0px 0px;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

@media only screen and (max-width : 1220px) {
#scroller-header a {
float: left;
width: 95px;
height: 190px;
background: #222222;
color: #ddd;
display: inline;
margin: 0px 0px 0px 0px;
}
}

#scroller-header a:hover {
	text-decoration:none; 
}

#scroller-header a.selected {
    text-decoration:none; 
	opacity:1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

#scroller-header {
	background: url(images/bar.jpg) repeat-x bottom;
	width:1200px;
	height: auto;
	float: left;
	font-weight:700;
}

#scroller-body {
	width:1200px;
	float: left;
	display: inline;
	background: url(images/bar.jpg) repeat-x bottom;
}

#mask {
	width:1200px;
	overflow:hidden;
	margin:0 auto;
}

@media only screen and (max-width : 1220px) {
#scroller-header {
	background: url(images/bar.jpg) repeat-x bottom;
	width:900px;
	height: auto;
	float: left;
	font-weight:700;
}

#scroller-body {
	width:900px;
	float: left;
	display: inline;
	background: url(images/bar.jpg) repeat-x bottom;
}

#mask {
	width:900px;
	overflow:hidden;
	margin:0 auto;
}
}

#panel {
float: left;
}

#panel div {
float:left;
}

#panel a {
width: auto;
}

.subpanel {
width: 1200px;


}

@media only screen and (max-width : 1220px) {
.subpanel {
width: 900px;
background:  url(images/bar.jpg) repeat-x bottom;
}
} 

/* .......................... NAVIGATION.......................... */

#scroller {
position: absolute;
width: 100%;
height: 45px;
background: url(images/blackheaderbg.jpg) repeat;
top: 0px;
left: 0px;
z-index: 50;
}

#scroller-grad {
position: absolute;
width: 100%;
height: 45px;
background: url(images/minigrad.png) bottom repeat-x;
top: 0px;
left: 0px;
}

.entry-content, .entry-content ul li {
list-style: disc;
list-style-position:inside;
}


 

.timeline {
	background: none;
	position: relative;
	margin: 0px auto;
	padding: 0px;
	width: 100%;
	font-family: 'Sorts Mill Goudy', serif;
	font-weight: 300;
	font-size: 18px; letter-spacing: 0px; font-weight: 100; color: #444;
}

.timeline a.timeline_spine {
	border-left: 2px solid #FFF;
	border-right: 1px solid #111;
	display: block;
	height: 100%;
	left: 50%;
	position: absolute;
	top: 0px;
}

.timeline .section {
	clear: both;
	margin: 0px 0px 0px 0px;
	padding: 20px 0px 0px 0px;
	overflow: hidden;
	position: relative;
	z-index: 99;
}

.timeline .section:only-child, .timeline .section:last-child {
	padding-bottom: 20px;
}

.timeline .section .title {
	display: block;
	margin: 0px auto 20px auto;
	width: auto;
	text-align: center;
}

.timeline .section .title a {
	background: #111;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #ffffff;
	display: inline-block;
	font-size: 13px;
	padding: 4px 20px 5px 20px;
	text-decoration: none;
}

.timeline .section .title a:hover {
	background: #444;
	text-decoration: none;
}

.timeline .section ol.events {
	clear: both;
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.timeline .section ol.events li.event {
	margin: 0px 0px 20px 0px;
	padding: 0px;
	position: relative;
	width: 50%;
}

.timeline .section ol.events li.event:nth-child(1n+2), .timeline .section ol.events li.event:first-child {
	clear: left;
	float: left;
}

.timeline .section ol.events li.event:nth-child(2n+2) {
	clear: right;
	float: right;
}

.timeline .section ol.events li.event.featured {
	clear: both;
	float: none;
	padding: 20px 0px 0px 0px;
	width: 100%;
}

.timeline .section ol.events li.event .event_container {
	background: #ffffff;
	border-color: #999;
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 10px;
	overflow: hidden;
	width: 80%;
}

.timeline .section ol.events li.event .event_container p {
	font-size: 13px;
	line-height: 14px;
	margin: 0px 0px 15px 0px;
	font-family: 'Sorts Mill Goudy', serif;
	font-weight: 300;
}

.timeline .section ol.events li.event .event_container p:only-child,
.timeline .section ol.events li.event .event_container p:last-child {
	margin-bottom: 0px;
}

.timeline .section ol.events li.event .event_container a {
	font-family: 'Sorts Mill Goudy', serif;
	font-weight: 300;
	color: #444;
}

.timeline .section ol.events li.event .event_container .event_title {
	padding: 10px;
	overflow: hidden;
}

.timeline .section ol.events li.event .event_container .event_content {
	clear: both;
	padding: 0px 10px 10px 10px;
}

.timeline .section ol.events li.event .event_container .event_title .profile_image {
	border: 0px;
	float: left;
	margin-right: 10px;
}

.timeline .section ol.events li.event .event_container .event_title span.subtitle {
	color: #808080;
	display: block;
	font-size: 14px;
	line-height: 12px;
	margin: 0px 0px 0px 0px;
	width: auto;
	font-family: 'Sorts Mill Goudy', serif;
	font-weight: 300;
}

.timeline .section ol.events li.event .event_container .event_title h3 {
	font-size: 28px;
	line-height: 28px;
	margin: 0px 0px 2px 0px;
	text-transform: none;
	display: inline;
	font-family: 'Sorts Mill Goudy', serif;
	font-weight: 300;
}

.timeline .section ol.events li.event.wp .event_container .event_title h3 {
	margin-top: 0px;
}

.timeline .section ol.events li.event .event_pointer {
	background:;
	display: block;
	height: 15px;
	position: absolute;
	top: 20px;
	width: 18px;
	z-index: 99;
}

/* Left Column */ 
.timeline .section ol.events li.event:nth-child(1n+2) .event_container,
.timeline .section ol.events li.event:first-child .event_container {
	float: right;
	margin-right: 12px;
}

.timeline .section ol.events li.event:nth-child(1n+2) .event_pointer,
.timeline .section ol.events li.event:first-child .event_pointer {
	background-position: 0px 0px;
	right: -5px;
}

/* Right Column */
.timeline .section ol.events li.event:nth-child(2n+2) .event_container {
	float: left;
	margin-left: 17px;
}

.timeline .section ol.events li.event:nth-child(2n+2) .event_pointer {
	background-position: 0px -15px;
	left: 0px;
}

/* Featured Event */
.timeline .section ol.events li.event.featured .event_container {
	float: none;
	margin: 0px 64px 35px 65px;
	width: auto;
}

.timeline .section ol.events li.event.featured .event_pointer {
	background-position: 0px -52px;
	height: 22px;
	left: 1px;
	margin: 0px auto;
	top: -1px;
}

.timeline .section ol.events li.event.featured .event_container p {
	text-align: center;
}

.timeline .section ol.events li.event.featured .event_container .event_title {
	padding: 20px 20px 30px 20px;
	text-align: center;
}

.timeline .section ol.events li.event.featured .event_container .event_title h3 {
	font-size: 48px;
	font-weight: 800;
}

.timeline .section ol.events li.event.featured .event_container .event_content {
	padding: 0px 20px 30px 20px;
}

.timeline ol.timeline_nav {
	position: absolute;
	list-style: none;
	right: 0px;
	top: 45px;
	z-index: 99;
}

.timeline ol.timeline_nav li {
	border-left: 5px solid #999;
	padding: 5px 0px 5px 7px;
	margin: 0px 0px 10px 0px;
	width: auto;
}

.timeline ol.timeline_nav li:hover {
	border-left: 5px solid #111;
}

.timeline ol.timeline_nav li.current {
	border-left: 4px solid #444;
}

.timeline ol.timeline_nav li:only-child, .timeline ol.timeline_nav li:last-child {
	margin-bottom: 0px;
}

.timeline ol.timeline_nav li a {
	color: #999;
	font-size: 11px;
	text-decoration: none;
}

.timeline ol.timeline_nav li a:hover {
	text-decoration: none;
}

.timeline ol.timeline_nav li.current a {
	color: #6179af;
	font-weight: 600;
}

h2.widgettitle {
	display: none;
}