/* base styles */
body { font-size:1.2rem; }
body, a, a:hover, a:visited, a:active { line-height:1.5rem; }

iframe { -webkit-overflow-scrolling: touch; width: 100%}

#s4-workspace { width:100%;-webkit-overflow-scrolling: touch; overflow:hidden; overflow-y: auto; }

a, a:hover, a:visited, a:active { color:#ec1c2e; }
h1.field-title { color:#ec1c2e; }
h2, h4, h5 { font-weight:500; }

.field-summary-title {  
    font-size:2.2rem;
	color:#ec1c2e;
	margin: 1em 0 1em 0;
}

.card, .card-body, .card::before { padding:0; border:none; background-color:transparent; }

.landing-page-locator {border: 1px solid #BCBDC0;background-color:#F3F3F4;border-radius:5px 5px 5px 5px;padding:0 10px 10px 10px;}
.landing-page-locator h2 { font-size:20px; }
.landing-page-locator input.form-control { background-color:#fff; border-right:none; }
.landing-page-locator input.form-control:hover, 
.landing-page-locator input.form-control:active { background-color:#fff; border-right:none; border-color:#ababab; }
.landing-page-locator .glyphicon {top:0;cursor:pointer;color:#ec1c2e;border-left:none;background-color:#fff;border-color:#ababab;}

#row-1-right .ms-rtestate-field img { width:100% !important; }	
	
#header { background-color: #fff; box-shadow: rgba(255, 255, 255, 0.0980392) 0px 10px 10px; }
.navbar-brand, .ms-siteicon-a {margin:0; height:auto; margin-left: -47px; }
 #topnavbar .nav img { max-height:none; }

#valero-global-nav-footer-links {border-top:1px solid #ccc;padding-top:10px;}
#valero-global-nav {position:absolute;top:12px;right:70px;z-index:100;text-align:center;left:60px;visibility:hidden;}
#valero-global-nav ul { list-style-type:none; padding:0; }
#valero-global-nav ul li {display:inline-block;margin: 5px;border: solid 1px #777;border-radius:10px;box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.1);}
#valero-global-nav ul li:hover {background-color:rgba(0,0,0,0.7);border-color:rgba(0,0,0,0.7);}
#valero-global-nav ul li:hover a, 
#valero-global-nav ul li:hover a:hover, 
#valero-global-nav ul li:hover a:visited {color:#fff;}
#valero-global-nav ul li a, 
#valero-global-nav ul li a:hover, 
#valero-global-nav ul li a:visited {display:block;color:#555;text-decoration:none;font-size:12px;font-weight:bold;padding: 10px 20px;}
#valero-site-tagline {position: absolute;left: 84px;top: 40px;color: #818285;font-size: 13px;font-style: italic;line-height:19px;}
#valero-site-tagline span {font-size: 18px;display:block;}

.navbar-top { background-color: #fff; border: none; min-height:1em; padding-left: 20px;}
.navbar-nav { margin:0; margin-bottom: 27px;}
.navbar-toggle { margin-top:0.7em; }
.navbar-default .navbar-toggle .icon-bar { background-color: #333; }

#topnavbar .nav li.static > .menu-item { padding:0 0 0 0.5em; line-height:1.8em; height:2em; background-color:#fff;color:#555;font-weight:bold;border: solid 1px #fff;font-size:20px;}
#topnavbar .nav li.static > .menu-item:hover, 
#topnavbar .nav li.static.shown > .menu-item,
#topnavbar .nav li.static > .menu-item:link:hover,
#topnavbar .nav li.dynamic-children > .menu-item:hover,
#topnavbar .nav li.static > .menu-item:hover, 
#topnavbar .nav li.static.shown > .menu-item { color: #000; background-color: #fff; }
#topnavbar .nav li.selected > .menu-item, 
#topnavbar .nav li.selected > .menu-item:hover { background-color:#fff;color:#ec1c2e;}
#topnavbar .nav ul.static > li.dynamic-children > ul.dynamic { top: 0 !important; margin:0; margin-left:12px;}
#topnavbar .dynamic .ms-core-listMenu-item, 
#topnavbar .dynamic .ms-core-listMenu-item:link { color: #666; background-color:#fff; padding:0 15px 0 15px; line-height:1.8em;}
#topnavbar .dynamic .ms-core-listMenu-item:hover, 
#topnavbar .dynamic .ms-core-listMenu-item:link:hover {background-color: #fff;color: #666;}
	
.valero-search span.glyphicon { top:0; color:black;margin-left:20px; }	
.valero-search .navbar-toggle {left:20px;}	

.valero-carousel { padding-top:2rem; margin-bottom: 20px; margin-top: -20px; }
.carousel-indicators {position: absolute;top: 0px;background-color: rgba(255,255,255,0.4);bottom: auto;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;padding: 6px;right: 10%;}
.carousel-indicators:before {content: "";position: absolute;width: 14px;height: 41px;margin-top: -10px;margin-left:-24px;background: transparent;}
.carousel-indicators:after {content: "";position: absolute;width: 14px;height: 41px;margin-top: -10px;margin-left: 10px;margin-left: 6px\9; /*IE 7 & 8 Hack*/background: transparent;}    
.carousel-indicators li {border-color:rgba(0,0,0,0.7);color:#000;margin: 1px 3px;width:10px;height:10px;}
.carousel-indicators li.active {background-color:rgba(0,0,0,0.5);margin: -1px 3px 0px;width:10px;height:10px;}
.carousel-inner .item { padding-bottom: 3.7rem; }
.carousel-inner .item img { width:100%; }
.carousel-caption {bottom: 38px;font-size: 14pt;line-height: 29px;z-index: 15;left: 0px;right: 0px;text-shadow: none;padding: 0px;margin-bottom: 7px;margin-top: -101px;font-weight: bold;color: rgba(255,255,255,1);text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}
.carousel-control { bottom: 3.7rem; } 
.btn, .btn:hover, .btn:visited {border-radius:4px;padding: 0.5rem 1rem 0.5rem 1rem;background-color:#ec1c2e;border-color:#ec1c2e;}
.valero-carousel .carousel-control .glyphicon { top:40%; }	

.img-responsive {width:99%;}

footer { background-color: #fff; color: #000; padding:1em; margin-top: 40px;}
footer h3 { color:#666; }
footer a, footer a:hover, footer a:visited { color:#ec1c2e; }
#copyright {font-size: 0.7em;color: #ec1c2e;margin-top: 25px; margin-bottom:20px;padding-top: 10px;}
footer .list-inline li {padding:0px 20px 0px 20px;}

.container .jumbotron, .container-fluid .vlo_jumbo {border-radius: 8px;border: 1px solid #ccc;padding: 24px;}
.container .jumbotron, .container-fluid .vlo_jumbo h1 {font-size: 10pt;font-weight: bold;margin-top: -12px;padding: 0px;}
.container .jumbotron, .container-fluid .vlo_jumbo input[type="search"] {height: 30px;font-weight: bold;}
.container .jumbotron, .container-fluid .vlo_jumbo h4 {font-weight:bold;font-size: 7pt;margin-top: -15px;}
.container .jumbotron, .container-fluid .vlo_jumbo p.location_result {color: #F00;font-weight: bold;line-height: 15px;margin-bottom: -5px;font-size:9pt;}
.container .jumbotron, .container-fluid .vlo_jumbo p.location_result span {display:block;}

#s4-bodyContainer > .container {width: 95%;} /* Mobile (shifting fix) */

.vlo_bulletin h3 {font-size: 13pt;text-align: left;padding-top: 13px;}

h2.field-callout  {
    font-weight:bold !important;
    font-weight:700 !important; 
    text-align:left !important; 
    font-size:2.2rem !important;
	color:#ec1c2e !important;
	margin:1em 0 1em 0 !important;
}

/* designer view specific*/
.ms-core-webpartadder { position: relative; top:0; }
.ms-webpartzone-cell { margin-bottom:auto; }
#globalNavBox, ms-clientcontrol-chromeheader { height:inherit; }

/* bootsrap alert overides */
#cookie-warning {display: none;}
.alert-success {color: #333;background-color: #A7FF9A;}
.alert-info {color: #333;background-color: #CEE0EE;}
.alert-warning {color: #333;background-color: #FFF59A;}
.alert-danger {color: #FFF; background-color: #D90000;}
.alert-close, .alert-close:hover {display: inline-block;width: 18px !important;height: 16px !important;padding: 0px;padding-bottom: 2px;font-weight: bold;cursor: pointer;}

/* bootstrap button overides and custom style */
.btn-texaco,
.btn-texaco:hover,
.btn-texaco:active,
.btn-texaco:focus {
    background-color:#EC1C2E;
    height:21px !important;
    max-height:21px !important;
    padding:6px 12px;
    font-weight:bold;
}
.btn-texaco:hover {padding-top:8px !important;padding-bottom:4px !important;}

/* currently not used and therefore hidden */
.breadcrumb, .user-info, .user-info-contact { display:none !important; }
.user-home-icon {border-right: none;}
#topnavbar .nav ul.static {margin-left:-27px;}
.field-title { visibility:hidden; height:0; padding:0; margin:0; }
	
/* xsmall screens */
@media (min-width:360px) and (orientation:landscape) {
    .vlo_bulletin h3 {font-size: 17pt;text-align: left;padding-top: 32px;}
    h4.home-page {width:300px;}
}

/* smaller screens */
@media (min-width: 768px) {
	
	body { font-size:1.5rem; }
	h2, h4, h5 { font-weight:bold; }
	h4.home-page {width:700px;}
	.body-contents p { line-height:2rem; margin-bottom:1.2rem; color:#000; }
	.landing-page-locator { min-height:250px; padding-bottom:0; }
	.landing-page-locator h2 { font-size:30px; }
	
	.ms-siteicon-a { max-height:none; max-width:none; }
    .navbar-brand { float:none;margin-left:0px; }
	
	#topnavbar .nav li.static > .menu-item {padding:0 1em 0 1em; line-height:1.5em; height:1.8em; border: none;color:#666;background-color:#fff;} 
    .navbar-top { background-color: #fff; border: none;padding-left: 9px; }
    #topnavbar .nav li.static > .menu-item:hover, 
    #topnavbar .nav li.static > .menu-item:link:hover,
    #topnavbar .nav li.static.shown > .menu-item { color: #000; background-color:#fff; }
    #topnavbar .nav li.selected > .menu-item, 
    #topnavbar .nav li.selected > .menu-item:hover { color:#ec1c2e; background-color:#fff; }
    #topnavbar .nav ul.static > li.dynamic-children > ul.dynamic { margin-top: 30px; margin-left: 17px;}
	#topnavbar .nav ul.static {margin-left:-36px;}

	.valero-carousel .carousel-control .glyphicon { top:50%; } 
    .valero-carousel {margin-top:0px;width:100%}
    .carousel-indicators { top:0; }
	/*.carousel-caption {bottom: 61px;font-size: 15pt; }*/
    
	footer .col-md-4 {text-align: center !important;margin-bottom:20px;border-top:1px solid #ccc;padding-top:10px;font-size:9px;}
    footer h3 {font-size:9px;}
		
	.container .jumbotron, .container-fluid .vlo_jumbo h1 {font-size: 16pt;}
    .container .jumbotron, .container-fluid .vlo_jumbo h4 {font-size: 11pt;}
    .container .jumbotron, .container-fluid .vlo_jumbo p {font-size: 12pt;line-height:21px;}
    .container .jumbotron, .container-fluid .vlo_jumbo input[type="search"] {height: 40px;}	
	
	.vlo_bulletin h3 {font-size: 14pt;text-align: left;padding-top: 15px;}  
    
    .carousel-caption {font-size:25pt;bottom:50px;}
}

/* medium screens */
@media (min-width:992px) {
	
    #main { min-height:400px; }
	
	#valero-global-nav {visibility:visible;top:5px;right:5px; text-align:right;}
	#valero-site-tagline {left: 84px;top: 40px;font-size: 13px;margin-left:0px;line-height:19px;}
	#valero-site-tagline span {font-size: 18px;display:block;}
	 
	.vlo_bulletin h3 {font-size: 19pt;text-align: left;padding-top: 23px;} 
    h4.home-page {width:700px;}
}

/*set width when on a larger screen*/
@media (min-width:1250px) {
    #s4-bodyContainer  {width:1200px !important;margin-left:auto;margin-right:auto;}
    h4.home-page {width:700px;}
    /*#copyright {margin-top: -26px;margin-right: 40px;}*/
}

/* Design Bug Fixes (Follwing Business Feeback Session) */

.video {display:none;}

#ctl00_PlaceHolderSearchArea_ctl00_csr_sbox {
    border: 1px solid #ccc; 
    margin: 0px;
    border-radius: 8px;
    background: #fff url(../img/search_bg.jpg) 3px 4px no-repeat;
    text-indent: 26px;
    position:absolute;
    height:34px;
    right:0px;
    top:120px;
    width:154px;
    z-index:1;
}
#ctl00_PlaceHolderSearchArea_ctl00_csr_sbox:focus {width:250px;}

.valero-search {}
.navbar-collapse-search .search-box input {border: 1px solid #ccc; 
    margin: 0px;
    border-radius: 8px;
    background: #fff url(../img/search_bg.jpg) 3px 4px no-repeat;
    text-indent: 26px;}

/* hero image */
.hero-image {width: 103%;margin-left: -6px;}

/* images using position=left on valero summary view */
.ms-rtePosition-1 {margin-right:20px !important;margin-bottom:20px !important;margin-left:0px !important;}

/* text alignment */
.body-contents, .body-contents p {padding-right:5px;}

/* fuel type image fix */
#fuel_image {background:transparent url(../img/fuels_portrait.png) top center no-repeat;display:block;width:100%;height:247px;}

/* Star Rewards Jumbo Link */
.black-link {
    text-decoration: none;
    color: #111 !important;
}

.black-link:hover { text-decoration:underline !important; }

.black-link h3 {
    padding-left: 25px;
}

footer {border-top:1px solid #ccc;margin-top:50px;}
footer .col-sm-12 {border:none;/*border-top: 1px solid rgb(204, 204, 204);padding-top:20px;*/color:#000;}

#copyright {margin-top:3px;width:100%;color:#000;}

@media (min-width:320px) {
    footer .list-inline {text-align:center;display: block;width: 100%;}
    footer .list-inline li {width:18%;display:inline-block;/*height:45px;*/vertical-align:top;padding-top:15px;/*border-bottom:1px solid #ccc;*/text-align:center;}    
    #ctl00_ctl49_g_e9a29915_97e5_431d_aa95_ea0cbc40f8bb {width:58% !important;}
}

@media (min-width: 320px) and (orientation:landscape) {
    #fuel_image {background-image:url(../img/fuels_landscape.png);background-size:600px 48px;height:50px;}
}

@media (min-width: 768px) {
    .hero-image {margin-left: -19px;width: 105%;}
    .valero-carousel {margin-top:-20px;width:100%}
    .ms-rtePosition-1 {max-width:35%;}
    #fuel_image {background-image:url(../img/fuels_landscape.png);height:57px;}
    footer .list-inline {text-align:center;display: block;width: 100%;}
    footer .list-inline li {width:27%;}
    #ctl00_ctl49_g_e9a29915_97e5_431d_aa95_ea0cbc40f8bb {width:100% !important;}
}

@media (min-width:992px) {
    .hero-image {margin-left: -21px;width: 105%;}
    .ms-rtePosition-1 {max-width:35%;}
    footer .list-inline li {width:auto;}
}

@media (min-width: 768px) and (max-width: 992px) {
    #ctl00_PlaceHolderSearchArea_ctl00_csr_sbox {top:50px;}
    .ms-rtePosition-1 {max-width:35%;}
}

@media (min-width:1024px) {
    .hero-image {margin-left: -34px;width: 107%;}
    .ms-rtePosition-1 {max-width:35%;}
}

@media (min-width:1024px) and (orientation:landscape) {
    #fuel_image {background-position:top left;width:667px;margin-top:-10px;float:right;}
}

@media (min-width:1250px) {
	.hero-image {margin-left: -15px;width: 104%;}
    .valero-carousel {margin-top: -20px;width: 1170px;margin-left: 20px;}
    #fuel_image {width:837px;margin-top:-10px;float:right;}
}

.vlo-form-feedback-message {
    margin-left: 6px;
    padding: 5px 24px;
    border-radius: 4px;
    width: 455px !important;
    display: inline-block;
    vertical-align: top;
}

/* valero_hybrid-one-col style overides */
#valero_hybrid-one-col {
    margin-left: 10px;
    margin-right: 10px;
}

a.no-link, a.no-link:hover {text-decoration:none !important;color:#818285 !important;}

/* Our Fuels */
#our-fuels { position:relative; height:208px; margin-bottom:20px;}

#our-fuels .hotspot, #our-fuels .last-hotspot {display:block;height:40px;width:150px;margin-left:4px; margin-bottom:12px;}
#our-fuels .last-hotspot {margin-bottom:0;}
#our-fuels #our-fuels-hotspots {background-image:url('/PublishingImages/fuels-portrait.png'); width:158px; height:208px;}

#our-fuels-hotspots {float:left; margin-top:5px;}
#our-fuels-text { height:190px; margin-left:168px; padding-top:3px;}
#our-fuels-text-top, #our-fuels-text-bottom {height:50%}
#our-fuels-text-top p, #our-fuels-text-bottom p{ line-height:84px;}

#ContactMessage { word-wrap:break-word; }

/* valero-content over rides*/
.layout .row {
	margin-bottom: 0 !important;
}

.body-contents,
.body-contents p {
	margin-bottom: 0 !important;
}

.body-contents p { line-height:2rem !important; margin-bottom:0.8rem !important; color:#000 !important; }

.body-contents p:last-child { margin-bottom:30px !important; }

.body-contents li { line-height:1.5rem !important; }

h3.home-page {
    color: #ED1C24;
    font-size: 2.5em;
    text-align: center;
    font-weight: bolder;
}

h4.home-page {
	color: #636466;
    font-size: 1.5em;
    text-align: center;
    margin: 0.5em auto 1em auto;
    line-height: normal;
    font-weight: bolder;
}