/*
	McFly Super City - mobile.css
	by Chris Lawes (Chris@TheUnit.co.uk)
*/


/*-------------------------------------------------
	HAND PHONES
-------------------------------------------------*/

body{
    -webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
}

/*-------------------------------------------------
	LITTLE SCREENS && PHONES (UPWAYS)
-------------------------------------------------*/

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

	/* HIDE STUFF */
	
	#video-js-box,
	header #top-nav,
	.menu-community,
	footer, #member-menu,
	.why_join, .news_nav,
	.super_city_chatter,
	#archive-panel,
	body.videos .page_type,
	#gallerycomments,
	body.videos .comment_title,
	span.diary_comments,
	a.diary_more,
	.photo_gallery .drop_down,
	.comment_title,
	.diary_event .comment_count,
	.diary_event .comments,
	.diary_event .grid_main_right,
	a.battle_logo,
	#slideshow-controls,
	#slideshow
	{display: none !important;}

	/* GRID LAYOUT */
	
	#container, header, #main,
	.center{width: 465px;}
		#container{padding: 0 0 20px 0;}
	
	.grid_full,
	.grid_split_left,
	.grid_split_right,
	.grid_main_left,
	.grid_main_right,	
	/*.grid_community_left
	.grid_community_mid,
	.grid_community_right,
	.grid_community_stretch,*/
	.grid_single{
		display: block; clear: both;
		width: 383px;
		margin: 0; 
		padding: 0 40px 20px 40px;
	}
	
	.home_feed ul li{margin: 0; padding: 0;}
	.why_join, #main-menu{margin: 0;}
	
	/* MOVE THINGS */
	
	body.home header, body.home header .center {height: 247px;}
		body.home header .center{background: url('../img/backgrounds/header.png') no-repeat top right;}
		header nav ul#main-menu li a{margin: 0 9px 0 0; letter-spacing: -1px;}
	#logo,
	a.battle_logo{
		left: 0; right: 0;
		margin-left: auto;
		margin-right: auto;
		border-radius: 8px;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
	}
	header nav{width: 100%;}
	
	/* HOME PAGE */
	
	.home_feed ul li div.news_left{width: 285px;}
	body.home h1{font-size: 32px;}
	.latest_news,
	.super_city_chatter{
		width: 370px;
		margin: 0 0 0 3px;
	}
	.list_right{left: 243px;}
	.news_nav{margin: 0 0 0 5px;}
		.news_nav li {padding: 5px 20px 0 5px;}
		
	/* NEWS */
	
	.news_post{width: 410px;}
		.post_excerpt h1{width: 340px; margin-left: 20px;}
		.post_excerpt p {width: 389px;}
		.news_post .news_post_after{width: 360px;}
			.news_post.top_story{padding-right: 25px;}
			.news_post .post_meta_date {left: -42px;}
	.news_post.media p{width: 230px}
			
	/* VIDEOS */
	
	.video_player{width: 360px;}
	body.videos #main .video_player *,
	body.videos #main .video_player object{width: 360px !important;}
	
	/* PHOTOS */
	
	body.photos #main{padding-top: 30px;}
		.photos .drop_down{left: 236px; top: -60px;}
		
	body.photos .featured_gallery{margin-bottom: 20px; clear: both; margin-left: 40px;}
	body.photos .band_gallerys{
		display: block; clear: both;
		left: 0; position: relative; top: 0;
	}
		.photos ul.gallery_thumbs li:first-child, .photos ul.gallery_thumbs li.first-child{margin-left: 0;}
		.photos ul.gallery_thumbs{width: 356px; margin: 0 0 0 40px;}
		
	/* DIARY */
	
	.diary .page_type{display: none;}
	.diary_events ul{width: 390px;}
	.diary_events ul li a.diary_title{width: 345px;}
	.diary_events ul li strong{height: 26px;}
	.diary_events ul li span.diary_desc{padding-bottom: 10px;}
	.diary_events ul li a.blue_button{width: 130px; margin-left: 258px;}
	a.button.back_to_diary{left: 285px;}
	.diary_event .single_story h1 {width: 350px; text-indent: 20px;}
	
	/* WEBCHAT */
	
	.webchat_bottom{height: 150px;}
	body.web_chat .web_chat_box span.instructions{position: relative; display: block; padding-bottom: 16px; right: 0px;}
	
	.web_chat_box object, .webchat_top *{width: 325px !important;}
	.webchat_bottom ul.letter_options{left: 20px; top:100px;}
	
} /* @media */

/*-------------------------------------------------
	LITTLE SCREENS && PHONES (SIDEWAYS)
-------------------------------------------------*/

@media only screen and (max-width: 480px) and (orientation: landscape), only screen and (max-device-width: 480px) and (orientation: landscape) {

	/* HIDE STUFF */
	
	#video-js-box,
	header #top-nav,
	.menu-community,
	footer, #member-menu,
	.why_join, .news_nav,
	.super_city_chatter,
	#archive-panel,
	body.videos .page_type,
	#gallerycomments,
	body.videos .comment_title,
	span.diary_comments,
	a.diary_more,
	.photo_gallery .drop_down,
	.comment_title,
	.diary_event .comment_count,
	.diary_event .comments,
	.diary_event .grid_main_right,
	a.battle_logo,
	#slideshow-controls,
	#slideshow
	{display: none !important;}

	/* GRID LAYOUT */
	
	#container, header, #main,
	.center{width: 685px;}
		#container{padding: 0 0 20px 0;}
	.grid_full,
	.grid_split_left,
	.grid_split_right,
	.grid_main_left,
	.grid_main_right,	
	/*.grid_community_left,
	.grid_community_mid,
	.grid_community_right,
	.grid_community_stretch,*/
	.grid_single{
		display: block; clear: both;
		width: 603px;
		margin: 0; 
		padding: 0 40px 20px 40px;
	}
	.home_feed ul li{margin: 0; padding: 0;}
	.why_join, #main-menu{margin: 0;}
	
	/* MOVE THINGS */
	
	body.home header, body.home header .center {height: 247px;}
		body.home header .center{background: url('../img/backgrounds/header.png') no-repeat top right;}
		
		header nav ul#main-menu li a{margin: 0 40px 0 0; letter-spacing: -1px;}
			a.menu-store {margin-right: 0;}
	#logo,
	a.battle_logo{
		left: 0; right: 0;
		margin-left: auto;
		margin-right: auto;
		border-radius: 8px;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
	}
	header nav{width: 100%;}
	
	/* HOME PAGE */
	
	.home_feed ul li div.news_left{width: 505px;}
	body.home h1{font-size: 32px;}
	.latest_news,
	.super_city_chatter{
		width: 590px;
		margin: 0 0 0 3px;
	}
	.list_right{left: 443px;}
	.news_nav{margin: 0 0 0 5px;}
		.news_nav li {padding: 5px 20px 0 5px;}
		
	/* NEWS */
	
	.news_post{width: 630px;}
		.post_excerpt h1{width: 560px; margin-left: 20px;}
		.post_excerpt p {width: 609px;}
		.news_post .news_post_after{width: 580px;}
			.news_post.top_story{padding-right: 25px;}
			.news_post .post_meta_date {left: -42px;}
	.news_post.media p{width: 430px}
			
	/* VIDEOS */
	
	.video_player{width: 580px;}
	body.videos #main .video_player *,
	body.videos #main .video_player object{width: 580px !important;}
	
	/* PHOTOS */
	
	body.photos #main{padding-top: 0px;}
		.photos .drop_down{left: 436px; top: -40px;}
	body.photos .featured_gallery{margin-bottom: 20px; clear: both; margin-left: 40px;}
	body.photos .band_gallerys{
		display: block; clear: both;
		left: 0; position: relative; top: 0;
	}
		.photos ul.gallery_thumbs li:first-child, .photos ul.gallery_thumbs li.first-child{margin-left: 0;}
		.photos ul.gallery_thumbs{width: 576px; margin: 0 0 0 40px;}
		.photos .band_gallerys li.harry_gallery{margin-bottom: 20px;}
		
	/* DIARY */
	
	.diary .page_type{display: none;}
	.diary_events ul{width: 610px;}
	.diary_events ul li a.diary_title{width: 565px;}
	.diary_events ul li strong{height: 26px;}
	.diary_events ul li span.diary_desc{padding-bottom: 10px;}
	.diary_events ul li a.blue_button{width: 200px; margin-left: 410px;}
	a.button.back_to_diary{left: 485px;}
	.diary_event .single_story h1 {width: 560px; text-indent: 20px;}
	
	/* WEBCHAT */
	
	.webchat_bottom{height: 100px;}
	body.web_chat .web_chat_box span.instructions{position: relative; display: block; padding-bottom: 16px; right: 0px;}
	.web_chat_box object, .webchat_top *{width: 545px !important;}
	.webchat_bottom ul.letter_options{left: 20px; top:55px;}
	
} /* @media (landscape) */

/*-------------------------------------------------
	Mr iPAD
-------------------------------------------------*/

body.ipad.room{background: none;}
body.ipad.room header, body.ipad.room header .center{height: 221px;}
body.ipad.room header .center.fade:after{display: none;}
body.ipad.room header .center.fade:before{display: none;}
body.ipad.room #logo{top:-60px;}
body.ipad.room #top-nav{top:-60px;}
body.ipad.videos .video_player{overflow: hidden;}
