/* -----------------------------------------------------------
	 General Styles
----------------------------------------------------------- */

@import url("reset.css");
@import url("http://fonts.googleapis.com/css?family=Fjalla+One");
@import url("content.css");
/*@import url("join-boxes.css");*/


/* Selection colours (easy to forget) */
.clear{clear:both;}

body {
	width: 100%;
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
	font-family:Arial, Tahoma;
	background:#333333 url("../images/bg_main.jpg") fixed top center;
	position:relative;
	line-height: 20px;
}
.clear{ clear: both; }

#main{
	width:960px;
	margin:0 auto;
	padding-top: 35px;
	position:relative;
	z-index:10;
}

h1, h2{
	border-bottom:#000000 1px solid;
	margin-bottom:10px;
	font-family: 'Fjalla One', sans-serif;
	font-size:25px;
	text-transform: uppercase;
	padding:20px 20px 10px 20px;
	clear:both;
	display:block;
	height:20px;
	background: #ffb6fc url("../images/hearts.png") no-repeat center right;
	-webkit-box-shadow: 0px 0px 4px 0px #EDEDED;
	box-shadow: 0px 4px 0px 0px #EDEDED;
}
h2.tweet{
	background:#c2dce5 url("../images/icon_tweet.png") no-repeat 15px center !important;
	padding-left:50px;
}
h2.pink{ background: #ffb6fc url("../images/hearts.png") no-repeat center right; }
h2.blue{ background: #c2dce5 url("../images/hearts.png") no-repeat center right; }

a, a:visited{ color:#CC00CC; text-decoration: none; }
a:hover{ color:#000000; text-decoration: underline; }

#footer a, #footer a:visited{ color:#FFFFFF; text-decoration: none; }
#footer a:hover{ color:#ffccff; text-decoration: underline; }

.lleft{ float:left; display:block; }
.rright{ float:right; display: block; }
.slleft{ text-align:left; }
.srright{ text-align: right; float:right; }

/* table styles */
	.table {
		display: table;
		width:100%;
	}
	.table.borders{
		border-top:#CCCCCC 1px solid;
		border-left:#CCCCCC 1px solid;
	}
	.row {
		display: table-row;
	}
	.row.header {
		background-color:#EDEDED;
		border-bottom:#CCCCCC 1px solid;
		font-weight:bold;
		text-transform:uppercase;
		font-size:13px;
	}
	.calendar .row.header {
		background-color:#CCCCCC;
		border-bottom:#999999 1px solid;
	}
	.row.incycle {
		background-color:#f5f5f5;
	}
	.cell {
		display: table-cell;
		padding:0.5em 0 0 0.5em;
		vertical-align: middle;
	}
	.cell.left {
		text-align:right;
		width:10%;
	}
	.cell.right {
		text-align:left;
		width:55%;
	}



/* 960 */
@media only screen and (min-width: 960px) {
	/*body{ width:960px; margin:0 auto; }*/
	#topbar { width:960px; }
	/*#topbar .counter { width:860px; margin:0 auto; }*/
	#main{ width:960px; margin:0 auto; }
	#header .logo img{ width:960px; height:223px; }
	#header #menu ul li a{ padding:12px 31px; font-size: 22px; }

	.vthumb.big img{ width:693px !important; height:477px !important; }
	.vthumb.small img{ width:233px !important; height:155px !important; }
	.pthumb img{ width:306px !important; height:469px !important; }
	.cats .lupdate { width:307px; height:210px; }
}

/* 768 */
@media only screen and (min-width: 768px) and (max-width: 960px) {
	/*body{ width:768px; margin:0 auto; }*/
	#topbar { width:768px; }
	#topbar .counter { width:768px; margin:0 auto; }
	#topbar .counter .liveshow.faketgp{ width:550px; }
	#topbar .counter .title { display: none !important; }
	#main{ width:768px; margin:0 auto; padding-top: 35px; }
	#header{ width:768px; height:238px; }
	#header .logo img{ width:768px; height:178px; }
	#header #menu{ width:768px; }
	#header #menu ul li a{ padding: 12px 17px; font-size: 22px; }
	#header #menu ul li:last-child a{ /*width: 93px;*/ }
	#index_main_trailer .ifr #mediaplayer{ width:743px !important; height:399px !important; }
	#index_main_trailer .ifr .overlay{ width:743px !important; height:399px !important; }
	#index_main_trailer .ifr #mediaplayer img{ width:100%; height:100%; }
	.trailer_join{ width:700px; font-size: 30px; }
	.sect .welcome{ width:744px; height: 375px; clear:both; float:none; }
	.sect .graphic_buttons{ width:744px; margin-left:0px; margin-top:18px; clear:both; float:none; }
	.sect.index_two_blocks{ height:830px; }
	.sect.index_two_blocks .graphic_buttons a.graphic_btn.first { margin-left: 150px; }
	.sect .welcome .tweets { height:120px; }
	.sect.updates .bod { height: 860px; }
	.sect.friends .bod { height: 1745px; }
	.sect.fourbuttons .bod { height: 202px; }
	.set img { width:230px; height:133px; }
	.btn_continue, .btn_join { width:374px; font-size:50px; }

	.section-content.joinform{ display:none; }
	.mobileoptions { display: block !important; }
	.text.pjoin { padding-left: 0px !important; }

	.cats .lupdate{ margin: 13px 1px; }
	/*.cats .lupdate .thumb { width:110px; height:148px; }*/
	.cats .lupdate .thumb img { width:238px; height:auto; }
	/*.cats .lupdate .thumb img:hover { width:142px; height:191px; }*/

	.vthumb.big img{ width:740px !important; height:501px !important; }
	.vthumb.small img{ width:245px !important; height:162px !important; }
	.pthumb img{ width:245px !important; height:372px !important; }

	.preview.bonusbox.big .thumb img { width:222px; height:222px; }
	.pthumb .info { font-size:11px; }

	.footer4 img { width: 178px; height:202px;}

	.friend { margin:13px 2px; }
	.friend img { width: 238px; height: auto;  }

	.srright{ display: none; }
	.cats .lupdate { width:242px; height:170px; }
}

/* 300 */
@media only screen and (max-width: 767px) {
	/*body{ width:300px; margin:0 auto; }*/
	#topbar { width:300px; }
	#topbar .counter { width:300px;}
	#topbar .counter .liveshow.faketgp{ width:300px; }
	#topbar .counter .title, .counter .simple_counter { display: none !important; }
	#topbar .counter .date { font-size:14px; }
	#main{ width:300px; margin:0 auto; padding-top: 50px; }
	#header{ width:300px; height:165px; }
	#header .logo img{ width:300px; height:70px; }
	#header #menu{ width:300px; }
	#header #menu ul li a{ padding: 0px 16px; }
	#header #menu ul li.m_mj a{ padding: 0px 10px; font-size:24px;}
	#index_main_trailer .ifr #mediaplayer{ width:280px !important; height:150px !important; }
	#index_main_trailer .ifr .overlay{ width:280px !important; height:150px !important; }
	#index_main_trailer .ifr #mediaplayer img{ width:100%; height:100%; }
	.trailer_join{ width:256px; font-size: 18px; line-height:25px; }
	.sect .welcome{ width:276px; height: 600px; clear:both; float:none; }
	.sect .graphic_buttons{ display:none; }
	.sect.index_two_blocks{ height:605px; }
	.sect.index_two_blocks .graphic_buttons a.graphic_btn.first { margin-left: 150px; }
	.sect.updates .bod { height: 2600px; }
	.sect.friends .bod { height: 1680px; }
	.sect.fourbuttons .bod { height: 1155px; }
	.set img { width:258px; height:149px; }
	.btn_continue, .btn_join { width:300px; height:100px; line-height:100px; font-size:35px; float:none; }
	.btn_join { margin-left:0px; margin-top:10px; }
	.friend { font-size:11px; }
	.friend img { width:132px; height:auto; }
	h2 .rright{ display:none; }
	#header #menu{ background:#EDEDED; height:85px; padding-top:10px; }
	#header #menu ul li{ border-right:#000000 0px solid; }
	#header #menu ul li a{ height:25px; line-height:25px; }
	#header #menu ul li.m_normal{ font-size:12px; }
	#header #menu ul li.m_normal a{ padding:0px 7px 10px 7px; font-size:16px; }
	#header #menu ul li.m_mj { padding:15px 2px 10px 2px; }
	#header #menu ul li a:hover{ background:inherit !important; }

	.sect .welcome .tweets { height: 220px; }
	.sect .bod.about{ background:#FFFFFF; min-height: 1px; }
	.sect .bod.about .abouttxt{	padding-left:0px; }
	.sect .bod.about .abouttxt .ul_about{ padding-left:25px; }

	.sect .bod.join{ background:#FFFFFF; min-height: 1px; }
	.sect .bod.join .jointxt{	padding-left:0px; }

	.section-content.joinform{ display:none; }
	.mobileoptions { display: block !important; }
	.mobileoptions .sect { width: 265px; }
	.text.pjoin { padding-left:0px !important; }
	.btn_signup { width:100% !important; }
	.jbox { width:270px !important; }
	.jbox .jtitle { width:auto !important; line-height:15px !important; }
	.jcont input[type="text"], .jcont input[type="select"] { width: 268px !important; }

	.cats .lupdate{ /*width:127px;*/float:none; }
	/*.cats .lupdate .thumb { width:120px; height:168px; }*/
	.cats .lupdate .thumb img { width:260px; height:auto; }
	/*.cats .lupdate .thumb img:hover { width:142px; height:191px; }*/

	.vthumb.big img{ width:273px !important; height:185px !important; }
	.vthumb.small img{ width:273px !important; height:181px !important; }

	.pthumb img{ width:274px !important; height:416px !important; }

	.preview.bonusbox.big { margin:5px !important; font-size:11px; }
	.preview.bonusbox.big .thumb img { width:82px; height:82px; }

	.footer4 img { padding: 27px 0px 0px 27px; }

	.cats .lupdate { width:242px; height:195px; }
}