/* Smartphones (portrait and landscape) ----------- 
   Changed max-device-width and max-width to 667, as not sure how to best support
   iPhone 6+ in landscape yet, which is 736px
   Likely need a 2 column layout
*/
@media only screen and (min-device-width : 320px) and (max-device-width : 667px) {
    
    /* LAYOUT */

    #content,  #wrapper,  #container,  #header, #Head, #Panel, div.Menu, #masthead, 
    #footer,  #footer #colophon, #main, #Frame, #Body, #Content, ul.menu ul, .uncaged .global-nav-inner, 
    .video iframe, .ad-top-728x90,  #header .ad-728x90 div, .ad-bot-leaderboard{ float: none; max-width: 667px;  width: 100%;  min-width: 100%}
    
    .type-page { padding: 10px} // Really need to make this consistent across all pages in style.css
    
    #header { margin-bottom:5px}

    #branding{ position: static; margin: 15px auto 0; width: 100%; float: none}
    #branding a { width: 95%; background-position-x: center; }
    
    .main{ margin-top: 10px}
    
    blockquote{ font-size: 1.2em}
    
    #footer{ padding: 30px 0}

    #global-nav{ height: auto; width: 100%; overflow:hidden}
    #global-nav .menu-right-menu-container, 
    #global-nav #search-2{ display: none}
    #global-nav .search{ float: none;  left: 0;  position: static;  padding: 0; text-align: center}
    #global-nav .search li.icons{ padding: 0; float: none; margin: 0 auto; width: 130px}
    
    .search-responsive-container{ display: block}
    .search-responsive{ display: none;  float: left;  position: relative;  clear: both;  background: #265677;  color: #FFF;  width: 100%}
    #searchform-responsive input{ float: left; background: #265677;  height: auto;  margin: 0;  padding: 0.9375rem 0.9375rem 0.9375rem 2.188rem;  outline: none;  border: none;  border-radius: 0;  color: #FFF}
    #searchform-responsive:before{ font-family: FontAwesome;  display: block;  position: absolute;  top: 50%;  margin: -0.4375rem 0 0 0;  left: 0.75rem;  font-size: 0.875rem;  color: #FFF;  z-index: 9999;  content: "\f002"}

    
    /* FORUM TWEAKS */
    
    #Body .Search, #latest-posts-list, .Discussion .Tabs li a,
    #Panel a.NewDiscussion, #Panel a.NewConversation,
    #Menu li.UserNotifications, #Menu li.SignOut { display: none }
    
    #Body #Content img{ max-width: 100%;height: auto;}
    
    #Menu a { padding-right: 5px; }
    
    #Panel a.NewDiscussion, #Panel a.NewConversation { margin: 5%;}
    
    #Content #Head .notification, #Content .notification { text-align: center}
    
    .MessageList .Meta span { padding: 10px 5px 0 0}
    .Item .Author img { width: 20px; height: 20px;}
    
    .NumberedPager, .PrevNextPager { text-align: center; padding: 10px 0 !important; }
    .NumberedPager a { margin: 0 2px; padding:2px 3px}
    .NumberedPager span.Ellipsis {padding:0 1px}
    
    .Drafts .ItemContent a.Title, .Discussions .ItemContent a.Title { max-width: 90%}
    
    .DataList.Discussions .Meta span, .DataList .Meta strong { margin-right: 5px;}
    
    .DataList.Discussions .Meta span.LastCommentBy { display: block; }
    
    #Content .ProfileTabs, #Content .DiscussionsTabs, #Content .ConversationsTabs, 
    #Content .CategoryTabs, #Content .SearchTabs { padding:0}
    
    .Tabs li a span { font-size: 11px; padding: 1px 3px}
    
    div.HeadingTabs ul, div.DiscussionsTabs ul { top: 0}
    
    a.TabLink, a.TabLink:link, a.TabLink:hover, a.TabLink:active, a.TabLink:visited { background: none; border: none;}
    .TabLink, .TabLink:link, .TabLink:hover, .TabLink:active, .TabLink:visited { padding-right: 0; padding-left: 20px}
    
    
    
    /* FUNCTIONALITY */
    
    .dropdown { width: 100%; margin-bottom: 20px;}
    
     nav.paging-navigation{ margin-bottom: 25px}
     

    /* UNCAGED */
    
    .uncaged ul.menu-global li { margin: 0; padding: 0; }
    .uncaged #global-nav .search { display: none; }
    .uncaged #global-nav ul.menu-global { float: none; width: 100%; text-align: center; padding: 10px 0; position: static}
    
    
    

    /* EXISTING MENU */
    
    .menu-top-level-menu-container,  ul.menu-right{ display: none}

    .menu-header{ width: 100%;  padding: 0;  margin: 0;  background: #041F34;  color: #FFF}
    .menu-header a:link,  .menu-header a:visited, .menu-header a{ color: #FFF}
    .menu-header a:hover{ color: #badff8}

    .menu-header .menu-wrap{ padding: 10px; overflow: hidden; }

    ul.menu ul{ right: -57px;  left: auto}
    
    .menu-header .menu-icon,  .menu-header .user-icon,  .menu-header .search-icon{ display: block;  float: left;  margin: 0 15px 0 0}
    .menu-header .menu-icon,  .menu-header .search-icon,  .menu-header .user-icon .fa-user{ font-size: 1.6em}
    .menu-header .menu-icon.active,  .menu-header .user-icon.active,  .menu-header .search-icon.active{ color: #BADFF8}
    .menu-header .user-icon span{ margin: 0 0 3px;  line-height: 20px} 
    .menu-header .user-icon .fa-chevron-down{ font-size: .7em;  margin: 0 0 0 2px}
    .menu-header .search-icon{ float: right;  margin-right: 0}

    
    /* RESPONSIVE MENU */
    
    .responsive-menu-container{ display: block;  clear: both;  margin: 5px 0 0}
    .responsive-menu-container li.menu-notifications .notifications-label{ display: inline}

    .responsive-expando{ display: none} 
    .responsive-expando > li{ text-align: left; display: block;  clear: both;  background: #265677;  border-bottom: 1px solid #20455E;  border-top: 1px solid #2D6185;  color: #FFF;  padding: 10px;  margin: 0;  font-weight: bold}
    .responsive-expando li:hover,  .responsive-expando li.active{ background: #041F34}
    .responsive-expando li a:link,  .responsive-expando li a:visited{ color: #FFF;  text-decoration: none;  font-weight: bold}
    .responsive-expando li a:hover{ color: #BADFF8;  cursor: pointer} 
    .responsive-expando .fa-chevron-down,  .responsive-expando .fa-chevron-up{ float: right}

    .responsive-expando li .sub-menu{ display: none}
    .responsive-expando li .sub-menu li{ margin: 0;  padding: 10px 0 0 10px;  list-style-type: none}
    .responsive-expando li .sub-menu li:last-child{ padding-bottom: 5px}
    
    /* General menu */
    .responsive-menu-container-tabs { width: 100%; float: left;  }
    .responsive-menu-container-tabs span.label { display: block; background-color: #F9F9F9; padding: 12px 14px 12px 8px; border-top: solid 1px #EAEAEA;  border-bottom: solid 1px #EAEAEA; font-weight: bold; }
    .responsive-menu-container-tabs span.label.active { background-color: #F1F1F1; }
    .responsive-menu-container-tabs span.label .fa { float: right; }
    .responsive-menu-container-tabs span.label .current-section { margin-left: 5px; color: #666; font-weight: normal; }
    .responsive-menu-container-tabs ul li span.count { background: #333; color: #EAEAEA; font-size: 80%; margin-left: 5px; padding: 3px 5px; border-radius: 50px; -moz-border-radius:50px; -webkit-border-radius:50px;}
    .responsive-menu-container-tabs .responsive-expando > li { background-color: #FFF; border-bottom: solid 1px #EAEAEA; border-top: none; color: #333 }
    .responsive-menu-container-tabs .responsive-expando li a:link, .responsive-menu-container-tabs .responsive-expando li a:visited { color: #333; }
    
    /* CONTENT */
    
    
    /* http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design */
    .video, .activity-inner iframe { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }

    .video iframe,  
    .video object,  
    .video embed,
     .activity-inner iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    

    /* FOOTER */
    
    #footer-widget-area #first{ width: 80%;  margin: 0}
    #footer-widget-area #second ul li ul > li{ margin: 0 15px 25px 0}
    
    
    
    /* ADS */
    
    #Content .ad-300x250 { margin: 10px 0; padding-bottom: 15px; background: #FFF; border-bottom: 1px solid #BEC8CC; }
    .med_rec_content_grid { padding:0; margin:0 0 10px; clear:both; background: transparent;}
    .med_rec_content_grid div { margin: 0 auto; text-align: center;}
    .ad-300x100-container { margin: 0 auto; text-align:center}
    
    .ad-top-728x90, #header .ad-728x90 div { border: none; padding: 0; overflow: hidden; margin: 0}
    .ad-top-728x90 { margin: 10px 0 0; }
    
    .ad-300x250, 
    .ad-300x250-btf,
    .ad-250x125,
    .sidebar .xoxo .ad-300x250-btf,
    .ad-bot-leaderboard,
    .category #content .post-box-walkthroughs .ad-300x250-content { padding: 10px 0; background-color: rgba(67,198,226,.25); width: 100%; margin: 0 auto; text-align: center; }
    .ad-300x250, .ad-300x250-btf{ margin-bottom: 18px; }
    .sidebar .xoxo .ad-250x125 .adhere { width: 100% }
    
    .entry-content .ad-300x250-premium { margin-top: 10px;} /* This ad gets moved to inside the content */
    .post .ad-300x250, .entry-content .ad-300x250, .post .ad-300x250-btf { background-color: #FFF;}
}
    
/* iPhone 3, 4, 5 (portrait) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 320px) and (orientation : portrait) {
    #content,  #wrapper,  #container,  #header, #Head, #Panel, div.Menu, #masthead, 
    #footer,  #footer #colophon, #main, #Frame, #Body, #Content, ul.menu ul, .uncaged .global-nav-inner, 
    .video iframe, .ad-top-728x90,  #header .ad-728x90 div, .ad-bot-leaderboard {
        max-width: 320px;
    }
    
    #footer-widget-area #second ul li ul > li{ margin: 0 50px 25px 0}
}

/* iPhone 6 (portrait) ----------- */
@media only screen and (min-device-width : 375px) and (max-device-width : 375px) and (orientation : portrait) {
    #content,  #wrapper,  #container,  #header, #Head, #Panel, div.Menu, #masthead, 
    #footer,  #footer #colophon, #main, #Frame, #Body, #Content, ul.menu ul, .uncaged .global-nav-inner, 
    .video iframe, .ad-top-728x90,  #header .ad-728x90 div, .ad-bot-leaderboard {
        max-width: 375px;
    }


}

/* iPhone 6+ (portrait) ----------- */
@media only screen and (min-device-width : 414px) and (max-device-width : 414px) and (orientation : portrait) {
    #content,  #wrapper,  #container,  #header, #Head, #Panel, div.Menu, #masthead, 
    #footer,  #footer #colophon, #main, #Frame, #Body, #Content, ul.menu ul, .uncaged .global-nav-inner, 
    .video iframe, .ad-top-728x90,  #header .ad-728x90 div, .ad-bot-leaderboard {
        max-width: 414px;
    }
}

/* Google Nexus 4 (portrait) ----------- */
@media only screen and (min-device-width : 384px) and (max-device-width : 640px) and (orientation : portrait) {
    #content,  #wrapper,  #container,  #header, #Head, #Panel, div.Menu, #masthead, 
    #footer,  #footer #colophon, #main, #Frame, #Body, #Content, ul.menu ul, .uncaged .global-nav-inner, 
    .video iframe, .ad-top-728x90,  #header .ad-728x90 div, .ad-bot-leaderboard {
        max-width: 384px;
    }
}

/* iPhone 4 (landscape) ----------- */
@media only screen and (min-device-width : 321px) and (max-device-width : 480px) and (orientation : landscape) {
    #content,  #wrapper,  #container,  #header, #Head, #Panel, div.Menu, #masthead, 
    #footer,  #footer #colophon, #main, #Frame, #Body, #Content, ul.menu ul, .uncaged .global-nav-inner, 
    .video iframe, .ad-top-728x90,  #header .ad-728x90 div, .ad-bot-leaderboard {
        max-width: 480px;
    }
}

/* iPhone 5 (landscape) ----------- */
@media only screen and (min-device-width : 481px) and (max-device-width : 568px) and (orientation : landscape) {
    #content,  #wrapper,  #container,  #header, #Head, #Panel, div.Menu, #masthead, 
    #footer,  #footer #colophon, #main, #Frame, #Body, #Content, ul.menu ul, .uncaged .global-nav-inner, 
    .video iframe, .ad-top-728x90,  #header .ad-728x90 div, .ad-bot-leaderboard {
        max-width: 568px;
    }
    
    #footer-widget-area #second ul li ul > li { margin-right: 40px}
}

/* iPhone 6 (landscape) ----------- 
   - Needed when address iphone 6+

@media only screen and (min-device-width : 569px) and (max-device-width : 667px) and (orientation : landscape) {
    #content,  #wrapper,  #container,  #header, #Head, #Panel, div.Menu, #masthead, 
    #footer,  #footer #colophon, #main, #Frame, #Body, #Content, ul.menu ul, .uncaged .global-nav-inner, 
    .video iframe, .ad-top-728x90,  #header .ad-728x90 div, .ad-bot-leaderboard {
        max-width: 667px;
    }
}
*/