/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

@BarBlue: #00325d;
@LogoBlue: #00085d;
@NavBlue: #26323a;
@White: #ffffff;
@NormTxt: #343434;
@BordBlue: #70d0ec;
@BarGray: #d9d9d9;

/* Nav Hover */
@Blue: #0098ce;
@Yellow: #ffd738;
@Green: #00b598;
@Pink: #ff5fa1;


html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

body {  
	font-family: 'Open Sans', sans-serif;
}

body.top-border {  
	width: 100%; min-width: 960px; border-top: solid 3px @BarBlue;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   
h1, h2, h3, h4, h5, h6, h7, h8, h9, p { margin: 0px; padding: 0px; }

a { color: #343434; text-decoration: none; }

#main-wrap { width: 960px; margin: 0px auto; min-height: 600px; 
	h1 { color: @BordBlue; font-size: 1.5em; font-family: 'Open Sans Condensed', sans-serif; }
}

header { vertical-align: text-top; margin: 20px 0px 10px;  

	h1.web-ban { width: 82px; height: 82px; display: inline-block; vertical-align: text-top; background: url(../img/broventure_logo.png) no-repeat; }
	
	.corp { width: 500px; display: inline-block; vertical-align: text-top; margin: 15px 0px 0px 5px; 
		h2.comp-name { text-transform: uppercase; font-family: 'Open Sans Condensed', sans-serif; font-weight: 600; color: @LogoBlue; font-size: 1.5em; }
		p { font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; font-size: 0.90em; letter-spacing: 0.068em; }
	}
	
	.social { width: 250px; display: inline-block; margin: 10px 0px 0px 100px; vertical-align: text-top; text-align: right;
		ul { 
			li { width: 32px; height: 32px; display: inline-block; background: url(../img/social_icons.png) no-repeat; overflow: hidden; }
			li.soc-fb { background-position: 0px 0px; }
			li.soc-twit { background-position: -33px 0px; }
			
			a:hover {  
				li.soc-fb { background-position: 0px -33px; }
				li.soc-twit { background-position: -33px -33px; }
			}
		}
	}
	
} /* Header */

nav { width: 100%; background: @NavBlue; margin: 20px 0px;
	a { color: @White; text-decoration: none; }
	ul { padding: 0px; margin: 0px; 
		li { display: inline-block; padding: 12px 35px; border-right: solid 1px @White; margin: 0px 0px 0px -4px; text-transform: uppercase; font-size: 0.85em; }
		a:nth-child(1) li { margin: 0px; }
		a:nth-child(1):hover li { padding-bottom: 9px; border-bottom: solid 3px @Blue; }
		a:nth-child(2):hover li { padding-bottom: 9px; border-bottom: solid 3px @Yellow; }
		a:nth-child(3):hover li { padding-bottom: 9px; border-bottom: solid 3px @Green; }
		a:nth-child(4):hover li { padding-bottom: 9px; border-bottom: solid 3px @Pink; }
		
		li.hactive { border-bottom: solid 3px @Blue; padding-bottom: 9px; }
		li.aactive { border-bottom: solid 3px @Yellow; padding-bottom: 9px; }
		li.pactive { border-bottom: solid 3px @Green; padding-bottom: 9px; }
		li.cactive { border-bottom: solid 3px @Pink; padding-bottom: 9px; }
	}
} /* Head Navigation */

#banner { width: 960px; height: 275px; overflow: hidden; margin: 10px 0px;
	img { width: 100%; height: auto; }
} /* Banner */

#com-intro { text-align: center; 
	h3 { font-size: 1.25em; margin: 10px 0px; }
	p { margin: 10px auto; font-size: 0.85em; width: 50%; }
	p a { font-weight: bold; }
	p a:hover { color: @LogoBlue; }
} /* Company Intro */

.prod-overview { margin: 30px 0px 15px; border-top: solid 5px @BarGray; padding: 10px 0px; 
	h4 { font-family: 'Open Sans Condensed', sans-serif; font-size: 1.35em; }
	
	ul { vertical-align: text-top; margin: 10px 0px; padding: 0px; text-align: center;
		li { display: inline-block; vertical-align: text-top; width: 463px; background: #ccc; margin: 12px 0px; height: 261px; border: solid 1px @BordBlue; overflow: hidden;
			label { position: relative; background: rgba(0, 0, 0, 0.7); color: #ffffff; top: 216px; padding: 10px; width: 443px; display: block; font-style: italic; text-align: left; font-size: 1.15em; }
		}
		li:nth-child(odd) { margin-right: 20px; }
		a { width: 100%; height: 100%; display: block; margin: 0px; padding: 0px; }
		
		li#KimberlyClark { background: url(../img/prod_KimberlyClark.jpg) no-repeat; }
		li#JohnsonDiversey { background: url(../img/prod_JohnsonDiversey.jpg) no-repeat; }
		li#PersonalizedTissue { background: url(../img/prod_PersonalizedTissue.jpg) no-repeat; }
		li#Others { background: url(../img/prod_Others.jpg) no-repeat; }
		
		li .prod-hover { display: none; width: 463px; height: 261px; position: absolute; text-align: center; /* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,1) 96%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.2)), color-stop(96%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,1) 96%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,1) 96%,rgba(0,0,0,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,1) 96%,rgba(0,0,0,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,1) 96%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */


		h6.info-icon { width: 34px; height: 34px; display: block; background: url(../img/info_icon.png) no-repeat; margin: 0px auto; position: relative; top: 110px; }
		p { width: 70%; margin: 120px auto 0px; font-size: 0.85em; color: @White; font-style: italic; }
	} /* Product Hover */
	
	/* Hover for Info */
	li#KimberlyClark:hover a .prod-hover { display: block; }
	li#JohnsonDiversey:hover a .prod-hover { display: block; }
	li#PersonalizedTissue:hover a .prod-hover { display: block; }
	li#Others:hover a .prod-hover { display: block; }
	}
} /* Product Overview */

footer { width: 100%; min-width: 960px; background: @BarBlue; color: @White; min-height: 150px;
	a { color: @White; } 
	
	.foot-cont { width: 960px; margin: 10px auto 0px; vertical-align: text-top; font-size: 0.80em;
		.foot-col:nth-child(1) { margin-right: 30px; }
		.foot-col { display: inline-block; vertical-align: text-top; width: 48%;
			ul.foot-cinfo { padding: 0px; margin: 20px 0px 0px; text-align: left;
				li { display: inline-block; }
				li.foot-logo { width: 35px; height: 35px; background: url(../img/foot_logo.png) no-repeat; }
				li:nth-child(2) { position: relative; left: 5px; top: -18px; }
				li:nth-child(3) { position: relative; left: 43px; top: -20px; font-size: 0.75em; display: block; }
				li:nth-child(4) { clear: both; display: block; font-size: 0.75em; }
			}
			
			ul.foot-nav { text-align: right; padding: 0px; margin: 25px auto 0px; vertical-align: text-top;
				li { display: inline-block; vertical-align: text-top; padding: 0px 15px; border-right: solid 1px @White; margin-left: -4px; }
				li:nth-child(4) { border-right: none; }
				li.copyright { display: block; border-right: none; margin: 25px 0px 0px; font-size: 0.75em; }
			}
		}
		
	} /* Footer Centered Container */

} /* Footer */

/*======= Inner Pages =======*/
#inner-cont { width: 95%; margin: 10px auto 30px; }
#inner-cont.contacts { width: 100%; margin: 10px auto 30px; }

.corp-image { text-align: center; margin: 10px 0px; }
p { font-size: 0.85em; margin: 0px 0px 15px; }

/* Products */
#products-page { width: 100%; padding: 0px; margin: 0px; 
	li { list-style: none; background: @White; box-shadow: 0px 1px 4px rgba(0,0,0,0.2); margin: 5px 0px 10px; height: 175px; overflow: hidden; vertical-align: text-top;
		.prod-ban { display: inline-block; width: 213px; height: 173px; border: solid 1px @BordBlue; overflow: hidden; vertical-align: text-top; 
			img { width: 100%; height: auto; text-align: center; }
		}
		.prod-info { display: inline-block; vertical-align: text-top; width: 665px; margin: 10px 0px 10px 10px; 
			h2 { font-size: 1em; border-left: solid 2px #ffac4e; padding-left: 7px; }
			p { font-size: 0.80em; margin: 10px 0px 0px; }
		}
		label { position: absolute; width: 209px; height: 28px; background: fade(#000000, 75); color: @White; font-style: italic; padding: 2px; margin: 141px 0px 0px; }
	}
}

/* Sub Products */
ul.sub-products { width: 100%; padding: 0px; margin: 25px 0px 0px; vertical-align: text-top;
	li { list-style: none; display: inline-block; vertical-align: text-top; width: 24.45%; margin: 0px 6px 0px -4px; }
	li:nth-child(4n+4) { margin-right: 0px!important; }
	li:nth-child(4n+1) { margin-left: 0px!important; }
	h4 { font-weight: 400; padding: 2px 0px 0px 7px; margin: 0px 0px 5px; border-left: solid 2px #ff7377; height: 50px; font-size: 0.925em; }
	.prod-thmb { width: 213px; height: 173px; border: solid 1px @BordBlue; overflow: hidden; margin: 10px 0px; text-align: center;
		img { width: auto; height: 100%; }
	}
	p { font-size: 0.80em; width: 213px; word-break: break-word; 
		b { color: @BarBlue; display: block; margin-bottom: 15px; 
			em { display: block; margin-bottom: 10px; font-weight: 100; font-size: 95%; }
		}
	}
}

/* Contact Us */
.contact-col { display: inline-block; vertical-align: text-top; }
.info { width: 640px; margin-right: 20px; 
	.map-cont { width: 638px; border: solid 1px @BarGray; height: 238px; }
	
	ul.business-info { padding: 0px; margin: 10px 0px 0px; vertical-align: text-top; font-size: 0.90em;
		li { list-style: none; display: inline-block; vertical-align: text-top; margin-bottom: 15px; }
		li:nth-child(odd) { width: 150px; margin-right: 10px; }
		li:nth-child(even) { width: 400px; }
	}
}
.inquiry { width: 295px; margin-top: -40px; 
	h3 { font-size: 1.25em; font-family: 'Open Sans Condensed', sans-serif; border-top: solid 3px @BarGray; padding: 10px 0px; }
	
	form { background: #efefef; border: solid 1px #d8d8d8; text-align: center; padding: 10px; 
		ul.form-cont { padding: 0px; margin: 0px; list-style: none; 
			li { width: 95%; margin: 5px auto 10px; 
				input[type=text] { width: 98%; padding: 7px 3px; font-family: 'Open Sans', sans-serif; font-size: 0.95em; color: @NormTxt; border: solid 1px @BarGray; }
				textarea { width: 98%!important; resize: none; height: 80px; font-size: 0.95em; color: @NormTxt; border: solid 1px @BarGray; }
				input[type=submit] { padding: 10px 15px; border-radius: 5px; color: @White; background: #bb2d53; border: none; font-family: 'Open Sans', sans-serif; font-size: 0.85em; margin: 10px 0px 0px; }
				input[type=submit]:hover { position: relative; top: -1px; }
			}
		}
	} /* Form */
}









/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}