﻿/*
    Responsive style overrides.
    Following breakpoints override styles defined in the base style sheet.
    Additional styles can also be added based on teh defined breakpoint.   
*/


/* Smaller desktop resolutions */
@media only screen and (min-width:1101px) and (max-width:1170px) {
    .header .logo img {width:335px;}
    .header .headerCallout {left:350px;}
    .header .headerCallout img {max-width:320px;}
    .relatedArticles .sliderContainer .center .slider .item .data {width:185px;}
    .relatedProducts .sliderContainer .center .slider .item .data {width:130px;margin:0 25px 0 0;}
    .section .thumbItem {width:290px;}
    .section .thumbItem .thumbContainer {height:200px;}
    .homepage .hpGalleries .hpGallerySlider .sliderContainer .center .slider .item .data .heading {font-size:14px;}
}




/* Various phones and tablets */
@media only screen and (min-width:961px) and (max-width:1100px) {
    .header .headerCallout {display:none;}
    .navbar .primary ul li a:link, .navbar ul li a:visited {font-size:16.5px;}
    .adZone {background:none;padding:0;}
    .newsletterBox .heading {font-size:22px;}
    .newsletterBox .form {margin:5px 0 0 0;}
    .newsletterBox .form input {width:55%;}
    .footer a {font-size:16px;}
    .footer .floater ul {padding:0 0 0 15px;}
    .article .articleGallery .photo .container {height:500px;}
    .navhover.shopSwatch .ddProducts .product {width:100px;margin-right:20px;}
    .navhover.shopSwatch .ddIssue img {width:100px;}
    .navhover.shopSwatch .ddOffers .first {font-size:15px;}
    .navhover.shopSwatch .ddOffers {font-size:13px;}
    .navhover.videosSwatch .inner .item .thumb {width:250px;}
    .section .thumbItem {width:240px;margin:0 50px 40px 0;}
    .section .thumbItem .thumbContainer {height:160px;}
    .homepage .hpSlider .data .title {font-size:22px;line-height:20px;}
    .homepage .hpSlider .data .caption {font-size:15px;}
    .homepage .hpGalleries .hpGallerySlider .sliderContainer .center .slider .item .data .heading {font-size:14px;}
    .homepage .hpGalleries .hpGallerySlider .sliderContainer .center .slider .item .data .thumbnail {height:150px;}
}




/* iPhone landscape */
@media only screen and (min-width:820px) and (max-width:960px) {
    .gridContainer {padding-left:10px;padding-right:10px;}
    .gridRow .four {width:100%;margin-right:0%;}
    .gridRow .eight {width:100%;margin-right:0%;}
    .header .headerCallout {display:none;}
	.navbar .primary ul li a:link, .navbar ul li a:visited {font-size:14.5px;padding:15px 12px 0 12px;}
    .footer a {font-size:16px;}
    .footer .floater {margin:0 25px 0 0;}
    .footer .floater ul {padding:0 0 0 15px;}
    .mainContentGrid .contentWell {margin:20px 0 20px 0;}
    .relatedArticles .sliderContainer .center .slider .item .data {width:180px;}
    .relatedProducts .sliderContainer .center .slider .item .data {width:135px;}
    .homepage .hpGalleries .hpGallerySlider .sliderContainer .center .slider .item .data {width:350px;}
    .homepage .hpGalleries .hpGallerySlider .sliderContainer .center .slider .item .data .thumbnail {height:220px;}

    .sidebarSubscriberContent,
    .adZone,
    .sidebarProgressive,
    .sidebarMagazine,
    .newsletterBox,
    .sidebarTabs
    {width:60%;display:inline-block;}
}




/* median phone resolutions */
@media only screen and (min-width:651px) and (max-width:819px) {
    .gridContainer {padding-left:10px;padding-right:10px;}
    .gridRow .four {width:100%;margin-right:0%;}
    .gridRow .eight {width:100%;margin-right:0%;}
    .header .headerCallout {display:none;}
	
    .header .logo img {width:240px;}
    .navbar .primary ul li a:link, .navbar ul li a:visited {font-size:12.5px;padding:15px 6px 0 12px;}
	
    .footer a {font-size:16px;}
    .footer .logo {display:none;}
    .footer ul.column1 {border-left:none;padding:0;}
    .footer .navitems {width:60%;}
    .footer .offers {width:40%;}
    .trustedSites .logo {display:none;}
    .trustedSites .links {width:auto;}
    .mainContentGrid .contentWell {margin:20px 0 20px 0;}

    .sidebarSubscriberContent,
    .adZone,
    .sidebarProgressive,
    .sidebarMagazine,
    .newsletterBox,
    .sidebarTabs
    {width:70%;display:inline-block;}
}




/* iPhone portrait */
@media only screen and (min-width:601px) and (max-width:650px) {
    .gridContainer {padding-left:10px;padding-right:10px;}
    .gridRow .four {width:100%;margin-right:0%;}
    .gridRow .eight {width:100%;margin-right:0%;}
    .header .headerCallout {display:none;}
    .header .logo img {width:330px;height:auto;}
    .header .login {display:none;}
    .header .welcomeBack {display:none;}
    .header .socials {display:none;}
    .navbar .primary {display:none;}
    .navbar .mobile {display:inline;}
    .mainContentGrid .contentWell {margin:20px 0 20px 0;}
    .trustedSites .logo {display:none;}
    .trustedSites .links {width:auto;}
    .footer .offers {display:none;}
    .footer .navitems {width:auto;}
    .footer a {font-size:16px;}
    .footer .floater {margin:0 20px 0 0;}
    .footer .floater ul {padding:0 0 0 20px;}
    .footer .logo img {width:225px;}
    .article .segment .mediaRight, .article .segment .mediaLeft {float:none;margin:0;width:99%;}
    .article .articleGallery .photo .container {height:450px;}
    .section .dataItem .shareIcons {display:none;}
    .section .dataItem {padding:20px 0 20px 0;}
    .section .thumbItem {width:240px;margin:0 50px 40px 0;}
    .section .thumbItem .thumbContainer {height:160px;}
    .tipCallout .content {width:65%;}
    .tipCallout .command {width:35%;}
    .homepage .hpSlider .data .title {font-size:20px;line-height:20px;}
    .homepage .hpSlider .data .caption {font-size:15px;}
    .homepage .hpGalleries .hpGallerySlider .sliderContainer .center .slider .item .data .heading {font-size:14px;}
    .homepage .hpGalleries .hpGallerySlider .sliderContainer .center .slider .item .data .thumbnail {height:150px;}
	
	.thread h1 {font-size:20px;line-height:20px;}
	.thread .replies .reply .right .signature {display:none;}
}




/* small phone resolutions */
@media only screen and (min-width:501px) and (max-width:600px) {
    .gridContainer {padding-left:10px;padding-right:10px;}
    .gridRow .four {width:100%;margin-right:0%;}
    .gridRow .eight {width:100%;margin-right:0%;}
    .header .headerCallout {display:none;}
    .header .logo img {width:280px;height:auto;}
    .header .login {display:none;}
    .header .welcomeBack {display:none;}
    .header .socials {display:none;}
    .navbar .primary {display:none;}
    .navbar .mobile {display:inline;}
    .mainContentGrid .contentWell {margin:20px 0 20px 0;}
    .trustedSites .logo {display:none;}
    .trustedSites .links {width:auto;}
    .footer .offers {display:none;}
    .footer .navitems {width:auto;}
    .footer a {font-size:16px;}
    .footer .floater {margin:0 20px 0 0;}
    .footer .floater ul {padding:0 0 0 20px;}
    .footer .logo img {width:200px;}
    .article .segment .mediaRight, .article .segment .mediaLeft {float:none;margin:0;width:99%;}
    .article .articleGallery .photo .container {height:450px;}
    .relatedProducts .sliderContainer .center .slider .item .data {width:130px;margin:0 25px 0 0;}
    .section .dataItem .shareIcons {display:none;}
    .section .dataItem {padding:20px 0 20px 0;}
    .section .thumbItem {width:220px;margin:0 50px 40px 0;}
    .section .thumbItem .thumbContainer {height:160px;padding:5px;}
    .tipCallout .content {width:65%;}
    .tipCallout .command {width:35%;}
    .homepage .hpSlider .data .title {font-size:17px;line-height:20px;}
    .homepage .hpSlider .data .caption {font-size:14px;line-height:15px;}
    .homepage .hpGalleries .hpGallerySlider .sliderContainer .center .slider .item .data .heading {font-size:13px;}
    .homepage .hpGalleries .hpGallerySlider .sliderContainer .center .slider .item .data .thumbnail {height:120px;}
	
		.thread h1 {font-size:20px;line-height:20px;}
	.thread .replies .reply .right .signature {display:none;}
}




/* all mobile devices below 450 */
@media handheld, only screen and (max-width:500px) {
    .gridContainer {padding-left:10px;padding-right:10px;}
    .gridRow .four {width:100%;margin-right:0%;}
    .gridRow .eight {width:100%;margin-right:0%;}
    .headerContainer, .header {height:105px;}
    .header .headerCallout {display:none;}
    .header .logo {position:initial;text-align:center;margin:20px 0 0 0;}
    .header .logo img {width:250px;height:auto;}
    .header .login {display:none;}
    .header .welcomeBack {display:none;}
    .header .socials {display:none;}
    .header .currentIssue {display:none;}
    .header .offers {display:none;}
    .navbar .primary {display:none;}
    .navbar .mobile {display:inline;}
    .adZone {background:none;padding:0;}
    .trustedSites {display:none;}
    .footer .offers {display:none;}
    .footer .navitems {width:auto;}
    .footer a {font-size:16px;}
    .footer .floater ul {padding:0 0 0 30px;border-left:none;}
    .footer .floater.logo {float:none;text-align:center;width:auto;padding:0 0 10px 0;}
    .footer .newsletter {display:none;}
    .topRibbon {padding:0;}
    .topRibbon a {font-size:16px;padding:10px 0;}
    .article .segment .mediaRight, .article .segment .mediaLeft {float:none;margin:0;width:99%;}
    .article .articleGallery .photo .container {height:300px;}
    .section .dataItem {padding:20px 0 20px 0;}
    .section .dataItem .content.withImage {width:100%;float:none;}
    .section .dataItem .thumbnail {width:98%;margin:0;float:none;}
    .section .dataItem .snippet {display:block;}
    .section .dataItem .byline {display:block;}
    .section .dataItem .shareIcons {display:none;}
    .searchFilter .filter .section {width:100%;float:none;margin:0 0 20px 0;}
    .searchFilter .filter .section.half {width:100%;float:none;}
    .searchFilter .filter .section.half.left {margin-right:0;}
    .searchFilter .filter .section.half.right {margin-left:0;}
    .searchFilter .filter .actions {padding:0 0 40px 0;}
    .searchFilter .elements .keywords {float:left;width:50%;}
    .searchFilter .elements .keywords input {width:70%;}
    .searchFilter .elements .tagging {float:right;width:46%;text-align:right;}
    .section .thumbItem {width:100%;margin:0 0 40px 0;}
    .section .thumbItem .thumbContainer {width:92%;}
    .sectionPreview .data .title a {font-size:20px;line-height:10px;}
    .sectionPreview .data .snippet {display:none;}
    .tipCallout .content {float:none;width:auto;}
    .tipCallout .command {float:none;width:auto;text-align:left;margin:15px 0 0 0;}
    .homepage .hpSlider .data {padding:5px 15px;}
    .homepage .hpSlider .data .title {font-size:17px;line-height:20px;}
    .homepage .hpSlider .data .caption {display:none;}
    .homepage .splitColumns .left {width:auto;;margin:0;float:none;}
    .homepage .splitColumns .right {width:auto;margin:0;float:none;}
    .homepage .hpCallout {display:none;}
    .homepage .hpReviews .snippet {display:none;}
    .homepage .hpReviews .byline {display:none;}
    .homepage .hpReviews .tags {display:none;}
    .homepage .splitColumns .dataItem .content.withImage {width:auto;}
    .homepage .splitColumns .dataItem .content.withImage .parent {margin:10px 0 0 0;}
    .sidebarTabs .options ul li {font-size:13px;}


    .article .kit .details span {margin:0;display:block;}
    .article .kit .details span.first {margin:0;}
    .article .kit .details span.divider {display:none;}
	
	.thread h1 {font-size:20px;line-height:20px;}
	.thread .replies .reply .left {display:none;}
	.thread .replies .reply .right .signature {display:none;}
	.breadcrumbs {display:none;}

    .search .searchFilter {display:none;}
    .search .resultDisplay {margin-left:0;width:auto;overflow:visible;float:none;}


    .home .category .left {width:auto;float:none;margin:0 0 0 0;}
    .home .category .right {width:auto;float:none;margin:0 0 0 0;}

    .filters {font-size:10px;}
    .filters ul li.selected {padding:10px 5px 10px 5px;}
    .filters ul li a {padding:10px 5px 10px 5px;}

    .pager span a {padding:5px 8px 5px 8px;margin-right:2px;font-size:11px;}

    .threadList thead tr {font-size:16px;}
    .threadList td.avatar {display:none;}
    .threadList td.smallData {width:8%;text-align:center;}
}
