body { min-width: inherit; max-width: 100%; background-color: white; }
/* Grid Adjustments */
.grid_3, .grid_4, .grid_12 { margin-bottom: 30px; }

/*  responsive bits from main style sheet */
#contentContainer  { padding-left: 0; }
.header-container { padding-left: 0; }
.header-container, .header-wrapper { width: 100%; width: 100vw; margin: 0; padding: 0; }
.advert-leaderboard { /*hack*/ min-width: 10vw; width: 100vw; margin-left: 0; margin-right: 0; margin-bottom: 0;}
.advert img { width: 100%; height: auto; }
body > section.advert { left:0; }
#navMain .nav-main-wrapper ul:first-child { /*padding-left: 65px;*/ white-space: nowrap; }
#navMain .nav-sec-wrapper { margin-left: 30px; }
#navMain .nav-sec-wrapper ul { white-space: nowrap; }
#navMain .nav-main-wrapper ul:first-child, 
#navMain .nav-sec-wrapper ul:first-child { height: 45px; }
#navMain .nav-main-wrapper ul:first-child a,
#navMain .nav-sec-wrapper ul:first-child a { padding: 15px 8px; }
#navMain ul:first-child li { margin: 0 -3px 0 0;}
#navMain .nav-sec-container { 
    position: absolute; 
    top:0;  
    left: 100vw; 
    margin-left: -30px;
    z-index: 100; 
    height: 45px; 
    width: 100vw;
    overflow: hidden;

    -webkit-box-shadow: -6px 0px 8px 0px rgba(50, 50, 50, 0.3);
    -moz-box-shadow:    -6px 0px 8px 0px rgba(50, 50, 50, 0.3);
    box-shadow:         -6px 0px 8px 0px rgba(50, 50, 50, 0.3);
}
#navMain .nav-sec-container.open { left: 105px; @include transition(0.5,ease-out); }
#navMain .drag-handle { 
    position: absolute; 
    top:0;  
    left: 0; 
    z-index: 101; 
    height: 45px; 
    width: 30px;
    background: url(../img/drag-handle.png) right center no-repeat; 
    padding: 0; 
    cursor: pointer;
}
#navMobile { 
    position:absolute; 
    height: 45px; 
    width: 65px;
    top:0; 
    left: 0; 
    background-color: #343434; 
    z-index: 99;
    font-size: 1.5em;
    cursor: pointer;
}
#navMobile .nav-mobile-wrapper { width: 100vw; background-color: #343434; display: none; position: absolute; top: 45px; left: 0; overflow: hidden;}
#navMobile .nav-items span { color: white; display: block; padding: 15px 5px !important; text-align: center; }
#navMobile ul.show { left: 10vw; @include transition(0.5,ease-out); }
#navMobile ul.disabled > li > a { color: #444; }
#navMobile .sub-menu-indicator { 
    position: absolute; 
    right: 0; 
    padding: 0 0 0 5px;  
    border-bottom: none;
    border-left: 1px solid #444;
    background: #222;
}
/* assumption: only 3 levels */
#navMobile ul ul .sub-menu-indicator { right: 10vw; }
#navMobile ul ul { 
    position: absolute; 
    width: 100vw; 
    background: #343434; 
    left: 100vw; 
    top:0; 
    margin-top: 0;
    border-left: 2px solid #555;
    @include transition(0.5,ease-out);
    z-index: 12;
}
#navMobile ul.nav-items li { display: block; }
#navMobile ul.nav-items li a { padding: 15px 10px 15px 15px; color: white; outline: none; border-bottom: 1px solid #444; }
#navMain ul + ul,    
#sectionShortcuts { display: none; }
#sectionBranding .logo-container { min-height: inherit; }
#sectionBranding .logo-container img { width: 60%; height: auto; }
#sectionBranding .logo-container > div { position: absolute; top:50%; left: 5px; margin-top: -22px;  }
#sectionBranding .logo-container > div:last-child { left: inherit; right: 5px; }
#sectionBranding .widget-weather { display: none; }
#sectionMobilePopover.show { max-height: 550px; @include transition(0.5,ease-out); }
#sectionMobilePopover form { padding: 5% 10%; }
#sectionMobilePopover .form-search input[type="text"] { width: 260px; }
#sectionMobilePopover .button-close { position: absolute; right: 10px; top: 10px; }
#navDragHelper {
    width: 73px; 
    height: 92px; 
    background: url(../img/drag-hint.png) no-repeat top left; 
    position: absolute;
    top:0;
    left: 50%;
    margin-left: -36px;
    z-index: 15;
    display: none;
} 
.hidden-mobile { display: none !important; }

.container_12 { width: 100vw; overflow: hidden; margin:0;}
.container_12 div[class*="grid_"] { margin-left:3%; margin-right: 3% } 
.container_12 .grid_4 { width: 94%;  margin-bottom: 5px; }
.container_12 .grid_3 { width: 69%; }
.container_12 .grid_2 { width: 44%; }
.container_12 .grid_1 { width: 19%; }
.container_12 .grid_1third { width: 13% !important; }
.container_12 .grid_auto { width: auto !important; }
.container_12 div[class*="grid_"] div[class*="grid_"] { margin-left: 0; margin-right: 3%; }
.container_12 div[class*="grid_"] .grid_4 { width: 97%; }
.container_12 div[class*="grid_"] .grid_3 { width: 72%; }
.container_12 div[class*="grid_"] .grid_2 { width: 47%; }
.container_12 div[class*="grid_"] .grid_1 { width: 22%; }
.container_12 .omega { margin-right: 0 !important; margin-left: 3% !important; }
.header-wrapper { padding-bottom: 0; }
.story { margin-top: 5px; }
.story img,
.leadstory img { width: 100%; height: auto; }
.leadstory { padding-bottom: 10px; }
.stretch[class*="grid"] { margin-left: 0 !important;  margin-right: 0 !important; width: 100%; }
.section-title,
.page-title { margin-left: 3%; margin-right: 3%; }
.grid_4 .section-title { margin-left: 0;  margin-right: 0; }
.deco-strip { width: inherit; }
body > section.advert { left: inherit !important; }
body > section.advert-adhesion { 
    margin: 0; 
    position: fixed !important; 
    z-index: 10; 
    bottom: 0; 
    left: 50% !important; 
    margin-left: -160px; }
section { margin-bottom: 20px; clear: both; }
.avatar img { margin-top: 5px; }
.advert img { width: auto; }
.advert-leaderboard { width: 320px; margin-left: auto; margin-right:auto;  min-height: inherit; padding: 0; }
.story-credits img.circle { height: 50px; width: 50px; }
.story-details section.advert { margin-bottom: 20px; }
.button-back2top { margin: 20px 0;  }
.button-morenews { padding: 0; margin: 5px; min-width: 160px; }
.button-with-icon2x { min-width: 44px !important; height: 44px !important;  }
.button-stretched { width: 100%; min-width: inherit; }
.sharing-options { padding-bottom: 15px; }
.sharing-options button { margin-right: 20px; }
.sharing-options button:last-child { margin-right: 0; }
.sharing-options div:first-child,
.sharing-options div:last-child { padding-top: 10px; }
span.label { font-size: 16px; }
.tabs li { bottom: -3px; }
.icon-home { margin-left: 5px; margin-right: 5px; }
.sharing-options-wide { text-align: center; }
.sharing-options-wide div:last-child { float: none; }
.sharing-options-wide li { display: inline-block; }
.sharing-options-wide li a { width: 44px; height: 30px; padding-top: 14px; display: block; border-radius: 50%; overflow: hidden; margin: 0 5px;}
.sharing-options-wide li a span { color: white; }
.form-row { margin: 15px 0; }

/* FONTS */
.super-large { font-size: 48px; line-height: 50px;  }
.xx-large { font-size: 42px; line-height: 44px;  }
.x-large{ font-size: 34px; line-height: 36px; }
.large{ font-size: 24px; line-height: 26px; }
.medium{ font-size: 21px; }
.small{ font-size: 18px; line-height: 22px; }
.x-small{ font-size: 16px; line-height: 20px; }
.tiny{ font-size: 14px; }
.loud { font-weight: bold; }
.semi-loud { font-weight: 600; }
.quiet { font-weight: normal }

.tabs-body ul { float: none; margin-bottom: 10px; }
.tabs-body li { padding: 0; display: inherit; margin: 0 3% 2px 3%; }
.tabs-body li a { display: block; padding: 20px 0; }
.tabs-body li.active { bottom: inherit; padding: 0; font-size: 24px; border-bottom: 2px solid #ddd; margin:0; }
.grid_4.tab-pane { margin-top: 20px; }
#contentContainer section:last-child { border-bottom: 0; margin-bottom: 0; padding: 0; }

#navMobile { background: none; width: 35px; height: 1px; }
#navMobile .icon-hamburger { display: none; }
#navMobile .button-chromeless { background:none; display: block; float: left; border-left: 1px solid #444; padding: 15px; height: inherit;}
#navMobile a.button-chromeless span { display: block; padding: 3px !important;}
#navMobile .button-toggle-container { float: right;}
#navMobile .button-toggle-container span { text-align: right; }
#navMobile .button-close-menu span { text-align: left; }
#navMobile .button-chromeless span { padding:0 !important; color: white; }
#navMobile .in-menu-options { border-bottom: 1px solid #444; }
#navMobile .options-container { background: #000; }
#navMobile .in-menu-container span { padding: 0 !important; }
#navMobile .options-container { background: #000; }
#navMobile .options-container .button-toggle-container { background-color: #f7f4f1; color: #3f3f3f; font-family: "Source Sans Pro", sans-serif; height: 51px; }
#navMobile .options-container .button-toggle-container span { color: #3f3f3f; }
#navMobile .options-container .button-toggle-container.alternate { background-color: #000000; color: #ffffff; }
#navMobile .options-container .button-toggle-container.alternate span { color: #ffffff; }
#navMobile #loginContainer .tabs { height: 50px; }
#navMobile #searchContainer { background-color: #f7f4f1; height: inherit; padding: 17px 13px; }
#navMobile #searchContainer input[type="text"] { font-size: inherit; padding: 9px; width: 75%; }
#navMobile #searchContainer button { float: right; height: 36px !important; min-width: 36px !important; }

/*#sectionMostReadStories { margin-left: 3%; margin-right: 3%; }*/
#sectionMostReadStories .section-title { margin-left: 0; margin-right: 0; }

#sectionYourLocalArea .tinted-container { height: inherit; }
#sectionMobilePopover { margin-top: 0; }

section[id*="sectionArticle"] div[class*="grid"] * { margin-right: 0; }
#sectionArticleComments .content-wrapper > div,
#sectionArticleComments .content-wrapper > span,
#sectionArticleComments .tinted-container { margin-bottom: 10px; }
#sectionArticleComments div.comment-options  button { margin-right: 10px !important;} 
#sectionArticleComments div.comment-options:last-child button { min-width: inherit; margin-right: 0 !important; margin-left: 10px !important; padding: 10px 20px; }

.form-account button { margin: 20px 0; }
.form-account input[type="text"],
.form-account input[type="password"] { width: 96%; padding-left: 2%; padding-right: 2%; }
.form-account select { width: 100%; }
.form-account label { margin-top: 20px; }
.form-account section:first-child { padding-top: 0; }

.window-overlay { padding: 20px 0; line-height: 2.5em; }
.window-overlay .button,
.window-overlay .button-inverse { padding: 0 10px; }
.window-overlay .c1,
.window-overlay .c2,
.window-overlay .c3 { float: left; display: block; padding: 0 3%; width: 12% }
.window-overlay .c2 { width: 55%; }
.window-overlay .c3 { float: right; }

.article-overlay .editors-avatar { width: 70px }


/** Possiblty to delete below **/

.grid_4 #mostRead li span,
.grid_4 #mostCommented li span,
.grid_4 #mostReadYesterday li span {
    left: 0;
    position: relative;
}

.mobile-sign-out {
	float: right;
	margin-right: 10px;
}

.mobile-sign-out button {
	min-width: 34px;
}

.OUTBRAIN .ob_strip_container .ob_org_header { display: none; }
#uatu-list li.clearfix div { margin-top: 0px; }
#uatu-list .grid_2 { width: 140px; }
#uatu-list .grid_4 { margin-bottom: 0px; }
#sectionArticleComments #DFP_adstrip_2 { margin-left: -10px; }
#sectionArticleComments .v-spacer.clearfix { clear: both; }
#sectionArticlePromoted { margin-top: 20px; }
#sectionArticlePromoted .grid_4 { width: 94%; }

@media only screen and (max-width : 728px) {
    .button { border-radius: 100px; padding: 8px 20px; }
}

#contentContainer .sharing-options img {border: none}

/* __ BIN __ */

#sectionArticlePromoted .placeholder { height: 600px; }
/*.story .grid_2:last-child { width: 50%; margin-right: 0; }*/

/* Live article page. */
.grid_4.live-article {
    margin-right: 0px !important;
    width: 100% !important;
}
.livefeed-statusbar > div,
.livefeed-statusbar > div > div {
    display: block;
}
.livefeed-statusbar > div > div.content-wrapper {
    padding: 10px;
}
.livefeed-statusbar #auto-refresh-container button {
    height: 36px;
    width: 50%;
}

/* Search results page */

#sectionSearchArchive .grid_4 {
  width: 90%;
}

/* Mobile cookie warning */

#cookieWarning { 
    bottom: 60px;
}

.story-details img {
    width:  100%;
    height: auto;
}

/* Footer. */
.mobile-footer-container .footer-chunk.tinted-container {
    font-size: 14px;
}
.mobile-footer-container .footer-chunk > ul a,
.mobile-footer-container .footer-chunk > ul a:visited {
    color: #999999;
}
ul.footer-links {
    width: inherit;
}
.mobile-footer-container .footer-chunk > ul li,
ul.footer-links > li {
    float: left;
    margin-right: 10px;
}
.footer-chunk {
    color: #999999;
    padding: 10px;
}
.footer-chunk > .ipso-regulated {
    margin: 0px;
}
.footer-chunk > .ipso-regulated a:visited {
    color: #3f3f3f;
}
.footer-chunk > .ipso-regulated .footer-notice {
    margin-bottom: 20px;
    width: inherit;
}
.footer-divider {
    height: 5px;
    margin: 5px 0px -5px 0px;
}
#sendYourNews form textarea {
  width: 93.5%;
  padding: 3%;
  height: 120px;
  margin-top: 10px;
}

#sendYourNews select, input[type="file"] {
  height: inherit;
}

#sectionArticleComments .grid_4 {
  display: inherit;
  float: inherit;
}

/* Stops Fotorama thumbnails showing out the right side of the div. */
.fotorama__nav--thumbs {
    padding-left: 0px !important;
}

a.buy-this-photo {
    margin: 4px 0px 4px 10px;
    padding: 3px 8px 3px 8px;
}

#mobile-matrix > section {
    padding: 10px !important;
}

/**
 * Cars.
 */
/* Homepage. */
#sectionCarsHomepage img {
    border: none;
}
#sectionCarsHomepage #speedShiftSearch {
    margin-bottom: 10px;
}
#subSpeedShiftLinkOuter {
    width: 100%;
}
#subSpeedShiftLink {
    background-color: #6C6C6C;
    font-size: 1.5em;
    height: 32px;
    margin: -8px auto 0px auto;
    padding-left: 22px;
    width: 258px;
}
@media only screen and (min-width: 321px) and (max-width: 480px) {
    #subSpeedShiftLinkOuter {
        width: 98%;
    }
}
#subSpeedShiftLink a,
#subSpeedShiftLink a:visited {
    color: #ffffff;
}
#carsIntroductionLink {
    margin: 20px 0px 10px 0px;
}
#carsIntroductionLink .introText {
    color: #3a3c3f;
    font-size: 18px;
    line-height: 20px;
}
#carNewsHeading a:after {
    font-family: "FontAwesome";
    content: '\f105';
    font-size: 85%;
    padding-left: 8px;
    transition: all 0.3s linear 0;
    -moz-transition: all 0.3s linear 0;
    -webkit-transition: all 0.3s linear 0;
}
#carNews .story h2.small {
    margin-top: -4px;
}
#carNews .story .postedAgo {
    color: #828689;
    font-size: 1.2em;
}
#carNews .moreMotoringNews {
    color: #195E93;
    float: right;
    font-size: 1.75em;
    margin: 20px 10px 20px 0px;
}

/* Exchange and Mart search box. */
#sectionCarsHomepage .searchPanel {
    background-color: #f2f2f2;
    margin-bottom: 10px;
    padding: 10px;
    width: 280px;
}
#sectionCarsHomepage .searchPanel h2 {
    font-size: 1.9em;
}
#sectionCarsHomepage #eamPoweredBy img {
    float: right;
    position: relative;
    top: -24px;
}
#sectionCarsHomepage #eamCarSearch select {
    margin-bottom: 8px;
}
#sectionCarsHomepage #eamCarSearch #postcodeEamSearch {
    margin-bottom: 8px;
    width: 270px;
}
#sectionCarsHomepage #eamCarSearch #submitEamSearch {
    width: 278px;
}
#sectionCarsHomepage #search-errors .alert-error {
    background-color: #fef1f2;
    border: 1px solid #fccacc;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    color: #9c080c;
    font-size: 1.5em;
    line-height: 1.5em;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 6px 12px;
}


/* General. */
.mpu.v-spacing {
    margin: 10px 0px 10px 0px;
}
.grid_4.no-margins {
    margin: 0px !important;
}

/* SpeedShift overrides. */
#sectionCarsHomepage #ssm_widget_input_holder {
    margin: 0px auto 0px auto;
}
.grid_4.no-margins #ssm_columns_index_nav {
    margin: 10px 10px 10px 10px;
}


/* Most read and most commented stores */
.most-read-commented .tabs {
    margin-bottom: -7px;
}
.most-read-commented .tabs ul {
	width: 100%;
}
.most-read-commented .tabs li {
	width: 49.5%;
}
.most-read-commented .tabs li {
    width: 49.5%; 
}

.most-read-commented .tabs-body li a {
	text-align: center;
    padding: 20px 0 20px 0;
}
 
.most-read-commented .tabs-body li {
    padding: 0;
    display: inline-block;
    margin: 0 1px 0 0;
}
 
.most-read-commented .tabs-body li.active {
	bottom: -3px;
	border-bottom: none;
	font-size: 21px;
}

#sectionMostReadStories ul,
#sectionMostCommentedStories ul {
    display: table;
}

#sectionMostReadStories li,
#sectionMostCommentedStories li {
    display: table-row;
}

#sectionMostReadStories a,
#sectionMostReadStories li span.item-count,
#sectionMostCommentedStories a,
#sectionMostCommentedStories li span.item-count {
    display: table-cell;
    padding: 10px;
    vertical-align: middle;
    border-bottom: 5px solid white;
}

#sectionMostReadStories li span.item-count,
#sectionMostCommentedStories li span.item-count {
  text-align: right; 
}

#sectionMostReadStories li span.muted,
#sectionMostCommentedStories li span.muted {
    color: #9b9b9b;
}

#sectionMostReadStories button,
#sectionMostCommentedStories button {
    min-width: inherit;
}

#sectionMostReadStories button span:after,
#sectionMostCommentedStories button span:after {
    padding-left: 0;
    padding-right: 8px; 
}

/* Editing/deleting comments. */
#comments-list .edit-comment-form {
    text-align: center;
}
#comments-list .edit-comment-form > textarea {
    width: 97%;
}
#comments-list .edit-comment-form > button {
    margin: 0 0 10px 0 !important;
}
#comments-list .delete-alert button.delete-cancel {
    float: none !important;
    margin-top: 10px;
}
