/****************************************************************** Site Name: NEW WEBSITE Author: DeanHouston Web Team Stylesheet: Main Stylesheet ******************************************************************/ /********************* IMPORTING PARTIALS *********************/ /****************************************************************** Site Name: MIDLAND DOT MICROSITE Author: DeanHouston Web Team Stylesheet: Variables ******************************************************************/ /********************* COLORS *********************/ /********************* TEXT SHADOWS *********************/ /****************************************************************** Site Name: MIDLAND DOT MICROSITE Author: DeanHouston Web Team Stylesheet: Typography ******************************************************************/ /********************* FONT FACE (IN YOUR FACE) *********************/ @font-face {font-family: 'cartogothic_pro_book'; src: url("/assets/fonts/cartogothicpro-book-webfont.eot"); src: url("/assets/fonts/cartogothicpro-book-webfont.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/cartogothicpro-book-webfont.woff") format("woff"), url("/assets/fonts/cartogothicpro-book-webfont.ttf") format("truetype"), url("/assets/fonts/cartogothicpro-book-webfont.svg#cartogothic_pro_book") format("svg"); font-weight: normal; font-style: normal; } @font-face {font-family: 'cartogothic_pro_bold'; src: url("/assets/fonts/cartogothicpro-bold-webfont.eot"); src: url("/assets/fonts/cartogothicpro-bold-webfont.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/cartogothicpro-bold-webfont.woff") format("woff"), url("/assets/fonts/cartogothicpro-bold-webfont.ttf") format("truetype"), url("/assets/fonts/cartogothicpro-bold-webfont.svg#cartogothic_pro_bold") format("svg"); font-weight: bold; font-style: normal; } @font-face {font-family: 'cartogothic_pro_light'; src: url("/assets/fonts/cartogothicpro-light-webfont.eot"); src: url("/assets/fonts/cartogothicpro-light-webfont.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/cartogothicpro-light-webfont.woff") format("woff"), url("/assets/fonts/cartogothicpro-light-webfont.ttf") format("truetype"), url("/assets/fonts/cartogothicpro-light-webfont.svg#cartogothic_pro_light") format("svg"); font-weight: lighter; font-style: normal; } /****************************************************************** Site Name: MIDLAND DOT MICROSITE Author: DeanHouston Web Team Stylesheet: Mixins Stylesheet ******************************************************************/ /********************* TRANSITION *********************/ /********************* CSS3 GRADIENTS *********************/ /* @include css-gradient(#dfdfdf,#f8f8f8); */ /********************* BOX SIZING *********************/ /********************* BORDER-RADIUS *********************/ /* @include rounded-corners(4px); */ /********************* BOX-SHADOWS *********************/ /********************* IMPORTING MODULES *********************/ /********************* IMPORTING BREAKPOINTS *********************/ /****************************************************************** Site Name: MIDLAND DOT MICROSITE Author: DeanHouston Web Team Stylesheet: Base Mobile Stylesheet ******************************************************************/ .midland-dot {/****************************************************************** H1, H2, H3, H4, H5 STYLES ******************************************************************/ /********************* HEADER STYLES *********************/ /********************* CONTENT STYLES *********************/ /********************* SIDEBAR STYLES *********************/ /********************* MISC STYLES *********************/ } .midland-dot h2.red, .midland-dot .h2.red {color: #d21b34; } .midland-dot #header {position: relative; height: 400px; background: url(/assets/images/midland-tanker_sm.jpg) no-repeat center top; } .midland-dot #inner-header {background: url(/assets/images/opw-swoosh-fade.png) no-repeat 60px -10px; } .midland-dot #inner-header .slogan {background: url(/assets/images/bg_blue-fade.png) repeat 0 0; } .midland-dot #featured {position: absolute; bottom: 0; width: 100%; background: url(/assets/images/bg_red-feature.png) repeat-y center top; text-align: center; padding: 10px 5%; } .midland-dot #featured h1 {color: #ffffff; margin: 0; } .midland-dot #overlay {display: none; background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; } .midland-dot #dot-products h2 {text-align: center; } .midland-dot #dot-products .cards {overflow: hidden; } .midland-dot #dot-products .cards .card {width: 90%; margin: 0 auto 20px; } .midland-dot #dot-products .cards .card .img-wrap {background-color: #f2f2f2; padding: 20px; border: solid #dcdcdc; border-width: 1px 1px 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .midland-dot #dot-products .cards .card .img-wrap img {display: block; margin: 0 auto; cursor: pointer; } .midland-dot #dot-products .cards .card .title-wrap {background-color: #e7e7e7; text-align: center; padding: 10px 20px; border: solid #dcdcdc; border-width: 0 1px 1px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } .midland-dot #dot-products .cards .card .title-wrap h3 {margin-bottom: 5px; cursor: pointer; } .midland-dot #dot-products .cards .card .title-wrap a {font-family: "cartogothic_pro_bold", Helvetica, Arial, sans-serif; color: #d21b34; text-transform: uppercase; } .midland-dot #dot-products .cards .card.ball-valve .title-wrap {padding-top: 20px; } .midland-dot #dot-products .cards .modal {display: none; position: absolute; right: 0; left: 0; z-index: 100; width: 90%; background-color: #f2f2f2; margin: 0 auto; padding: 20px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25); } .midland-dot #dot-products .cards .modal h2 {text-align: left; } .midland-dot #dot-products .cards .modal a {font-family: "cartogothic_pro_bold", Helvetica, Arial, sans-serif; color: #d21b34; } .midland-dot #dot-products .cards .modal a.close-btn {position: absolute; top: 10px; right: 10px; font-size: 3em; line-height: 0.5; } .midland-dot #dot-products .cards .modal a.close-btn:after {content: '\00D7'; } .midland-dot #dot-products .cards .modal a.close-btn:hover, .midland-dot #dot-products .cards .modal a.close-btn:active {text-decoration: none; } .midland-dot #dot-products .cards .modal blockquote {clear: both; background-color: #d21b34; font-family: "cartogothic_pro_bold", Helvetica, Arial, sans-serif; color: #ffffff; border: none; } .midland-dot #dot-products .cards .modal .modal-aside {text-align: center; margin-bottom: 40px; } .midland-dot #dot-products .cards .modal .modal-aside img {display: block; margin: 0 auto; } .midland-dot #dot-products .cards .modal ul.process-chart {list-style: none; overflow: hidden; width: 100%; margin: 0; } .midland-dot #dot-products .cards .modal ul.process-chart li {display: block; font-size: 0.9em; line-height: 1.3; margin-bottom: 20px; } .midland-dot #dot-products .cards .modal ul.process-chart li img {display: block; margin-bottom: 10px; border: solid 2px #d21b34; -webkit-border-radius: 5px; border-radius: 5px; } .midland-dot #dot-products .cards .modal .footer {text-align: center; } .midland-dot #dot-products .cards .modal .footer img {width: 220px; } .midland-dot #dot-products .cards .modal .footer p {margin-top: -20px; margin-bottom: 0; } .midland-dot #source-guide {background: url(/assets/images/midland-flammable_sm.jpg) no-repeat center center; background-size: cover; padding: 40px 0; } .midland-dot #source-guide h2, .midland-dot #source-guide h4 {color: #ffffff; margin-bottom: 20px; } .midland-dot #source-guide #source-type {display: none; color: #ffffff; } .midland-dot #source-guide #source-trigger {margin-bottom: 20px; } .midland-dot #source-guide p {color: #ffffff; } .midland-dot #source-guide p.disclaimer {display: none; font-size: 0.8em; font-style: italic; text-align: right; } .midland-dot #source-guide p a {color: #d21b34; } .midland-dot #source-guide .table-responsive {display: none; width: 100%; overflow-y: hidden; overflow-x: scroll !important; margin-bottom: 20px; } .midland-dot #source-guide .table-responsive table {width: 815px !important; margin-bottom: 0; border-right: solid 1px #808080; } .midland-dot #source-guide .table-responsive table thead {background-color: #d21b34; font-family: "cartogothic_pro_bold", Helvetica, Arial, sans-serif; } .midland-dot #source-guide .table-responsive table tbody tr {display: none; } .midland-dot #source-guide .table-responsive table th, .midland-dot #source-guide .table-responsive table td {width: 20%; font-size: 0.9em; line-height: 1.6; text-align: left; color: #ffffff; padding: 8px; border: solid #4d4d4d; border-width: 1px 0 2px 1px; } .midland-dot #content table tbody tr:nth-child(even) {background: #ffffff; } .midland-dot #related-links {background-color: #ffffff; padding: 20px 0; } .midland-dot #related-links a {font-family: "cartogothic_pro_bold", Helvetica, Arial, sans-serif; color: #d21b34; } .midland-dot #related-links ul.related-links {list-style: disc; margin: 0 0 20px 20px; } .midland-dot #related-links ul.related-links li {margin: 10px 0; line-height: 1.3; } .midland-dot #sidebar {margin-bottom: 40px; } .midland-dot .red-button {position: relative; display: inline-block; background: #d21b34; font-family: "cartogothic_pro_bold", Helvetica, Arial, sans-serif; text-transform: uppercase; color: #ffffff; margin-bottom: 40px; padding: 10px 50px 10px 20px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-transition: background-color 0.24s ease-in-out; transition: background-color 0.24s ease-in-out; } .midland-dot .red-button:hover, .midland-dot .red-button:active {background-color: #a51529; text-decoration: none; } .midland-dot .red-button .caret {position: absolute; top: 18px; right: 20px; display: block; width: 16px; height: 16px; border-top: solid 8px #ffffff; border-right: solid 8px transparent; border-bottom: solid 8px transparent; border-left: solid 8px transparent; } @media only screen and (min-width: 600px) {/****************************************************************** Site Name: NEW WEBSITE Author: DeanHouston Web Team Stylesheet: Largest Mobile Stylesheet ******************************************************************/ .midland-dot {/********************* HEADER STYLES *********************/ } .midland-dot #inner-header {background-position: left top; } } @media only screen and (min-width: 768px) {/****************************************************************** Site Name: NEW WEBSITE Author: DeanHouston Web Team Stylesheet: Tablet Stylesheet ******************************************************************/ .midland-dot {/********************* HEADER STYLES *********************/ /********************* CONTENT STYLES *********************/ } .midland-dot #header {background: url(/assets/images/midland-tanker_md.jpg) no-repeat center top; } .midland-dot #inner-header {background: none; } .midland-dot #dot-products .cards {width: 94%; margin: 0 auto; } .midland-dot #dot-products .cards .card {width: 100%; } .midland-dot #dot-products .cards .card.col {float: left; width: 48%; margin: 0 1% 20px; } .midland-dot #dot-products .cards .card .title-wrap {height: 100px; } .midland-dot #dot-products .cards .modal {width: 92%; } .midland-dot #dot-products .cards .modal .modal-aside {float: left; width: 30%; } .midland-dot #dot-products .cards .modal .modal-text {float: right; width: 70%; padding: 10px 0 0 20px; } .midland-dot #dot-products .cards .modal h4 {clear: both; } .midland-dot #dot-products .cards .modal ul.process-chart li {float: left; width: 29%; margin: 0 2%; } .midland-dot #dot-products .cards .modal .footer {float: right; } .midland-dot #source-guide {background: url(/assets/images/midland-flammable_md.jpg) no-repeat center center; background-size: cover; } .midland-dot #source-guide h2, .midland-dot #source-guide h4 {width: 62%; } .midland-dot #source-guide .table-responsive {overflow-y: hidden; overflow-x: hidden !important; } .midland-dot #source-guide .table-responsive table {width: 100% !important; } } @media only screen and (min-width: 960px) {/****************************************************************** Site Name: NEW WEBSITE Author: DeanHouston Web Team Stylesheet: Small Laptop Stylesheet ******************************************************************/ } @media only screen and (min-width: 1020px) {/****************************************************************** Site Name: NEW WEBSITE Author: DeanHouston Web Team Stylesheet: Small Desktop Stylesheet ******************************************************************/ .midland-dot {/********************* HEADER STYLES *********************/ /********************* CONTENT STYLES *********************/ /********************* SIDEBAR STYLES *********************/ } .midland-dot #navcontainer nav li a {color: #0e4969; } .midland-dot #navcontainer nav li a:hover, .midland-dot #navcontainer nav li a:active {color: #ffffff; } .midland-dot #navcontainer nav li span.caret {border-top: solid #0e4969; } .midland-dot #navcontainer nav li.active span.caret {border-top: solid #ffffff; } .midland-dot #navcontainer nav li.active a {color: #ffffff; } .midland-dot #navcontainer nav li ul.children li h3 a, .midland-dot #navcontainer nav li ul.children li h3 a:link, .midland-dot #navcontainer nav li ul.children li h3 a:visited {color: #ffffff; } .midland-dot #navcontainer nav li ul.children li a {color: #333333; } .midland-dot #navcontainer nav li ul.children li a:hover, .midland-dot #navcontainer nav li ul.children li a:active {color: #156f9f; } .midland-dot #navcontainer nav li ul.children li.active a {color: #156f9f; } .midland-dot #navcontainer nav li ul.children li.active li a {color: #333333; } .midland-dot #navcontainer nav li ul.children li.active li a:hover, .midland-dot #navcontainer nav li ul.children li.active li a:active {color: #156f9f; } .midland-dot #navcontainer nav li ul.children .nav-secondary a {color: #808080; } .midland-dot #navcontainer nav li ul.children .nav-secondary a:hover, .midland-dot #navcontainer nav li ul.children .nav-secondary a:active {color: #333333; } .midland-dot #header {height: 500px; background: url(/assets/images/midland-tanker_lg.jpg) no-repeat center top; } .midland-dot #header .navbar {display: none; } .midland-dot #inner-header .slogan {background: none; } .midland-dot #featured {bottom: 180px; } .midland-dot #featured h1 {font-size: 3em; } .midland-dot #content {padding: 40px 0; } .midland-dot #content h2 {font-size: 1.8em; } .midland-dot #dot-products .cards {position: relative; width: 96%; max-width: 1140px; } .midland-dot #dot-products .cards .card.col {width: 29%; margin: 0 2% 20px; } .midland-dot #dot-products .cards .card .title-wrap h3 {font-size: 1.2em; } .midland-dot #dot-products .cards .modal {width: auto; padding: 40px; } .midland-dot #source-guide {background: url(/assets/images/midland-flammable_lg.jpg) no-repeat center center; background-size: cover; } .midland-dot #sidebar img {margin-top: -140px; } } /********************* PRINT STYLESHEET *********************/ /*# sourceMappingURL=midland-dot.css.map */