/*
THEME NAME: Sandbox
THEME URI: http://www.plaintxt.org/themes/sandbox/
DESCRIPTION: Rich with powerful and dynamic semantic class selectors, Sandbox is a canvas for CSS artists
VERSION: 1.6.1
AUTHOR: <a href="http://andy.wordpress.com/">Andy Skelton</a> &amp; <a href="http://www.plaintxt.org/">Scott Allan Wallick</a>
AUTHOR URI:
TAGS: white, microformats, fixed-width, flexible-width, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar
*/

/* Two-column with sidebar on left from the /examples/ folder  */
@import url('examples/2c-l.css');

/* Just some example content */
div.skip-link {
position:absolute;
right:1em;
top:1em;
}

div#menu {
background:#EEE;
height:1.5em;
margin:1em 0;
width:100%;
}

div#menu ul,div#menu ul ul {
line-height:1;
list-style:none;
margin:0;
padding:0;
}

div#menu ul a {
display:block;
margin-right:1em;
padding:0.2em 0.5em;
text-decoration:none;
}

div#menu ul ul ul a {
font-style:italic;
}

div#menu ul li ul {
left:-999em;
position:absolute;
}

div#menu ul li:hover ul {
left:auto;
}

/*.entry-title,.entry-meta {
clear:both;
}*/

div#primary {
margin-top:2em;
}

form#commentform .form-label {
margin:1em 0 0;
}

form#commentform span.required {
background:#fff;
color:#c30;
}

form#commentform,form#commentform p {
padding:0;
}

input#author,input#email,input#url,textarea#comment {
padding:0.2em;
}

div.comments ol li {
margin:0 0 3.5em;
}

textarea#comment {
height:13em;
margin:0 0 0.5em;
overflow:auto;
width:66%;
}

.alignright,img.alignright{
float:right;
margin:0 0 1em 1em;
}

.alignleft,img.alignleft{
float:left;
margin:0 1em 1em 0;
}

.aligncenter,img.aligncenter{
display:block;
margin:1em auto;
text-align:center;
}

div.gallery {
clear:both;
height:180px;
margin:1em 0;
width:100%;
}

p.wp-caption-text{
font-style:italic;
}

div.gallery dl{
margin:1em auto;
overflow:hidden;
text-align:center;
}

div.gallery dl.gallery-columns-1 {
width:100%;
}

div.gallery dl.gallery-columns-2 {
width:49%;
}

div.gallery dl.gallery-columns-3 {
width:33%;
}

div.gallery dl.gallery-columns-4 {
width:24%;
}

div.gallery dl.gallery-columns-5 {
width:19%;
}

div#nav-above {
margin-bottom:1em;
}

div#nav-below { height:14px; margin-top:1em; padding: 10px; background-color:#ff6e00; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; line-height:16px;}
div#nav-below a { color:#FFF;}
div#nav-below a:hover { color:#ccc; }

div#nav-images { height:75px; margin:1em 0; background-color:#ff6e00; }
div#nav-images IMG { height:75px; width:75px; background-color:#efecd6; }
	.nav-previous a IMG { padding:0 10px 0 0; }
	.nav-next a IMG { padding:0 0 0 10px; }

div.navigation {
height:1.25em;
}

div.navigation div.nav-next {
float:right;
text-align:right;
}

div.sidebar h3 {
font-size:1.2em;
}

div.sidebar input#s {
width:7em;
}

div.sidebar li {
list-style:none;
margin:0;
}

div.sidebar li form {
margin:0.2em 0 0;
padding:0;
}

div.sidebar ul ul {
margin:0 0 0 1em;
}

div.sidebar ul ul li {
list-style:disc;
margin:0;
}

div.sidebar ul ul ul {
margin:0 0 0 0.5em;
}

div.sidebar ul ul ul li {
list-style:circle;
}

#text-10, #text-11, #text-12, #text-14 {
  display: none;
}


div#menu ul li,div.gallery dl,div.navigation div.nav-previous {
float:left;
}

div#header,div#footer {
text-align:center;
}

input#author,input#email,input#url,div.navigation div {
width:50%;
}

div.gallery *,div.sidebar div,div.sidebar h3,div.sidebar ul {
margin:0;
padding:0;
}





* {margin: 0; padding: 0; text-decoration: none; font-family: futura, Helvetica, sans-serif;}
body {background-color:#efecd6; background-repeat:repeat-y; background-position:center; overflow-x: hidden;}
a {color:#333;}
a:hover {color:#ff6e00;}
a IMG {border:none;}
li {list-style-type:none;}
#splash a:hover, .nav_links a:hover, .widget_nav_menu a:hover {opacity: .6;}
#no_overflow {overflow: hidden;}
#splash a:hover {opacity: 1;}
#splash p {margin: 10px;}

#splash {position: absolute; top: 280px; left: 50%;  overflow: visible;  }
#splash #splash_line_holder {position: absolute; background-image: url("images/diag.png"); top: -100px; left: -1335px; height: 1200px; width: 3000px; z-index: -1;}
#splash #main_img {position: absolute; top: -250px; left: -450px;}
#splash #icons {height: 25px; width: 155px; position: absolute; top: -211px; left: -67px;}

#splash .on-state, .off-state {position: absolute; top: 0px; left: 0px;}
#splash .on-state {visibility: hidden;}
#splash .off-state:hover {visibility: hidden;}
#splash #events:hover img, #splash #classes:hover img, #splash #rent:hover img, #splash #about:hover img {visibility: visible;}

#splash #events, #splash #classes, #splash #about, #splash #rent, #splash, #tweets {position: absolute; z-index:101; font-family: sans-serif; color: #939598;}
#splash #events {height: 120px; width: 240px; top: -141px; left: -265px; padding-top: 39px; text-align: center;}
#splash #classes {height: 120px; width: 180px; top: -1px; left: -205px; padding-top: 40px; text-align: center;}
#splash #rent {height: 120px; width: 120px; top: -81px; left: -5px; padding-top: 35px; text-align: center;}
#splash #about {height: 120px; width: 120px; top: 139px; left: -145px; padding-top: 35px; text-align: center;}
#splash #tagline {position: absolute; top:125px; left:345px; width:auto; height:auto;}
#splash #tweets {height: 575px; width: 240px; top: 60px; left: -5px; background: #efecd6; margin-top:-2px; padding:0;}
#splash #tweets .feed {margin: 20px;}
#splash #tweets h2 {margin-bottom: 10px;}
#splash #svg_box {margin: -682px 0 0 -2758px; z-index:105;}

/*---:[ typical pages ]:---*/
/*#line_holder { position: absolute; background-image: url("images/diag.png"); background-repeat:repeat; z-index: -10; height: 1000px; width: 1500px; margin-top: 170px;}*/
#page {position:relative; left:50%; /*width: 900px;*/ /*ben commented out the width: 900px; and add the width: 0; this fixes the problem in phone but not effect the pc*/ width: 0; margin-left: -280px;}
#page p {font-family: Helvetica, sans-serif;}
#nav_buttons, #icons {position: relative; z-index:100;}
#line_holder { position: absolute; background-color:#efecd6; z-index: -10; width: 100%; height:160px; margin-top: 0px;}
#nav_buttons {top: 130px; left: 130px; z-index:101;}


.top_tab {z-index:103; display:block; position:fixed; float: right; text-align: center; margin: 0; font-family: futura, helvetica, san-serif; font-size: 11px;}
.top_tab a {padding: 1px 0; margin: 1px 0; display: block;}
.top_tab a:hover {color: #ccc;}
.top_tab DIV.handle { display:block; padding: 5px 8px; cursor: pointer; background: #949698; text-align:right; letter-spacing:0.1em; color:#fff; }
.top_tab DIV.handle:hover {background: #ff6e00; }
.top_tab .hide {float: left; width: auto; background: #fff; margin:0; padding: 30px 10px 10px; text-align: left; display: none; overflow:overlay; }
#contact {top:0; right:5px; width: 160px;}
#sponsors {top:0; right:170px; width: 240px;}
#search {top:0; right:380px; width: 240px;}
#search .hide {width: 220px;}
#beta {top:0; left:0; width:50px;}

#floater {}
#fb-like-box {position:relative; top:70px; left:-120px; color:#666;}

#search_box {position:relative; top:72px; left: 330px; color:#666; z-index:60;}
	#search { }
	#search input[type="text"] {
		background: url(images/search-dark.png) no-repeat 10px 6px #efecd6;
		border: 0 none;
		font: bold 12px Arial,Helvetica,Sans-serif;
		color: #d7d7d7;
		width:100px;
		padding: 6px 15px 6px 35px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		/*text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);*/
		-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3) inset;
		-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3) inset;
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3) inset;
		-webkit-transition: all 0.7s ease 0s;
		-moz-transition: all 0.7s ease 0s;
		-o-transition: all 0.7s ease 0s;
		transition: all 0.7s ease 0s;
		}
	#search input[type="text"]:focus {
		background: url(images/search-dark.png) no-repeat 10px 6px #fcfcfc;
		color: #6a6f75;
		width: 280px;
		-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
		-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
		text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
		}
		
		
#page_wrapper {width: 860px; margin: 150px 0 0 -170px; padding: 0 0 0 10px; background: #efecd6; color:#4d4d4d; z-index:1;}
#line_holder, #page, #name_img, #icons, #nav_buttons, #fb-t-yt {position: absolute;}
#name_img {  top: 62px;left: -95px}
#icons {top: 95px; left: 630px; z-index:55;}
/*#nav_buttons {top: 140px; left: 132px;}*/

.nav_links {position: absolute; height: 30px; width: 130px; top: 151px; z-index:102; font-size: 14px; letter-spacing:2px; display: block; background-color: rgba(0,0,0,0)}
.nav_links img {position: absolute; top: -20px; left: 0px; display: none;}
.nav_links div {color: #666; background-color: #fff; padding: 6px 10px 8px; letter-spacing: 1.5px; display: none;}
.nav_links.active, .nav_links.active div, .nav_links.active img, #primary .nav_menu_x.active {display: block;}
.nav_links.active div {color: #999;}

#page #events {left: 130px;}
#page #classes {left: 270px;}
#page #rent {left: 410px;}
#page #about {left: 550px;}

#primary {z-index:99;}
#primary .nav_menu_x li {margin: 10px 5px 10px 20px; width: 200px; z-index:10;}
#primary .nav_menu_x a {color: #666; font-weight: lighter; font-size: 13px;}
#primary .nav_menu_x {position: absolute; top: 181px; background-color: #fff; display: none;}

#primary #events-id {left: 35px; z-index:20;}
#primary #classes-id {left: 175px; z-index:21;}
#primary #rent-id {left: 315px; z-index:22;}
#primary #about-id {left: 455px; z-index:23;}

#page #facebook, #page #twitter, #page #youtube {position: absolute; left: 700px; width: 50px;}
#page #facebook:hover, #page #twitter:hover, #page #youtube:hover {background-color:#ff82b4;}
#page #facebook {top: 131px; height: 50px;}
#page #twitter {top: 181px; height: 40px;}
#page #youtube {top: 221px; height: 50px;}

#fb-t-yt {top: 131px;left: 700px;}

#content_container {width:590px; padding-top:10px; float:left;}
#content_container li { list-style-type:disc; margin:0 0 3px 25px; font:13px Helvetica, sans-serif;}
#wide_page #content_container {margin:0 10px; float: left;}

.widget_sp_image {float: left; margin-bottom:0;}
#page_wrapper .widget_sp_image {}
#secondary .widget_sp_image {margin-top: 0px;}

/*.entry-title {float: left;}*/

#dynamic_bar {width: 220px; float:right; padding:20px 10px 0 0; margin-top: 0;}
#dynamic_bar .sidebar {width: 220px; margin-bottom: 25px;}
#wide_page #dynamic_bar {float: left; margin-top: 0px;}

#dynamic_bar .dynamic {background: none; width: 220px; height: 120px; margin: 10px 0;}
#wide_page #dynamic_bar .sidebar {width: 220px;}

.entry-content img { max-width: 590px; }

h2.widgettitle {display:none;}

/*---:[ Sidebar Widget Text Buttons ]:---*/

#secondary .textwidget a {display:block; clear:both; margin:5px 0; padding:10px 10px 8px; background-color:#ff82b4; font-size:11px; font-weight: bold; text-transform:uppercase; letter-spacing:0.1em; line-height:13px; color:#FFF;}

	#secondary .textwidget a.big {display:block; clear:both; margin:5px 0; padding:23px 10px 18px 10px; font-size:28px; font-weight: bold; text-transform:uppercase; letter-spacing:0em; line-height:27px; text-align:left;}
	#secondary .textwidget a.pink {background-color:#ff82b4; color:#FFF;}
	#secondary .textwidget a.orange {background-color:#ff6e00; color:#FFF;}
	#secondary .textwidget a.green {background-color:#2eff93; color:#000;}
	#secondary .textwidget a.blue {background-color:#00ffff; color:#000;}

#secondary .textwidget a:hover {background-color:#000; color:#FFF;}

/*---:[ Typography ]:---*/

	#page_wrapper p {font:13px Helvetica, sans-serif; line-height:16px; margin-bottom:15px}
		#page_wrapper em {font-family:Helvetica, sans-serif;}

	#page_wrapper h1 {font:32px futura, Helvetica, sans-serif lighter; clear:both; color:#efecd6; line-height:36px; 
  		text-transform:uppercase; margin:25px 0 15px; padding:12px 10px; background-color:#939598; width: 570px; }
	#page_wrapper .barebones h1 {width: 660px;}
		#page_wrapper div > h1:first-child {margin-top:0;}
	#page_wrapper h1 a {color:#efecd6;}
	#page_wrapper h2 {font:20px futura, Helvetica, sans-serif; color:#939598; font-weight:bold; line-height:20px; text-transform:uppercase; margin:20px 0 10px;}
	#page_wrapper h3 {font-size:16px; line-height:15px; font-weight:bold; margin:10px 0 3px;}
	#page_wrapper h4 {font-size:12px; line-height:14px; font-weight:lighter;}
	#page_wrapper h5 {font:16px futura, Helvetica, sans-serif; color:#939598; font-weight:bold; line-height:20px; text-transform:uppercase; margin:20px 0 10px;}
	#page_wrapper p a  {color:#4D4D4D; background-color:#faf9f5; padding: 2px 5px; border-width:0 1px 1px 0; border-color:#999; border-style:solid;}

	#page_wrapper p a.nofx {background-color: transparent; padding: 0; border: none;}


	#page_wrapper p a:hover {color:#4D4D4D; background-color:#e8e5d1; border-width:1px 0 0 1px;}
	#page_wrapper .entry-content p a {padding:0; border-width:0;}
	#page_wrapper blockquote, #page_wrapper blockquote p {font-size: 16px; line-height:22px; font-style:italic; font-weight: lighter; margin: 10px 15px 10px 10px;}
	#page_wrapper ul { margin-bottom:15px;}
	
	
	#page_wrapper h2.entry-title {font-size:32px; line-height:36px; letter-spacing:0.04em; position:relative;}
	#page_wrapper h2.entry-title a { display: block; color:#939598; padding:10px 10px 20px; background-image:url(/wp-content/themes/sandbox/images/entry-title-BG-green.png); background-size: 100% 66px; }
	#page_wrapper h2.entry-title a:hover { color:#efecd6; background-image:url(/wp-content/themes/sandbox/images/entry-title-BG-hover.png);}
		
	.nav-below { height:14px; margin-top:1em; padding: 10px; background-color:#ff6e00; font-size:10px; text-transform:uppercase; letter-spacing:0.1em; line-height:16px;}
	.nav-below a { color:#FFF;}
	.nav-below a:hover { color:#ccc; }

	hr {color: #ff6e00; border-width:0; background-color: #ff6e00; height: 1px; margin:10px 0;}

/*---:[ Facebook Plugin ]:---*/
.fbFeedbackContent {width:440px !important;}
fb_iframe_widget {margin-left: 10px;}

/*---:[ events calendar ]:---*/

#calendar_event_box {margin: 0; width: 220px;}
#refresh_events {float: left; border: 1px solid #666; padding: 1px; margin: 8px 40px; -moz-border-radius: 15px; border-radius: 15px; height: 26px; width: 26px; overflow: hidden;} 
#refresh_events:hover {border:1px solid #333;}
#refresh_events img {border: 1px solid #EFECD6; padding: 4px; float: left; opacity: .6;}
#refresh_events img:hover {border: 1px solid #666; background: #ddd; -moz-border-radius: 15px; border-radius: 15px; opacity: 1;}
#calendar_event_box .anEvent {border-bottom: 2px solid cyan; margin: 0; padding: 5px 0 10px;}
#content_container #events_header, #calendar_event_box h2, #calendar_event_box h4, #calendar_event_box h5 {font-family: sans-serif; color: #222;}
#content_container #events_header {display: block; float: left; margin: 10px 0px;}
#calendar_event_box h1 {font-size: 20px !important;}
#calendar_event_box h2 {font-size: 15px; margin: 15px 0px; clear: left;}
#calendar_event_box h4, #calendar_event_box h5 {font-size: 14px; margin-left: 50px; color: #444; padding: 4px 0;}


/*---:[ Twitter ]:---*/

		.widget_twitter {width: 220px;}
		#page_wrapper .widget_twitter {color:#666; font-weight: normal; padding: 0; width: 220px;}
		#page_wrapper .widget_twitter h2.widgettitle {display:block; height:25px; width:200px; margin:0 0 0 -2px; padding:0; background:url(/wp-content/themes/sandbox/images/tweets_page.png) no-repeat;}
		.widget_twitter ul li {font-size: 11px; font-family: Helvetica, sans-serif; margin: 10px 0 9px; padding-bottom:7px; border-bottom:2px #00ffff solid; overflow: hidden;}
		.widget_twitter ul li a { color:#666;}
		.widget_twitter ul > li:first-child { font-size:13px; font-weight: bold;}
		.widget_twitter ul > li:last-child {border-bottom:0px #FFF solid;}
		.timesince {font-size:9px; color:#666; clear: both; font-weight: normal;}

      
/*---:[ Footer ]:---*/
#page #floater #footer {color: #555; border-top: 1px solid #666; width: 700px; margin-left: -160px; padding-top: 20px; margin-bottom:20px;}
#footer h3, #footer h5 {font-family: helvetica; font-weight: lighter; margin: 3px;}
#footer p, #footer img {float: right;}
#footer p {font-size: 9px; text-align: right; margin: -35px -160px;}
#footer img {height: 45px; margin: -40px -210px; opacity: .6;}