/* @override 
	http://tale-of-tales.com/g/a.css */

/*--- added by ToT ---*/
.otherDev {width:100%; font-size: 80%; font-style: italic;}
.otherDev A {font-weight: bold; font-size: inherit; font-style: italic; color: inherit; font-family: inherit;}
.cont H4 A {font-size:inherit;}
.photoCredit {font-size: 80%; font-style: italic;}
/*--- for columns on ABOUT page ---*/
.wideVersion {display:block;}
.narrowVersion {display:none;}
@media only screen and (max-width: 960px) {
.wideVersion {display:none!important;}
.narrowVersion {display:block!important;}
}

                   


/*--- General ---*/
*{margin:0;padding:0;overflow-x: hidden}
body{font-size:14px;line-height:22px;color:#3a4046;background:#f5f3e9;font-family: 'Quicksand', sans-serif;-webkit-font-smoothing:antialiased;}
.left{float: left}
.right{float: right}

/*--- Text ---*/
a{color:#cf1332;text-decoration: none;font: italic 15px/23px "Hoefler Text", serif;}
a:hover{text-decoration: underline}
h1{text-indent:-9999px;background:url("logo.png") no-repeat;background-position:center;padding:5em 0 0 0;overflow-y: hidden}
h2{font: 25px/25px "Hoefler Text", serif;text-transform: uppercase;float: left;padding:10px 10px 0 10px;overflow-y: hidden}
h3{margin: 0 0 5px;font-weight: normal;font-size: 22px;font-style: normal}
h4{background:url("icon_mail.png") no-repeat;text-indent:55px;font: 28px/25px "Hoefler Text", serif;float: left;padding:20px 0}
p{float:left;padding:10px}
.centered{width: 100%;text-align: center;padding-bottom: 20px}
.smallText{font-size:12px;line-height:12px;}
.smallWidth{width:400px!important;padding:50px 80px 0 0}
.contWide{width:480px!important;padding:20px 20px 10px 30px!important}

/*--- Main sections ---*/
#wrap{width:1000px;margin:0 auto;clear: both;}
header{width:100%;background:#fff;text-align:center;padding:0em 0 4em 0;border-style: solid;border-width: 0px 0px 28px;-moz-border-image: url(border.png) 0 0 28 repeat;-webkit-border-image: url(border.png) 0 0 28 repeat;-ms-border-image: url(border.png) 0 0 28 repeat;-o-border-image: url(border.png) 0 0 28 repeat;border-image: url(border.png) 0 0 28 fill repeat;}

/*--- Navigation ---*/
nav{margin-top: 12px;}
nav a{font: 18px/25px 'Quicksand', sans-serif;color:#3a4046;padding:0 10px;text-transform: uppercase;}
nav a:hover{color:#cf1332;text-decoration: none}
nav a.active{color:#3a4046;font-weight: bold}


/*--- Content boxes---*/
.featured{margin: 40px 0px;overflow-y: auto;background: #fff;}
.featuredSPECIAL iframe{margin:auto; display:block;width:600px;height:300px;}
.featured iframe{float: left;width:520px;height:345px}*/
.featuredSPECIAL .cont{margin:auto;padding: 40px 40px 10px 40px;width:600px}
.featured .cont{float:left;padding: 40px 40px 10px 40px;width:400px}
.featured img{width:470px}
.featured .cont h2{padding:	10px 0 0 10px}

/*--- News boxes ---*/
#columns{margin: 0 0 20px 0;float: left}
#columns .item{width:320px;background:#fff;margin:0px 20px 0 0;float:left;display:block;}
#columns .cont{padding: 20px;overflow: hidden;height:230px}
#columns img{width:100%}
#columns .cont img{margin: 20px;width:100%}
.last{margin-right: 0px!important}
.button{background: #fff;width: 200px;text-align: center;clear: both;display: block;margin: 0 auto;padding:20px;font-size:18px}
.newsLink{float:left;padding:10px;clear:left;}
.date{color:#d5d5d5;font-weight: bold;text-transform: none;clear: both;float: left;padding-left:10px;margin-top:-15px}
#newsHolder{height:400px;width:100%;overflow: hidden;margin: 50px 0;}
#news2{float: left;border: none;position: relative;width:100%;height: 600px;margin-top:-220px}
#news2 div#page{font-size:17px;line-height:25px;color:#3a4046;background:#f5f3e9;font-family: 'Quicksand', sans-serif;-webkit-font-smoothing:antialiased;}
#news2 div#page #header{display: none;}
body.index{background-image: none;background-color:#f5f3e9}

/*--- Tumblr integration styles ---*/
.tumblr_posts{width:100%;overflow: hidden}
.tumblr_post{width:300px;background:#fff;margin:20px 20px 0 0;float:left;display:block;}	
.tumblr_title{font: 28px/25px "Hoefler Text", serif;text-transform: uppercase;float: left;padding:20px}
.tumblr_body img{width:100%}
.tumblr_caption p{padding:10px 20px}
.tumblr_video{width:100%}
.read_more_container{}
.read_more_container a{}
.tumblr_quote_post{width:400px;background:#fff;margin:20px 20px 0 0;float:left;display:block;}
.tumblr_quote {padding:20px;}
.tumblr_source{}
#tumblr_controls.visible {visibility:hidden}
#nav-bottom{display: none;}
#page.pagination{display: none}

.fanItem{float:left;width:300px;margin:20px 20px 0 0;background: #fff}


/*--- Footer ---*/
footer{background: #fff;padding:50px 0;margin-top:20px;clear:both;overflow: hidden;border-style: solid;border-width: 28px 0px 0px;-moz-border-image: url(border.png) 28 0 0 repeat;-webkit-border-image: url(border.png) 28 0 0 repeat;-ms-border-image: url(border.png) 0 0 28 repeat;-o-border-image: url(border.png) 28 0 0 repeat;border-image: url(border.png) 28 0 0 fill repeat;}
footer .cont{margin:0 auto;width: 1000px;}
footer .left{width:400px;float: left;clear:both;background: url("line.png") no-repeat;background-position: right 70px;border-top: #ccc 1px solid;padding-right:80px;margin: 30px 0;padding-top: 30px;}
footer .right{width: 460px;float: right;border-top: #ccc 1px solid;padding-left:60px;margin: 30px 0;padding-top:30px;}
footer .cont a{font: 14px/20px 'Quicksand', sans-serif;color:#3a4046;}
footer .cont a:hover{color:#cf1332;text-decoration: none}
footer nav{float: right;font: 20px/25px 'Quicksand', sans-serif;color:#3a4046;}
footer nav a.active{font-weight: bold}

/*--- Banner ---*/
.sy-list{overflow-y:hidden}
.sy-box{overflow-y:hidden}
.sy-caption{overflow-y: hidden;}
.sy-slides-wrap{overflow-y: hidden; padding-bottom: 40px;}
.sy-caption-wrap {overflow-x:visible!important;overflow-y:visible!important}
.demo_wrapper {width: 40%;margin: 0 auto;}
.demo_block {width: 100%;}
.contLeft{width:300px;display: block;float: left;padding-left: 20px}
.contLeft a{padding-left: 10px;float: left;clear: both}
.sy-caption p{width: 600px!important;}
ul.sy-pager{margin:2em 0 0}
.longtitle{width: 300px}
.sy-caption a:link{font-weight: normal!important;}
.sy-pager li{ overflow:hidden!important}
.sy-pager li a{ height:auto; -webkit-border-radius:0; border-radius:0 }
.sy-slide > a >img { padding-top: 10px; }

/*--- Forms ---*/
.contact{border-left: 40px #f5f3e9 solid;width:400px!important}
#contactform{width:350px;float:left;padding-left:10px;clear: left;margin-top: 20px}
#contactform input, #newsletterform input{font: normal 18px/25px "Hoefler Text", serif;width:320px;height:26px;float:left;background: #f5f3e9;border:1px #eae9e5 solid; color:#a3a3a3;outline:none;padding:10px;margin-bottom:15px;clear:both}
#contactform textarea{font: normal 18px/25px "Hoefler Text", serif;width:320px;height:300px;float:left;background: #f5f3e9;border:1px #eae9e5 solid; color:#a3a3a3;outline:none;padding:10px;margin-bottom:15px}
#contactform input.submit{color:#cf1332;text-decoration: none;font: italic 20px/25px "Hoefler Text", serif;background: none;border: none;text-align: left;padding:0}
#contactform input.submit:hover{text-decoration: underline;cursor: pointer;}
#newsletterform{padding:105px 50px 0 0}
#newsletterform input{clear: none;}
#newsletterform input.submit{color:#cf1332;text-decoration: none;font: italic 20px/25px "Hoefler Text", serif;background: none;border: none;text-align: left;padding:0;float:right;width:auto;margin-top: 15px}
#newsletterform .submit:hover{text-decoration: underline;cursor: pointer;}

/*--- Social sprite ---*/
#social{margin-left: 120px;margin-top:40px;float: left;overflow-x: visible}
#social a{padding-left: 0;clear: both;margin-top: 15px;text-indent:50px;font: 20px/25px 'Quicksand', sans-serif;color:#3a4046;text-transform: uppercase;padding-top: 7px;float:left;overflow-x: visible}
#social a:hover{color:#cf1332;text-decoration: none}
.socialFade {display: inline-block;position: relative;width:40px;height:33px;background: url(socialSprite.png) no-repeat;}
.flickr{background-position:0px 0}
.twitter{background-position:-40px 0}
.tumblr{background-position:-80px 0}
.skype{background-position:-120px 0}
.youtube{background-position:-160px 0}
.socialFade span {position: absolute;top:0;left:0;bottom:0;right:0;background: url(socialSprite.png) no-repeat;background-position:0 -40px;opacity:0;-webkit-transition: opacity 0.5s;-moz-transition:opacity 0.5s;-o-transition:opacity 0.5s}
.flickr span{background-position:0px -40px}
.twitter span{background-position:-40px -40px}
.tumblr span{background-position:-80px -40px}
.skype span{background-position:-120px -40px}
.youtube span{background-position:-160px -40px}
.socialFade:hover span {opacity:1}

/*--- Responsive layout ---*/
@media only screen  and (max-width:1100px) {
	#wrap{width:900px;margin: 0 auto;clear: both;}
	#columns .item{width:286px;}
	.featured .cont{width:340px;padding:30px 30px 0 30px}
	.featured iframe{width:480px;height: 320px}
	.featured img{width:500px}
	.sy-caption-wrap div.sy-caption {padding: 20px 50px!important;width:800px;height:100px}
	.sy-caption p{width: 450px!important;}
	.sy-caption-wrap {bottom:-2em!important}
	ul.sy-pager{margin:2em 0 0}
	.contLeft{padding-left:20px;}	
	footer .cont {width:900px;}
	footer .left, footer .right{width:420px;background: none;padding-right:0;margin:40px 0}
		#social{margin-left: 15px}
	#social a{clear:none;margin-right: 120px}
	#contactform textarea{width: 800px}
	.aboutimage{width:460px;float: none;display: block;margin: 0 auto;padding: 30px 0 0 0;}
	.contWide{width:860px;padding:20px 0px 10px 10px!important;display: block;float: none!important;margin: 0 auto;}
	footer nav{text-align: center;float: none}
	footer .cont img{float: none;margin: 0 auto;display: block;padding-bottom:20px;}
	
	
}

@media only screen and (max-width:960px) {
	header{padding:0 0 4em 0}
	#wrap{width:740px;margin: 0 auto;clear: both}
	.last{display: none!important}
	.featured .contact{border-left:none;border-top: 40px #f5f3e9 solid;margin:0px!important;width:100%}
	#contactform{width:650px!important}
	#contactform textarea{width:650px!important}
	.sy-caption p{display: none}
	.sy-caption .contLeft{width: 100%}
	.sy-caption .contLeft h2{float: none;padding:15px}
	.sy-caption .contLeft a{float: right;margin-top:-35px}
	.sy-caption-wrap div.sy-caption {padding: 20px 30px;width:640px;height:50px}
	.sy-caption-wrap {bottom:-0em!important}
	ul.sy-pager{margin:1.5em 0 0}
	.featured .cont{width:600px!important;padding:30px;float:none;margin: 0 auto;}
	.featured iframe{width:100%;}/* max-width:600px; max-width ADDED BY MICHAEL*/
	.featured img{display:block;padding-top:30px;float:center;margin:0 auto}
	#columns .item{width:350px;}
	.contLeft{padding-left:0px;}
	footer .cont {width:740px;padding:30px}
	#contactform textarea {width: 660px}
	footer .cont img{float: none;margin: 0 auto;display: block;padding-bottom:0px;}
	footer .left, footer .right{width:370px;padding-left: 0}
	footer .right{width:360px;padding-left:10px}
	footer nav{text-align: center;float: none}
	#newsletterform{padding:0 70px 30px}
	.sy-slide > a >img {
		padding-top: 30px;
	}
	.featured3, .specialCol{
		width: 566px!important;
		height: auto;
	}
	.threeColimg{
		width: 540px!important;
		height: 180px!important;
	}
}

@media only screen and (max-width:780px)  {
	header{padding:0 0 4em 0}
	#wrap{width:600px;margin: 0 auto;clear: both}
	.featured .cont{width:500px!important;padding:20px}
	#columns .item{width:280px}
	.sy-caption-wrap div.sy-caption {padding:20px!important;width:560px;height:50px;}
	.sy-caption .contLeft{width: 100%}
	.sy-caption .contLeft h2{float: left;}
	.sy-caption .contLeft a{float: right;padding-right:20px;}
	.sy-caption p{display: none}
	footer{padding:0px}
	footer .cont {width:600px;}
	footer .left, footer .right{width:600px;clear: both;margin: 20px 0;padding: 20px 0 0 0}
	#contactform input, #newsletterform input{width:430px}
	#contactform textarea {width: 430px}
	#newsletterform{padding:0 0 40px 70px;float: left}
	.footClear{clear:left}
	.sy-slide > a >img {
		padding-top: 30px;
	}
	.featured3, .specialCol{
		width: 566px!important;
		height: auto;
	}
	.threeColimg{
		width: 540px!important;
		height: 180px!important;
	}
	.game{
				padding: 10px;
	}
}

@media only screen and (max-width:600px)  {
	#wrap{width:400px;margin: 0 auto;clear: both}
	#social{margin-top: 0px}
	.featured .cont {padding:20px;width:360px!important}
	.featured img {padding-top:0px}
	.last{display:block!important}
	.sy-caption .contLeft{width: 100%}
	.sy-caption-wrap div.sy-caption{height:70px}
	.sy-caption .contLeft h2{width: 100%;text-align: center;padding:15px 0 0 0!important;float: left}
	.sy-caption .contLeft a{width: 100%;text-align: center;float: left;padding: 10px 0 0 0!important;font-size: 16px;margin-top: -5px;}
	.sy-slides-wrap{overflow-y: hidden; padding-bottom: 55px;}
	#columns .item {width:100%;margin-bottom: 20px}
	footer .cont {padding:20px;width:400px}
	footer .left, footer .right{width:400px}
	.sy-caption-wrap div.sy-caption{padding: 5px 0!important;width:400px;}
	footer{margin-top:20px}
	#contactform input, #newsletterform input{width:320px}
	#contactform textarea {width: 320px}
	#newsletterform{padding: 30px!important;}
	#newsletterform input.submit{float: left}
	.sy-slide > a >img {
		padding-top: 30px;
	}
	.featured3, .featured2, .specialCol{
		width: 273px!important;
		height: auto;
	}
	.threeColimg, .twoColimg{
		width: 250px!important;
		height: 130px!important;
	}
	.game{
				padding: 10px;
	}
}

/*for teeny tiny phones*/
@media only screen and (max-width:400px)  {
#wrap{width:315px;margin: 0 auto;clear: both}
.featured .cont {padding:20px;width:280px!important}
.featured img{width: 320px}
footer .cont {padding:20px;width:280px}
footer .left, footer .right{width:280px}
footer .cont img {width:80%;padding-top:10px}
.sy-caption-wrap div.sy-caption{padding: 5px 0!important;width:32 0px;}
h4 {background: none;text-indent: 0;font: 25px/25px "Hoefler Text", serif;padding: 10px;}
#contactform {width:320px!important}
#contactform input, #newsletterform input{width:240px}
#contactform textarea {width: 240px!important}
.sy-caption-wrap div.sy-caption{width:320px;}
.sy-slides-wrap{overflow-y: hidden; padding-bottom: 55px;}
.sy-slide > a >img {
	padding-top: 30px;
}
.featured3, .featured2, .specialCol{
	width: 273px!important;
	height: auto;
}
.threeColimg{
	width: 250px!important;
	height: 90px!important;
}
.twoColimg{
	width: 250px!important;
	height: 120px!important;
}
.game{
			padding: 10px;
}
}