@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

img {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

a:link img:hover {
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}

.titleredbig {
	font-family: Arial;
	font-size: 16px;
	color: #A00014;
}

.titlered {
	font-family: Arial;
	font-size: 14px;
	color: #A00014;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0px;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.bodytextpage{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	line-height: 18px;
	}


#footer a{
	color:#FFF;
}

.dlvaicons {
	padding: 10px;
	}


/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	float: left;
}
#bodywrapper {
	clear: none;
	float: left;
	width: 100%;
	display: block;
}

#logo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-image: url(../images/header_background.jpg);
	background-position: center;
}

#logopic {
	float: left;
	width: 100%;
	display: block;
	padding-top: 0px;
	padding-bottom: 0px;
	background-position: center;
}

#nav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	padding: 0;
	position:relative;
z-index:1000;
}
#mainimage {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #A00014;
}
#marque1 {
	clear: none;
	float: left;
	width: 100%;
	display: block;
}

#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#bodyarea {
	clear: both;
	float: left;
	margin-left: 0;
	width: 96%;
	display: block;
	padding: 2%;
}
#navbox {
	width: 48%;
	float: left;
	margin-bottom: 10px;
	margin-right: 2%;
}
#navbox1 {
	width: 48%;
	float: left;
	margin-bottom: 10px;

}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.navint {
	list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 5px;
}
ul.navint li {
	border-radius:10px;/* this creates the button separation */
	margin-bottom: 10px;
}
ul.navint a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 10px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	color: #000;
	border-radius:10px;
	border: 1px solid #CCC;
	font-family: Arial;
	font-size: 12px;
	background-color: #f4f4f4;
}

ul.navint a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #CCCCCC;
	opacity: 0.9;
}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav2 {
	list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 5px;
}
ul.nav2 li {
	border-radius:10px;/* this creates the button separation */
	margin-bottom: 10px;
}
ul.nav2 a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 10px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	color: #000;
	border-radius:10px;
	border: 1px solid #CCC;
	font-family: Arial;
	font-size: 12px;
	background-color: #f4f4f4;
}

ul.nav2 a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #CCCCCC;
	opacity: 0.9;
}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav3 {
	list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 5px;
}
ul.nav3 li {
	border-radius:10px;/* this creates the button separation */
	margin-bottom: 10px;
}
ul.nav3 a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 10px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	color: #000;
	border-radius:10px;
	border: 1px solid #CCC;
	font-family: Arial;
	font-size: 12px;
	background-color: #f4f4f4;
}

ul.nav3 a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #CCCCCC;
	opacity: 0.9;
}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav4 {
	list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 5px;
}
ul.nav4 li {
	border-radius:10px;/* this creates the button separation */
	margin-bottom: 10px;
}
ul.nav4 a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 10px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	color: #000;
	border-radius:10px;
	border: 1px solid #CCC;
	font-family: Arial;
	font-size: 12px;
	background-color: #f4f4f4;
}

ul.nav4 a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #CCCCCC;
	opacity: 0.9;
}


#testimg {                                                                                        
	clear: none;
	float: left;
	margin-left: 4.1666%;
	width: 100%;
	display: block;
}

#infobox {
	float: left;
	width: 96%;
	padding: 1.5%;
	margin-right: 25px;
	text-decoration: none;
	color: #000;
	border-radius: 10px;
	border: 1px solid #CCC;
	font-family: Arial;
	font-size: 12px;
	margin-top: 10px;
	margin-bottom: 10px;	
}

#infobox1 {
	width: 96%;
	padding: 1.5%;
	text-decoration: none;
	color: #000;
	border-radius: 10px;
	border: 1px solid #CCC;
	font-family: Arial;
	font-size: 12px;
	float: left;
	margin-top: 10px;
	
}

#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 97%;
	display: block;
	background-color: #A00014;
	color: #FFF;
	font-size: 11px;
	line-height: 18px;
	padding: 1.5%;
}

#leftbody {
	clear: both;
	float: left;
	margin-left: 0;
	width: 98%;
	display: block;
	padding: 1%;
}

#rightbody {
	clear: none;
	float: left;
	width: 100%;
	display: block;
	padding-bottom: 10px;
}

.imgframe
    { background:#ffffff;
	border-radius:10px;
    padding:4px;
    border:1px solid #999999; }
	
.img-frame-cap {
	width: 91%;
	background: #ffffff;
	border: 1px solid #999999;
	padding-top: 10px;
	padding-right: 2.5%;
	padding-bottom: 2px;
	padding-left: 2.5%;
	margin-right: 2%;
	margin-left: 2%;
}

#pictureframe {
	clear: none;
	float: left;
	margin-left: 4.1666%;
	width: 100%;
	display: block;
}

#greenbar {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#navbar {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#navmiddle {
	clear: none;
	float: left;
	margin-left: 0%;
	width: 100%;
	display: block;
}

#logogreen {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#mobileimage {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

.socialicons {
	width: 40px;
	margin-right: 10px;
}

#tabs {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-bottom: 20px;
}

#cementbag {
	clear: none;
	float: left;
	margin-left: 4.1666%;
	width: 100%;
	display: block;
}

#staticpage {
	clear: both;
	float: left;
	margin-left: 2%;
	width: 96%;
	display: block;
	margin-bottom: 10px;
	margin-top: 10px;
	margin-right: 2%;
}


#productpage {
	clear: both;
	float: left;
	margin-left: 2%;
	width: 96%;
	display: block;
	margin-bottom: 10px;
	margin-top: 10px;
	margin-right: 2%;
}

#bagpic {
	clear: both;
	float: left;
	margin-left: 15%;
	width: 60%;
	display: block;
	margin-right: 0%;
}

#baginfo {
	clear: none;
	float: left;
	margin-left: 4.1666%;
	width: 100%;
	display: block;
}

.titleredbig {
	font-family: Arial;
	font-size: 18px;
	color: #A00014;
	font-weight: bold;
}

.titleorangebig1 {
	font-family: Arial;
	font-size: 24px;
	font-weight: bold;
	-webkit-text-stroke: 1px #A00014;
	text-shadow:
       1px 1px 0 #A00014,
     -1px -1px 0 #A00014,  
      1px -1px 0 #A00014,
      -1px 1px 0 #A00014,
       1px 1px 0 #A00014;
   color: white;

}

.titleorangebig {
	font-family: Arial;
	font-size: 24px;
	font-weight: bold;
    color: #A00014;

}

#testresults {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

.flex-caption {
	position: absolute;
	bottom: 0;
	background: rgba(255, 255, 255,0.9);
	z-index: -1;
	padding: 20px;
	border: 0px solid;
	border-radius: 5px;
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #000;
 }
 
 .flex-caption1 {
	position: absolute;
	bottom: 0;
	background: rgba(255, 255, 255,0.6);
	z-index: 1;
	padding: 20px;
	border: 0px solid;
	border-radius: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: normal;
	color: #A00014;
	font-weight: bold;
	margin: 20px;
	float: right;
 }

#row1 {
	clear: none;
	float: left;
	width: 100%;
	display: block;
}

#row2 {
	clear: none;
	float: left;
	width: 100%;
	display: block;
}

#row3 {
	clear: none;
	float: left;
	width: 100%;
	display: block;
}

#row4 {
	clear: none;
	float: left;
	width: 100%;
	display: block;
}

#row5 {
	clear: none;
	float: left;
	width: 100%;
	display: block;
}

#leftlogo {
	clear: none;
	float: left;
	margin-left: 0;
	width: 80%;
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	padding-left: 10px;
}

#rightlogo {
	clear: none;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
}

#toplogo1 {
	clear: none;
	float: left;;
	width: 100%;
	display: block;
}

#bottomlogo1 {
	clear: none;
	float: left;
	width: 100%;
	display: block;
	margin-right: 10px;
}

#bodymiddle {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-bottom: 20px;
}

#footerleft {
	clear: none;
	float: left;
	margin-left: 4.1666%;
	width: 100%;
	display: block;
}

#footerright {
	clear: none;
	float: left;
	width: 98%;
	display: block;
}

#leftfacebook {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}	

#rightfacebook {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}

#fbcontainer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-bottom: 20px;
}



/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 720px) {
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	float: left;
}

#bodywrapper {
	clear: both;
	float: left;
	margin-left: ;
	width: 100%;
	display: block;
	margin-right: ;
	
	
}

#logo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#logopic {
	float: left;
	margin-left: ;
	width: 100%;
	display: block;
	margin-right: ;
}

#nav {
	margin-left: auto;
	width: 100%;
	display: block;
	margin-right: ;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
	z-index: 1000;
}
#mainimage {
	margin-left: ;
	width: 100%;
	display: block;
	background-color: #A00014;
	margin-right: ;
	margin-top: 0px;
	
}
#marque {
	width: 100%;
	float: left;

}
#bodyarea {
	clear: both;
	float: left;
	margin-left: 0;
	width: 98%;
	display: block;
	padding: 1%;

}
#navbox {
	width: 24.25%;
	float: left;
	margin-right: 1%;
	margin-bottom: 10px;
}

#navbox1 {
	width: 24.25%;
	float: left;
	margin-bottom: 10px;

}

#leftbody {
	float: left;
	width: 72%;
}

#rightbody {
	clear: none;
	float: right;
	width: 25%;
	display: block;
}

#testimg {                                                                                        
	clear: none;
	float: left;
	margin-left: 2.0408%;
	width: 100%;
	display: block;
}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.navint {
	list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 5px;
		
}
ul.navint li {
	border-radius:10px;/* this creates the button separation */
	margin-bottom: 10px;
}
ul.navint a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 10px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	color: #000;
	border-radius: 10px;
	border: 1px solid #CCC;
	font-family: Arial;
	font-size: 12px;
	height: 220px;
	background-image: url(../images/bag.jpg);
	background-size: 94%;
	background-repeat: no-repeat;
	background-position: 8px 45px;
	background-color: #f4f4f4;
}

ul.navint a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #eeeeee;
	opacity: 0.9;
	background-image: url(../images/bagon.jpg);
	background-size: 94%;
	background-repeat: no-repeat;
	background-position: 8px 45px;
}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav2 {
	list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 5px;
		
}
ul.nav2 li {
	border-radius:10px;/* this creates the button separation */
	margin-bottom: 10px;
}
ul.nav2 a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 10px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	color: #000;
	border-radius: 10px;
	border: 1px solid #CCC;
	font-family: Arial;
	font-size: 12px;
	height: 220px;
	background-image: url(../images/bulk.jpg);
	background-size: 94%;
	background-repeat: no-repeat;
	background-position: 8px 45px;
	background-color: #f4f4f4;
}

ul.nav2 a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #eeeeee;
	opacity: 0.9;
	background-image: url(../images/bulkon.jpg);
	background-size: 94%;
	background-repeat: no-repeat;
	background-position: 8px 45px;
}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav3 {
	list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 5px;
		
}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav4 {
	list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 5px;
		
}
ul.nav3 li {
	border-radius:10px;/* this creates the button separation */
	margin-bottom: 10px;
}
ul.nav3 a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 10px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	color: #000;
	border-radius: 10px;
	border: 1px solid #CCC;
	font-family: Arial;
	font-size: 12px;
	height: 220px;
	background-image: url(../images/trans.jpg);
	background-size: 94%;
	background-repeat: no-repeat;
	background-position: 8px 45px;
	background-color: #f4f4f4;
}

ul.nav3 a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #eeeeee;
	opacity: 0.9;
	background-image: url(../images/transon.jpg);
	background-size: 94%;
	background-repeat: no-repeat;
	background-position: 8px 45px;
}
ul.nav4 li {
	border-radius:10px;/* this creates the button separation */
	margin-bottom: 10px;
}
ul.nav4 a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 10px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	color: #000;
	border-radius: 10px;
	border: 1px solid #CCC;
	font-family: Arial;
	font-size: 12px;
	height: 220px;
	background-image: url(../images/gen.jpg);
	background-size: 94%;
	background-repeat: no-repeat;
	background-position: 8px 45px;
	background-color: #f4f4f4;
}

ul.nav4 a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #eeeeee;
	opacity: 0.9;
	background-image: url(../images/genon.jpg);
	background-size: 94%;
	background-repeat: no-repeat;
	background-position: 8px 45px;
}

#infobox a:link {
text-decoration:underline;
	}
	
#infobox1 a:link {
text-decoration:underline;
	}	

#infobox {
	float: left;
	width: 46.4%;
	padding: 1.15%;
	margin-right: 2%;
	text-decoration: none;
	color: #000;
	border-radius: 10px;
	border: 1px solid #CCC;
	font-family: Arial;
	font-size: 12px;
	margin-top: 10px;
	margin-bottom: 20px;
}

#infobox1 {
	width: 46.4%;
	padding: 1.15%;
	text-decoration: none;
	color: #000;
	border-radius: 10px;
	border: 1px solid #CCC;
	font-family: Arial;
	font-size: 12px;
	float: left;
	margin-top: 10px;
	margin-bottom: 20px;
}

#footer {
	clear: both;
	float: left;
	width: 65%;
	display: block;
	background-color: #A00014;
	margin-right: 17.5%;
	margin-left: 17.5%;
	color: #FFF;
	font-size: 11px;
	line-height: 18px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 40px;
	padding-left: 10px;
}

#footerfull {
	clear: both;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #A00014;
	float: left;
	color: #FFF;
	margin-top: 10px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 40px;
	padding-left: 10px;
}

#greenbar {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #A00014;
}

#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#navbar {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#navmiddle {
	clear: both;
	float: left;
	width: 100%;
	display: block;
	background-color: #A00014;
	
}


.socialicons {
	width: 40px;
	margin-right: 10px;
}


.titleredbig {
	font-family: Arial;
	font-size: 16px;
	color: #A00014;
}

.titlered {
	font-family: Arial;
	font-size: 14px;
	color: #A00014;
}
.imgframe
    { background:#ffffff;
	border-radius:10px;
    padding:4px;
    border:1px solid #999999; }
	
.img-frame-cap {
	width: 95%;
	background: #ffffff;
	border: 1px solid #999999;
	padding-top: 10px;
	padding-right: 2.5%;
	padding-bottom: 2px;
	padding-left: 2.5%;
}
	
.caption {
	text-align: center;
	padding-top: 4px;
	padding-bottom: 2px;
}	

#logogreen {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #A00014;
	height: 30px;
}	
#mobileimage1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}	

#tabs {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-bottom: 20px;
}	

#cementbag {
	clear: none;
	float: left;
	margin-left: 2.0408%;
	width: 100%;
	display: block;
}	

#staticpage {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-bottom: 10px;
	margin-top: 10px;
}

.flex-caption {
	position: absolute;
	bottom: 0;
	background: rgba(255, 255, 255,0.9);
	z-index: 1;
	padding: 20px;
	border: 0px solid;
	border-radius: 5px;
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #000;
 }
 
 .flex-caption1 {
	position: absolute;
	bottom: 0;
	background: rgba(255, 255, 255,0.9);
	z-index: -1;
	padding: 20px;
	border: 0px solid;
	border-radius: 5px;
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #000;
 }

#productpage {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-bottom: 10px;
	margin-top: 10px;
}	

#bagpic {
	clear: both;
	float: left;
	margin-left: 0;
	width: 40%;
	display: block;
	padding: 10px;
}	

#baginfo {
	clear: none;
	float: left;
	margin-left: 2.0408%;
	width: 38%;
	display: block;
	padding: 10px;
	margin-top: 10px;
	border: 1px solid #999;
}	

#testresults {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	padding-top: 10px;
	margin-bottom: 20px;
	margin-top: 10px;
}	

#row1 {
	clear: none;
	float: left;
	width: 19%;
	display: block;
	margin-right: 1%;
}	

#row2 {
	clear: none;
	float: left;
	width: 19%;
	display: block;
	margin-right: 1%;
}	

#row3 {
	clear: none;
	float: left;
	width: 20%;
	display: block;
	margin-right: 1%;
}	

#row4 {
	clear: none;
	float: left;
	width: 20%;
	display: block;
	margin-right: 1%;
}	

#row5 {
	clear: none;
	float: left;
	width: 18%;
	display: block;

}	

#leftlogo {
	clear: none;
	float: left;
	margin-left: 0;
	width: 48%;
	display: block;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
}	

#rightlogo {
	clear: none;
	float: right;
	width: 40%;
	display: block;
	padding: 10px;
	
}	

#toplogo1 {
	clear: none;

	float: left;


	width: 100%;

	display: block;

}	

#bottomlogo1 {
	clear: none;
	float: left;
	width: 100%;
	display: block;
	margin-top: 10px;
	margin-right: 10px;
}	

#bodymiddle {
	clear: both;
	float: left;
	margin-left: auto;
	width: 100%;
	display: block;
	margin-right: auto;
	margin-bottom: 20px;

}	

#footerleft {
	clear: none;
	float: left;
	margin-left: 0%;
	width: 48%;
	display: block;


}	

#footerright {
	clear: none;
	float: right;
	margin-left: 0%;
	width: 48%;
	display: block;


}

#leftfacebook {
	clear: none;
	float: left;
	width: 68%;
	display: block;
}	

#rightfacebook {
	clear: none;
	float: right;
	width: 28%;
	display: block;
}	

#fbcontainer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}	

}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1280px) {
.gridContainer {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	
}
#bodywrapper {
	clear: both;
	float: left;
	margin-left: ;
	width: 100%;
	display: block;
	margin-right: ;
	
	
}

#logo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#logopic {
	float: left;
	margin-left: 17.5%;
	width: 65%;
	display: block;
	margin-right: 17.5%;
}

#nav {
	margin-left: auto;
	width: 100%;
	display: block;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
	z-index: 1000;
}
#mainimage {
	margin-left: auto;
	width: 100%;
	display: block;
	background-color: #A00014;
	margin-right: auto;
	margin-top: 0px;
	
}
#marque {
	width: 100%;
	float: left;

}
#bodyarea {
	clear: both;
	float: left;
	margin-left: 0;
	width: 98%;
	display: block;
	padding: 1%;

}
#navbox {
	width: 24.25%;
	float: left;
	margin-right: 1%;
	margin-bottom: 10px;

}

#navbox1 {
	width: 24.25%;
	float: left;
	margin-bottom: 10px;

}

#leftbody {
	float: left;
	width: 72%;
}

#rightbody {
	clear: none;
	float: right;
	width: 25%;
	display: block;
}

#testimg {                                                                                        
	clear: none;
	float: left;
	margin-left: 2.0408%;
	width: 100%;
	display: block;
}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.navint {
	list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 5px;
		
}
ul.navint li {
	border-radius:10px;/* this creates the button separation */
	margin-bottom: 10px;
}
ul.navint a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 10px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	color: #000;
	border-radius: 10px;
	border: 1px solid #CCC;
	font-family: Arial;
	font-size: 12px;
	height: 220px;
	background-image: url(../images/bag.jpg);
	background-size: 94%;
	background-repeat: no-repeat;
	background-position: 8px 45px;
	background-color: #f4f4f4;
}

ul.navint a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #eeeeee;
	opacity: 0.9;
	background-image: url(../images/bagon.jpg);
	background-size: 94%;
	background-repeat: no-repeat;
	background-position: 8px 45px;
}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav2 {
	list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 5px;
		
}
ul.nav2 li {
	border-radius:10px;/* this creates the button separation */
	margin-bottom: 10px;
}
ul.nav2 a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 10px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	color: #000;
	border-radius: 10px;
	border: 1px solid #CCC;
	font-family: Arial;
	font-size: 12px;
	height: 220px;
	background-image: url(../images/bulk.jpg);
	background-size: 94%;
	background-repeat: no-repeat;
	background-position: 8px 45px;
	background-color: #f4f4f4;
}

ul.nav2 a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #eeeeee;
	opacity: 0.9;
	background-image: url(../images/bulkon.jpg);
	background-size: 94%;
	background-repeat: no-repeat;
	background-position: 8px 45px;
}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav3 {
	list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 5px;
		
}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav4 {
	list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 5px;
		
}
ul.nav3 li {
	border-radius:10px;/* this creates the button separation */
	margin-bottom: 10px;
}
ul.nav3 a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 10px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	color: #000;
	border-radius: 10px;
	border: 1px solid #CCC;
	font-family: Arial;
	font-size: 12px;
	height: 220px;
	background-image: url(../images/trans.jpg);
	background-size: 94%;
	background-repeat: no-repeat;
	background-position: 8px 45px;
	background-color: #f4f4f4;
}

ul.nav3 a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #eeeeee;
	opacity: 0.9;
	background-image: url(../images/transon.jpg);
	background-size: 94%;
	background-repeat: no-repeat;
	background-position: 8px 45px;
}
ul.nav4 li {
	border-radius:10px;/* this creates the button separation */
	margin-bottom: 10px;
}
ul.nav4 a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 10px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	color: #000;
	border-radius: 10px;
	border: 1px solid #CCC;
	font-family: Arial;
	font-size: 12px;
	height: 220px;
	background-image: url(../images/gen.jpg);
	background-size: 94%;
	background-repeat: no-repeat;
	background-position: 8px 45px;
	background-color: #f4f4f4;
}

ul.nav4 a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #eeeeee;
	opacity: 0.9;
	background-image: url(../images/genon.jpg);
	background-size: 94%;
	background-repeat: no-repeat;
	background-position: 8px 45px;
}

#infobox a:link {
text-decoration:underline;
	}
	
#infobox1 a:link {
text-decoration:underline;
	}	

#infobox {
	float: left;
	width: 46.4%;
	padding: 1.15%;
	margin-right: 2%;
	text-decoration: none;
	color: #000;
	border-radius: 10px;
	border: 1px solid #CCC;
	font-family: Arial;
	font-size: 12px;
	margin-top: 10px;
	margin-bottom: 20px;
}

#infobox1 {
	width: 46.4%;
	padding: 1.15%;
	text-decoration: none;
	color: #000;
	border-radius: 10px;
	border: 1px solid #CCC;
	font-family: Arial;
	font-size: 12px;
	float: left;
	margin-top: 10px;
	margin-bottom: 20px;
}

#footer {
	clear: both;
	float: left;
	width: 65%;
	display: block;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 40px;
	padding-left: 10px;
	background-color: #A00014;
	margin-right: 17.5%;
	margin-left: 17.5%;
	color: #FFF;
	font-size: 11px;
	line-height: 18px;
	
}

#footerfull {
	clear: both;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #A00014;
	padding: 10px;
	float: left;
	color: #FFF;
}

#greenbar {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #A00014;
}

#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#navbar {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#navmiddle {
	clear: both;
	float: left;
	width: 65%;
	display: block;
	background-color: #A00014;
	margin-right: 17.5%;
	margin-left: 17.5%;
}


.socialicons {
	width: 40px;
	margin-right: 10px;
}


.titleredbig {
	font-family: Arial;
	font-size: 16px;
	color: #A00014;
}

.titlered {
	font-family: Arial;
	font-size: 14px;
	color: #A00014;
}
.imgframe
    { background:#ffffff;
	border-radius:10px;
    padding:4px;
    border:1px solid #999999; }
	
.img-frame-cap {
	width: 95%;
	background: #ffffff;
	border: 1px solid #999999;
	padding-top: 10px;
	padding-right: 2.5%;
	padding-bottom: 2px;
	padding-left: 2.5%;
}
	
.caption {
	text-align: center;
	padding-top: 4px;
	padding-bottom: 2px;
}	

#logogreen {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #A00014;
	height: 30px;
}	
#mobileimage1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}	

#tabs {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-bottom: 20px;
}	

#cementbag {
	clear: none;
	float: left;
	margin-left: 2.0408%;
	width: 100%;
	display: block;
}	

#staticpage {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-bottom: 10px;
	margin-top: 10px;
}

.flex-caption {
	position: absolute;
	bottom: 0;
	background: rgba(255, 255, 255,0.9);
	z-index: 1;
	padding: 20px;
	border: 0px solid;
	border-radius: 5px;
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #000;
 }
 
 .flex-caption1 {
	position: absolute;
	bottom: 0;
	background: rgba(255, 255, 255,0.9);
	z-index: -1;
	padding: 20px;
	border: 0px solid;
	border-radius: 5px;
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #000;
 }

#productpage {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-bottom: 10px;
	margin-top: 10px;
}	

#bagpic {
	clear: both;
	float: left;
	margin-left: 0;
	width: 40%;
	display: block;
	padding: 10px;
}	

#baginfo {
	clear: none;
	float: left;
	margin-left: 2.0408%;
	width: 38%;
	display: block;
	padding: 10px;
	margin-top: 10px;
	border: 1px solid #999;
}	

#testresults {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	padding-top: 10px;
	margin-bottom: 20px;
	margin-top: 10px;
}	

#row1 {
	clear: none;
	float: left;
	width: 19%;
	display: block;
	margin-right: 1%;
}	

#row2 {
	clear: none;
	float: left;
	width: 19%;
	display: block;
	margin-right: 1%;
}	

#row3 {
	clear: none;
	float: left;
	width: 20%;
	display: block;
	margin-right: 1%;
}	

#row4 {
	clear: none;
	float: left;
	width: 20%;
	display: block;
	margin-right: 1%;
}	

#row5 {
	clear: none;
	float: left;
	width: 18%;
	display: block;

}	

#leftlogo {
	clear: none;
	float: left;
	margin-left: 0;
	width: 48%;
	display: block;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
}	

#rightlogo {
	clear: none;
	float: right;
	width: 40%;
	display: block;
	padding: 10px;
}	

#toplogo1 {
	clear: none;

	float: left;


	width: 100%;

	display: block;

}	

#bottomlogo1 {
	clear: none;
	float: left;
	width: 100%;
	display: block;
	margin-top: 10px;
	margin-right: 10px;
}	

#bodymiddle {
	clear: both;
	float: left;
	margin-left: 17.5%;
	width: 65%;
	display: block;
	margin-right: 17.5%;
	margin-bottom: 20px;

}	

#footerleft {
	clear: none;
	float: left;
	margin-left: 0%;
	width: 48%;
	display: block;


}	

#footerright {
	clear: none;
	float: right;
	margin-left: 0%;
	width: 48%;
	display: block;


}	

#leftfacebook {
	clear: none;
	float: left;
	width: 68%;
	display: block;
}	

#rightfacebook {
	clear: none;
	float: right;
	width: 28%;
	display: block;
}	

#fbcontainer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}