/*
    MEDIA QUERIES (Extends from common.css)
*/

/*--------------------------------------------------------------
 <= 996px Narrow layout
--------------------------------------------------------------*/
@media only screen and (max-width: 996px) {

    /* BOXES
    ------------------------------------------*/
    /* BOX C (important updates) */
    .boxC h2 {
        padding-right: 0;
        background: none; }

    /* HEADER
    ------------------------------------------*/
    /* search */
    #fixedWrap .formItem input {width: 160px; }


    /*------------------------------------------
      PAGE SPECIFIC CSS
    ------------------------------------------*/
    /* HOMEPAGE
    ------------------------------------------*/
    #homepage .welcomeInner {padding: 0 530px 0 10px; }

} /* end media query */



/*--------------------------------------------------------------
 <= 768px Narrow layout
--------------------------------------------------------------*/
@media only screen and (max-width: 768px) {

    /* JAGS
    ------------------------------------------*/
    /******************** JAGS Core ********************/
    [class*=gs-wrp-6] [class*=gs-4]{clear:both}
    [class*=gs-wrp-3-bdr] [class*=gs-3],[class*=gs-wrp-6-bdr] [class*=gs-6],[class*=gs-wrp-6-bdr] [class*=gs-3]{border-width:0;margin:0}
    [class*=gs-wrp] [class*=fl-25],[class*=gs-wrp] [class*=fr-25]{width:33%}
    [class*=gs-wrp] [class*=fl-75],[class*=gs-wrp] [class*=fr-75]{width:66%}
    [class*=gs-wrp] [class*=fl-66],[class*=gs-wrp] [class*=fl-33],[class*=gs-wrp] [class*=fr-66],[class*=gs-wrp] [class*=fr-33]{float:none}
    [class*=gs-wrp] [class*=fl-33],[class*=gs-wrp] [class*=fr-33],[class*=gs-wrp] [class*=fl-66],[class*=gs-wrp] [class*=fr-66]{width:auto}


    /* MAIN LAYOUT
    ------------------------------------------*/
    #pageWrap {margin-left: -20px; }

	.showMenu #pageWrap {
	    left: 215px;
	    -moz-transition: left .5s;
	    -webkit-transition: left .5s;
	    transition: left .5s;
	    margin-left: 0; }

	.pageWrapInner {
		padding-left: 20px;
		background: url('//accessibility.sky.com/static/themes/common/images/body-box-shadow.png?6586f1720788') repeat-y 0 0; }


    /* RESET COLUMNS */
    #sideWrapTwo {float: none; }

    #sideWrapTwo {width: auto; }

 	.sideWraps #contentWrapTwo,
	.sideWrapLeft #contentWrapTwo,
	.sideWrapRight {width: auto; }

    .sideWraps #contentWrap .section,
    .sideWrapLeft #contentWrap .section,
    .sideWrapRight #contentWrap .section {margin-left: 0; }

    /* HEADER
    ------------------------------------------*/
    #skyHeader {display: none; }

    #headerWrap {box-shadow: none; }

    /*#headerWrap .header { //fixed nav is a little broken
        padding-bottom: 3em;
        position: relative; }*/

    #headerWrap .headerInner {padding: 0; }

    .logo, .logo:focus, .logo:active {
        height: auto;
        margin: 0;
        padding: 0 15px 0 95px;
        display: block;
        font-size: 1.786em;
        background-position: 15px 50%; }


    /* STYLE SWITCHER */
    #styleSwitcher {
        clear: both;
        float: none;
        margin: 0;
        padding: 5px 15px;
        text-align: right;
        border-width: 1px 0;
        border-style: solid; }

    #styleSwitcher dd {margin-top: 0; }

    #styleSwitcher dd a,
    #styleSwitcher dd strong {text-align: left; }


    /* FIXED MENU */
    #fixedWrap {
        float: none;
        width: 100%;
        /*position: absolute; //fixed nav is a little broken
        bottom: 0;
        z-index: 5000;
        left: 0;
        background-repeat: repeat-x;
        background-position: 0 100%;*/ }

    #fixedWrap.fixed {
        top: 0;
        bottom: auto;
        position: fixed;
        -moz-transition: left .5s;
        -webkit-transition: left .5s;
        transition: left .5s; }

    .showMenu #fixedWrap.fixed {left: 235px; }

    #fixedWrap #fixedWrapInner {
        overflow: hidden;
        padding: 5px 15px; }

    /* menu toggle */
    #menuToggle {
        width: 14%;
        float: left;
        display: block;
        background: url('//accessibility.sky.com/static/themes/common/images/button-menu.png?6586f1720788') no-repeat 0 0;
    	text-shadow: 0 1px 0 #1e4d88;
    	display: block;
    	padding: .25em 5px .25em 12px;
    	text-align: center;
        border-radius: 0 5px 5px 0;
    	color: #fff; }

    #menuToggle:focus,
    #menuToggle:active {background-color: transparent; }

    .showMenu #menuToggle {
        background: url('//accessibility.sky.com/static/themes/common/images/button-menu-active.png?6586f1720788') no-repeat 100% 0;
        border-radius: 5px 0 0 5px;
        padding: .25em 12px .25em 5px; }

    /* search */
    #fixedWrap form {
        margin: 0;
        float: right;
        width: 77%;
        padding: 1px; }

    #fixedWrap .formItem {width: 100%; }

    #fixedWrap .formItem input {width: 70%; }

    #fixedWrap .formItem .submit {
        width: 28%;
        padding: 2px 2%;
        float: right; }


    /* NAVIGATION */
    #headerWrap .nav {display: none; }


    /* NAVIGATION
    ------------------------------------------*/
   	#homepage #sideWrapTwo,
   	.subNav .home {display: block; }

    #sideWrapTwo {
        top: 0;
        left: -215px;
        width: 235px;
        position: absolute; }

    .subNav {font-size: 1.143em; }

    .subNav .home {
    	background-repeat: repeat-x;
    	background-position: 100% 0; }

	.subNav .home a,
	.subNav .home a:link,
	#homepage .subNav strong {
		background-repeat: no-repeat;
		background-position: 10px 50%;
	    padding-top: 10px;
	    padding-bottom: 10px; }

	.subNav a,
	.subNav a:link,
	.subNav ul strong,
	.subNav ul a,
	.subNav ul a:link {border-radius: 0; }

	.subNav ul a,
	.subNav ul a:link,
	.subNav ul strong {
	    padding-top: 10px;
	    padding-bottom: 10px;
	    font-weight: 400; }

	.subNav ul strong {
		font-size: 1em;
		font-family: "SkyTextMedium", Arial, sans-serif; }

	.subNav ul ul a,
	.subNav ul ul a:link,
	.subNav ul ul strong {
		padding-top: 10px;
		padding-bottom: 10px;
		font-weight: 400;
		font-family: "SkyTextRegular", Arial, sans-serif; }

	.subNav ul .section,
	.subNav ul .section:link {
		background-repeat: repeat-x;
		background-position: 100% 0;
		font-size: 1em; }

	#homepage .subNav strong {padding-left:40px; }

	#homepage .subNav li {
		background-repeat: repeat-x;
		background-position: 100% 0; }

	#homepage .subNav li a,
	#homepage .subNav li a:link {
		padding: 10px;
		background-repeat: repeat-x;
		background-position: 0 0; }


    /* FOOTER
    ------------------------------------------*/
   	#footerWrap .footer {
   		padding-left: 15px;
   		padding-right: 15px; }

    #footerWrap span {
        display: block;
        margin: 0 auto 1em;
        position: relative; }

    #footerWrap ul {width: auto; }


    /*------------------------------------------
      PAGE SPECIFIC CSS
    ------------------------------------------*/
    /* HOMEPAGE
    ------------------------------------------*/
    /* WELCOME MESSAGE */
    #homepage .welcomeInner {
    	background-image: none;
    	padding: 0 20px; }

    .welcome {border-radius: 0; }

    .welcomeInner {border-radius: 0; }


    /* BOXES */
    #homepage .sectionSkyTV .gs-box p img {
        float: left;
        margin-right: 20px; }

    #homepage .sectionSkyTV .gs-box h3 {margin-top: 0; }


    /* FAQ FORM */
    #homepage .formFaq h2,
    #homepage .formFaq form {
        float: none;
        width: 100%; }

    #homepage .formFaq form {
        margin: 0 0 1em;
        width: 96%; }


    /* LANDING PAGE
    ------------------------------------------*/
    #landingPage #contentWrapOne, #sideWrapTwo {margin-bottom: 0; }


    /* BOXES */
    #landingPage .section .gs-box p img {
        float: left;
        margin-right: 20px; }

    #landingPage .section .gs-box h3 {margin-top: 0; }


	/* TV PICKS PAGE
	------------------------------------------*/
	#tvPicks .section .gs-wrp-3 {width: auto; }

	.progCol {margin-right: 0; }

	.adCol, .subCol {margin-bottom: 50px; }

	.js #tvPicks h1 {padding-right: 0; }

} /* end media query */


/*--------------------------------------------------------------
 <= 600px Ultra narrow layout
--------------------------------------------------------------*/
@media only screen and (max-width: 600px) {

    /* JAGS
    ------------------------------------------*/
    .gs-box {margin: 0 10px; }

    /******************** JAGS Core ********************/
    [class*=gs-wrp-4] [class*=gs-3]{clear:none}
    [class=gs-wrp-4-bdr] [class*=gs-4]{border-width:0;margin:0}
    [class*=gs-wrp] [class*=fl-25],[class*=gs-wrp] [class*=fl-75],[class*=gs-wrp] [class*=fr-25],[class*=gs-wrp] [class*=fr-75]{float:none}
    [class*=gs-wrp] [class*=fl-25],[class*=gs-wrp] [class*=fr-25],[class*=gs-wrp] [class*=fl-75],[class*=gs-wrp] [class*=fr-75]{width:auto}


    /* MAIN LAYOUT
    ------------------------------------------*/
    #sideWrapOne {
        float: none;
        width: auto;
        clear: both; }

 	.sideWraps #contentWrapTwo,
	.sideWrapLeft #contentWrapTwo,
	.sideWrapRight {width: auto; }

    .sideWraps #contentWrap .section,
    .sideWrapLeft #contentWrap .section,
    .sideWrapRight #contentWrap .section {margin-right: 0; }

	#sideWrapOne h2,
	.sideWrapOne h2 {
		margin-left: 0;
		margin-right: 0; }


    /* BOXES
    ------------------------------------------*/
    .box {margin-bottom: 1em; }


    /* BOXES A */
    .boxA {margin-bottom: 0; }


    /* BOX C (important updates) */
    .boxC {margin-top: 0; }
    .boxC h2 {min-height: 40px; }


    /* NUMBERS
    ------------------------------------------*/
    .steps {background-position: 10px 0; }

    .step2 {background-position: -950px 0; }

    .step3 {background-position: -1910px 0; }


    /* HEADER
    ------------------------------------------*/
    #headerWrap .headerInner {padding: 0; }

    /* fixed menu (search) */
    #fixedWrap .formItem {width: 100%; }

    #fixedWrap .formItem input {width: 60%; }

    #fixedWrap .formItem .submit {
        width: 36%;
        padding: 2px 1%;
        float: right; }


    /* CONTENT
    ------------------------------------------*/
    #contentWrapTwo {padding: 0; }


    /* SIDE WRAP ONE (aside)
    ------------------------------------------*/
    #sideWrapOne, #homepage .sideWrapOne {font-size: 100%; }


    /* FOOTER
    ------------------------------------------*/
    #footerWrap .footer {
        padding: .5em 10px;
        text-align: left; }

    #footerWrap span {
        display: block;
        margin: 0 0 1em;
        position: static; }

    #footerWrap ul {
    	clear: both;
    	float: none;
    	margin: 1em 0; }


    /*------------------------------------------
      PAGE SPECIFIC CSS
    ------------------------------------------*/
    /* HOMEPAGE
    ------------------------------------------*/
    #homepage .gs-wrp-3 {margin-bottom: 20px; }

    #homepage .gs-wrp-3 ul {margin: 0; }

    #homepage .gs-wrp-3 li {font-size: 128.55%; }

    #homepage .gs-wrp-3 h3,
    #homepage .gs-wrp-3 p {display: none; }

    #homepage .gs-wrp-3 .gs-1-fl-33 .gs-box {
    	border-width: 1px 0;
    	border-style: solid; }

    #homepage .gs-wrp-3 .gs-box {
    	border-width:0 0 1px;
    	border-style: solid; }


    /* WELCOME MESSAGE */
    #homepage .welcome h1 {margin-top: .75em; }

	.welcomeInner,
	#homepage .sideWrapOne .gs-box,
	#homepage .zone5 .gs-box {margin-left: 0; }

	#homepage .sectionSkyTV img {display: none; }

    #homepage .dlBrowseAloud {
        margin-right: 5px;
        vertical-align: 5px; }


    /* BOXES */
    /* box C (important updates) */
    #homepage .boxC {margin-top: 15px; }


    /* LANDING PAGE
    ------------------------------------------*/
    #landingPage .gs-wrp-3 {
        background: none;
        margin-bottom: 20px; }

    #landingPage .gs-wrp-3 ul {margin: 0; }

    #landingPage .gs-wrp-3 li {font-size: 128.55%; }

    #landingPage .gs-wrp-3 h3,
    #landingPage .gs-wrp-3 p {display: none; }

    #landingPage .gs-wrp-3 .gs-1-fl-33 .gs-box {
        border-width: 1px 0;
        border-style: solid; }

    #landingPage .gs-wrp-3 .gs-box {
        border-width:0 0 1px;
        border-style: solid; }


    /* FAQS
    ------------------------------------------*/
    #faqs #faqSearch {margin: 0 5px 45px; }

    #faqs #faqSearch .formItem {width: auto; }

    /* BOX B */
    #faqs .boxD p {
        margin: 0;
        display: block; }

    #faqs .boxD .submit {
        width: 40%;
        margin: 10px; }


	/* TV PICKS PAGE
	------------------------------------------*/
	#tvPicks .section .gs-wrp-3 {width: auto; }

	.progCol {margin-right: 0; }

	.adCol, .subCol {margin-bottom: 50px; }

	.js #tvPicks h1 {padding-right: 0; }

	.js #tvPicks #toggleAll {position: relative; }


    /* FAQS
    ------------------------------------------*/
    #faqs #faqSearch {margin: 0 5px 10px; }


	/* GET HELP FORM
	------------------------------------------*/
	.getHelpForm .boxTitle {padding-left: 70px; }

	.getHelpForm .formItem,
	.getHelpForm .formControls {margin-left: 70px; }

	.getHelpForm .formText input,
	.getHelpForm .formTextarea textarea {width: 90%; }

} /* end media query */



/*--------------------------------------------------------------
 <= 480px Mobile layout
--------------------------------------------------------------*/
@media only screen and (max-width: 480px) {

	html {
	    -webkit-text-size-adjust: none;
	    -ms-text-size-adjust: none; }

	/* JAGS
	------------------------------------------*/
	/******************** JAGS Core ********************/
	[class*=bdr] [class*=oh],[class=gs-wrp-4-bdr] [class*=gs-2]{border-width:0;margin:0}
    [class*=gs-wrp-4] [class*=gs-3]{clear:both}
    [class*=gs-wrp] [class*=fl-25],[class*=gs-wrp] [class*=fl-50],[class*=gs-wrp] [class*=fr-25],[class*=gs-wrp] [class*=fr-50]{width:auto}
    [class*=gs-wrp] [class*=oh],[class*=gs-wrp-4] [class*=gs-2]{float:none;min-height:0;overflow:hidden;width:auto}
    [class*=gs-wrp] [class*=fl-50],[class*=gs-wrp] [class*=fl-25],[class*=gs-wrp] [class*=fr-50],[class*=gs-wrp] [class*=fr-25]{float:none}


	/*  MAIN LAYOUT
	------------------------------------------*/
	.sideWraps #contentWrapTwo,
	.sideWrapLeft #contentWrapTwo,
	.sideWrapRight {width: auto; }

    .sideWraps #contentWrap .section,
    .sideWrapLeft #contentWrap .section,
    .sideWrapRight #contentWrap .section {margin-right: 0; width: auto; }

	.columnDouble .gs-box,
	#sideWrapOne h2,
	.sideWrapOne h2 {
		margin-left: 0;
		margin-right: 0; }


    /* BOXES
    ------------------------------------------*/
    /* BOX C (important updates) */
    .boxC h2 {background-image: none; }


	/*------------------------------------------
      PAGE SPECIFIC CSS
    ------------------------------------------*/
    /* HOMEPAGE
	------------------------------------------*/
	.welcomeInner,
	#homepage .sideWrapOne .gs-box,
	#homepage .zone5 .gs-box {margin-left: 0; }

	#homepage .sectionSkyTV img {display: none; }


	/* LANDING PAGE
    ------------------------------------------*/
    /* BOXES */
    #landingPage .section .gs-box p img {
        float: none;
        margin-right: 0; }


	/* TV PICKS PAGE
	------------------------------------------*/
	#tvPicks .section .gs-wrp-3 {width: auto; }

	.adCol, .subCol, .slCol {margin-right: 0; }

	.js #tvPicks h1 {padding-right: 0; }


	/* GET HELP FORM
	------------------------------------------*/
	.getHelpForm .boxTitle {padding-left: 70px; }

	.getHelpForm .formItem,
	.getHelpForm .formControls {margin-left: 70px; }

	.getHelpForm .formText input,
	.getHelpForm .formTextarea textarea {width: 90%; }

} /* end media query */



/*--------------------------------------------------------------
 iPad [portrait + landscape]
--------------------------------------------------------------*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 0) {

    body {overflow: hidden; }

    #pageWrap {
        -webkit-transition: -webkit-transform .5s;
        -webkit-transform: translateX(0);
        -webkit-backface-visibility: hidden;
        transition: transform .5s;
        transform: translateX(0); }

    .showMenu #pageWrap {
        left: 0;
        -webkit-transition: -webkit-transform .5s;
        -webkit-transform: translateX(215px);
        -webkit-backface-visibility: hidden;
        transition: transform .5s;
        transform: translateX(215px); }

} /* end media query */



/*--------------------------------------------------------------
 iPhone [portrait + landscape]
--------------------------------------------------------------*/
@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 0) {

    body {overflow: hidden; }

    #pageWrap {
        -webkit-transition: -webkit-transform .5s;
        -webkit-transform: translate(0,0);
        -webkit-backface-visibility: hidden;
        transition: transform .5s;
        transform: translateX(0); }

    .showMenu #pageWrap {
        left: 0;
        -webkit-transition: -webkit-transform .5s;
        -webkit-transform: translate(215px,0);
        -webkit-backface-visibility: hidden;
        transition: transform .5s;
        transform: translate(215px,0); }

    .introFeatured img {
        display: none; }
} /* end media query */