/* CSS region for site specific resets */

/*#region - Globals*/

body, body * {
	font-family: Arial, Helvetica, sans-serif !important;		
}

/* Header links (list based) */
#headerlinks {
	float: left;
	padding-left: 15px;
	width: 95%;
}
#headerlinks a.emphasis-strong {
	text-transform: uppercase;
	color: #2185a2;
	font-weight: bold;
}
#headerlinks a {
	color: #464646;
	padding-left: 10px;
	margin-bottom: 10px;
	margin-top: 5px;
	float: left;
}
#headerlinks a:hover {
	color: #2185a2;
	text-decoration: none;
}	
#headerlinks a:first-child {
	padding-left: 0;
}

/* Fixes Firefox overlaying header links. */
span#DeltaPlaceHolderMain > #valero_landing{
    clear: both;
    float: left;
}

/* Authenticated user welcome menu container */
#s4-bodyContainer > .container {
	display: none;
	width: 95%; /* Mobile (shifting fix) */
}

/* Search box */
#topnavbar .search-box:first-child {
    text-align: center;
}	
#topnavbar .search-box:first-child input {
	width: 180px;
}
/* Remove rounded search box corners on iOS   */
.ms-srch-sb > input{
	border-radius: 0;
	-webkit-border-radius:0px;
}
#topnavbar .ms-srch-sb-searchLink {
    display: inline-block;
    margin: 18px 0 0 0;
    background-color: #fff;
    padding: 16px;
}
#topnavbar .ms-srch-sb-searchLink:hover {
	background-color: #eee;
}
#topnavbar .ms-srch-sb-searchLink .ms-srch-sb-searchImg {
    width: 134px;
    left: -35px !important;
	top: -57px !important;
}

/* Home link icon wrapper */
.user-home-icon {
	border-color: transparent;
}

/* Main content area wrapper */
#s4-bodyContainer > #main {
	padding: 0px;
	color: #626262;
	font-size: 14px;
}

#s4-bodyContainer > #main a {
	color: #2185a2;
	line-height: normal;
}

#s4-bodyContainer > #main h1,
#s4-bodyContainer > #main .valero-h1 {
	font-family: 'Roboto', sans-serif !important;
	text-shadow: rgba(0, 0, 0, .8) 0 0 .1px; /* Needed for smoother font in Chrome */
	color: #006685;
	font-size: 27px;
	text-align: left;
}
#valero_landing .valero-h1 {
	line-height: normal;
}
#s4-bodyContainer > #main h2 {
	font-size: 20px;
	font-weight: bold;
	color: #464646;
	text-align: left;
	margin: 0 0 10px;
}
#s4-bodyContainer > #main h3, h4, h5, h6 {
	font-size: 18px;
	font-weight: bold;
	color: #464646;
	text-align: left;
	margin: 0 0 5px;
}

#s4-bodyContainer > #main .body-contents, 
#s4-bodyContainer > #main .body-contents p {
	margin-bottom: 10px;
}
footer {
	visibility: hidden;
}
footer.ready {
	visibility: visible;
}
footer, 
footer * {
	background-color: transparent;
	color: #9d9d9d !important;
}
footer a {
	color: #464646 !important;
}
footer a:hover {
	color: #2185a2 !important;
}
footer .valero-social-image {
	display: inline-block !important;
	padding-right: 10px;
}

/* Fix web part adder menu from getting cut off by header */
#DeltaWebPartAdderUpdatePanelContainer {
	z-index: 2;
}

/* Page edit mode labels */
div.ms-formfieldlabelcontainer span.ms-formfieldlabel, 
.ms-formfieldlabelcontainer .ms-formfieldlabel {
	font-size: 13px !important;
	font-weight: normal !important;
}
.ms-SPZoneLabel,
.ms-WPAddButton {
	font-size: 14px !important;
}

/* Glypicons */
.glyphicon {
	font-family: 'Glyphicons Halflings' !important;
}

@media (min-width: 768px) {

	#header {
	    box-shadow: 0 0 0 0;
	}
	#SearchBox {
	    margin-right: 19px;
	}
	#headerlinks {
	    margin-top: -15px;
	    margin-right: 5px;
	    float: right;
	    width: auto;
	}
	#topnavbar {
		max-width: 1250px;
		margin: auto;
	}
	#DeltaTopNavigation {
		float: right;
	}
	#DeltaTopNavigation li.static > .menu-item.selected {
	    position: relative;
	}
	/*#DeltaTopNavigation li.static > .menu-item.selected:after,*/
	#DeltaTopNavigation li.static > .menu-item:hover:after {
	    top: 100%;
	    left: 50%;
	    border: solid transparent;
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    pointer-events: none;
	    border-color: rgba(255, 255, 255, 0);
	    border-bottom-color: #fff;
	    border-width: 10px;
	    margin-left: -10px;
	    margin-top: -17px;
	}
	#DeltaTopNavigation .ms-core-listMenu-horizontalBox li.static > .menu-item:hover, 
	#DeltaTopNavigation .ms-core-listMenu-horizontalBox li.static > .menu-item:link:hover, 
	#DeltaTopNavigation .ms-core-listMenu-horizontalBox li.static.shown > .menu-item {
	    color: #fff;
	    background-color: transparent;
	}

	#s4-bodyContainer > #main {
		padding: 20px;
	}
	
	footer {
		max-width: 1200px;
		margin: auto;
	}	
	footer ul li {
	    float: left;
	}
	footer ul li:first-child a {
	    padding-left: 0;
	    border: 0;
	}
	footer ul li a {
	    padding-left: 5px;
	    border-left: 1px #464646 solid;
	    padding-right: 5px;
	}
	footer .valero-social {
		text-align: right;
	}
}

#footer_row {
	margin-top:40px;
}

@media (min-width: 1250px) {
	#s4-bodyContainer > #main {
	  width: 1200px !important;
	  margin-left: auto;
	  margin-right: auto;
	}
}
	
/*#endregion*/


/*#region - Components only */

/* Carousel */
.valero_carousel {
	visibility: hidden;
}
.valero_carousel.ready {
	visibility: visible;
}
.valero_carousel .summary {		
	position: relative;
	padding: 10px 6px;
	width: 100%;
	margin-top: -39px;
	text-align: center;
}
.valero_carousel .summary .title {
	background-color: rgba(0,0,0,.6);
	color: #fff !important;
	padding: 0 10px;
	text-align: center !important;
	line-height: 1.7;
}
.valero_carousel .summary .description {
	color: #626262 !important;
	display: block;
}
.valero_carousel-images .hero-image-placeholder {
	visibility: hidden;
}
.valero_carousel .more-link {
	display: inline-block;
	
}		
.valero_carousel .more-link a {
  	background-color: orange;
  	line-height: normal;
  	padding: 4px;
  	float: left;
  	margin: 10px 0;
	text-decoration: none;
	color: #fff !important;
	font-weight: bold;
}
.bx-wrapper .bx-controls-direction a {
	top: 25% !important;
}	

.bx-wrapper .bx-prev {
	background: url(../img/carousel/controls.png) no-repeat -2px -15px !important;
}
.bx-wrapper .bx-next {
	right: 25px !important;
    background: url(../img/carousel/controls.png) no-repeat -55px -15px !important;
}
.bx-wrapper .bx-controls-direction a {
	z-index: 99 !important;
}

.bx-loading{
	display: none; /* Hide it since it causes issues in IE 11 */
}

.bx-wrapper {
	margin-bottom:0 !important;
}

/* Stock quote */
.valero-stock-quote {
	padding: 10px 0;
}
#s4-bodyContainer > #main .valero-stock-quote .positive {
	color: lime !important;
}
#s4-bodyContainer > #main .valero-stock-quote .positive.neutral {
	color: #fff !important;
}
#s4-bodyContainer > #main .valero-stock-quote .negative {
	color: #FF4242 !important;
}
#s4-bodyContainer > #main .stock-msg {
  	font-size: 10px;
  	line-height: normal;
  	width: 65%;
  	color: rgba(255,255,255,.7) !important;
}
#s4-bodyContainer > #main .stock-data.lg * {
  	font-size: 14px;
}

/* Find a store search */
.valero-find-store-wrapper {
    background-color: #006685;
    width: 230px;
    padding: 0 0 10px 10px;
    margin: 0;
}	
.valero-find-store-wrapper .valero-btn-search {
	width: 22px;
	height: 22px;
	overflow: hidden;
	float: left;
	background-color: #fff;
	margin: -5px 0 0 -4px;
	padding-right: 6px;
	border-radius: 0 2px 2px 0;
}
.valero-find-store-wrapper .valero-btn-search img {
	position: relative;
	top: -5px;
	left: -55px;
	width: auto;
}
.valero-find-store-wrapper .ms-webpart-titleText {
	margin: -2px 0 0 0;
}
.valero-find-store-wrapper .ms-webpart-titleText span {
	font-size: 14px;
	font-weight: bold;
	color: #fff;
}
.valero-find-store-wrapper .form-group {
	margin: 0;
}
.valero-find-store-wrapper input {
	background-color: #fff !important;
	color: #9d9d9d !important;
	font-size: 12px !important;
	padding: 0 5px;
	height: 22px;
	margin-top: -5px;
	width: 184px;
}

/* App parts (ex. store locator) */
#valero-zone-app iframe {
    width: 100% !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
}

#s4-workspace { width:100%;-webkit-overflow-scrolling: touch;}
/* End App parts (ex. store locator) */

@media (min-width: 768px) {

	/* Carousel */
	.valero_carousel .summary {
		position: absolute;
		top: 35%;
		width: 240px;
		background-color: rgba(0,0,0,.6);
		margin-top: 0;
		text-align: left;
		padding: 10px;
	}
	.valero_carousel .summary.left {		
		left: 8%;
	}
	.valero_carousel .summary.right {		
		right: 8%;
	}
	.valero_carousel .summary .title {	
		background-color: transparent;
		padding: 0;
		text-align: left !important;
		line-height: 1.4;
	}
	.valero_carousel .summary .description {
		color: #fff !important;
	}		
	.valero_carousel .more-link {
		float: left;
		clear: both;
		width: 100%;
	}	
	
	.bx-wrapper .bx-controls-direction a {
		top: 50% !important;
	}
	
}
	/* Stock quote */
	#s4-bodyContainer > #main .stock-msg {
		width: 40%;
	}
	
}

@media (min-width: 1250px) {
	/* Stock quote */
	.valero-stock-quote {
		padding: 0;
	}
	.valero-stock-quote * {
	  	line-height: 22px;
	  	font-size: 20px;
	}
	.valero-stock-quote .stock-heading {
		font-weight: bold;
	}
}

/*#endregion*/

/*#region - Summary/Detail Page */
#valero_summary,
#valero_detail, * {
	line-height: 150%
}

#valero_summary,
#valero_detail, .hero-image img {
		width:100%;
}

@media (min-width: 991px) {
	#valero_summary,
	#valero_detail,
	.body, h1.field-title {
		padding-left: 15px;
		max-width:1145px;
	}

	#valero_summary,
	#valero_detail, .video .embed-responsive .embed-responsive-16by9 {
		max-width: 1200px; /* 75% of max page width (currently 1200px) */
	}
}

/*#endregion*/

.valero-caption
{
	padding:10px 10px 20px 10px;
}

.ms-siteicon-img
{
	top: 10px;
	position: absolute;
}

#valero-page-title
{
	font-size:27px;
	font-family:san-serif !important;
	color:#006685;
	font-family: 'Roboto', sans-serif !important;
	font-weight:100;
}
.btn, .btn-primary, .btn-block{
	background-color:white !important; border-color:white !important;
	white-space:normal;
	
}
.ms-rtestate-field p, p.ms-rteElement-P{
	padding-top:10px;
}

/*Hides the iOS gray button with circle. */
video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

ul.mediaPlayerAdditionalControls
{
	z-index:0 !important;
}

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}