/*
=========================================

Project Name: Smart Packaging
Date: July 2013
Description: Smart Packaging 2013 Website.
Version: 1.0
Author: Ali Sellars

/* =[GLO]= Global Settings ===== */
/* =[FOOT]= Footer ===== */
/* =[COM] Common Formatting ===== */
/* =[LIST]= List Settings ===== */
/* =[LINK]= Links ===== */
/* =[FORM]= Forms ===== */
/* =[IMG]= Images ===== */
/* =[PROD]= Product Menu ===== */
/* =[JQUERY]= jQuery Related items ===== */

/*=========================================*/
@charset "UTF-8";
/* =[GLO]= Global Settings ===== */
body { background: #7a0905; font-family: Arial, Helvetica, Geneva; line-height: 1.4em; text-align: center; font-size: 75%; font-color: #000000; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
#wrapper { position:relative; background: #ffffff; width:1024px; z-index:1; left: 0px; top: 0px; margin: 0 auto 0; text-align: left;}
/*
-moz-box-shadow:    0px 0px 20px 6px #000000;
  	-webkit-box-shadow: 0px 0px 20px 6px #000000;
  	box-shadow:         0px 0px 20px 6px #000000;
	*/

#logoContainer {position: relative; width:1024px; height: 157px; padding: 0px 0px 0px 0px; margin: 20px 0px 0px 0px; text-align: left; background: #ffffff;}
#logo1 {position: relative; width:690px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; float: left; text-align: left; background: #ffffff;}
#logo2 {position: relative; width:334px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; float: left; text-align: left; background: #ffffff;}


#productOverlay {position: absolute; z-index: 5; top:210px; left:20px; width:340px; height: 340px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; text-align: left;}

#menuContainer {position: relative; width:1024px; height: 28px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; text-align: left;}

#mainContainer {position: relative; width:980px; padding: 38px 22px 38px 22px; margin: 0px 0px 0px 0px; float: left; text-align: left; background: #ffffff;}

/* =[COL3]= 3 column approach ===== */
#Column3-1 {position: relative; width:312px; padding: 0px 22px 0px 0px; margin: 0px 0px 0px 0px; float: left; text-align: left; background: #ffffff;}
#Column3-2 {position: relative; width:312px; padding: 0px 22px 0px 0px; margin: 0px 0px 0px 0px; float: left; text-align: left; background: #ffffff;}
#Column3-3 {position: relative; width:312px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; float: left; text-align: left; background: #ffffff;}

/* =[COL2]= 2 column approach ===== */
#Column2-1 {position: relative; width:312px; padding: 0px 22px 0px 0px; margin: 0px 0px 0px 0px; float: left; text-align: left; background: #ffffff;}
#Column2-2 {position: relative; width:646px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; float: left; text-align: left; background: #ffffff;}

/* =[NEWSCOL]= News column approach ===== */
#ColumnNews1 {position: relative; width:498px; padding: 0px 22px 0px 0px; margin: 0px 0px 0px 0px; float: left; text-align: left; background: #ffffff;}
#ColumnNews2 {position: relative; width:440px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; float: left; text-align: left; background: #ffffff;}
#ColumnNews2Sml {position: relative; width:240px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; float: left; text-align: left; background: #ffffff;}

/* =[PRODCOL]= Product columns ===== */
.prodColumn1 {position: relative; width:121px; padding: 0px 0px 0px 0px; margin: 0px 10px 10px 0px; float: left; text-align: left; background: #ffffff;}
.prodColumn2 {position: relative; width:121px; padding: 0px 0px 0px 0px; margin: 0px 1px 10px 0px; float: left; text-align: left; background: #ffffff;}
.innerProd {position: relative; width:111px; padding: 5px 5px 0px 5px; margin: 0px 0px 10px 0px; float: left; text-align: left; background: #ffffff;}

/*#productFlash {position: relative; width: 1024px; height: 247px; z-index: 5; top: -247px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; float: right; text-align: right;}*/
#productFlash {position: absolute;  z-index: 5; bottom:0px; right:0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}

/* =[FOOT]= Footer ===== */
#footerContainer {position:relative; width:1024px; height: 137px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; float: left; text-align: left; background: #ffffff; border-top: 4px solid #9d1a16;}

#footer1 {position:relative; width:270px; padding: 0px 64px 0px 0px; margin: 20px 0px 20px 22px; float: left; text-align: left;}
#footer2 {position:relative; width:270px; padding: 0px 64px 0px 0px; margin: 20px 0px 20px 0px; float: left; text-align: left;}
#footer3 {position:relative; width:270px; padding: 0px 64px 0px 0px; margin: 20px 0px 20px 0px; float: left; text-align: left;}

#footerBar1 { position:relative; width: 1024px; height: 30px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; float: left; text-align: left; background: #9d1a16;}
#footerBar2 { position:relative; width: 1024px; height: 45px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; float: left; text-align: left; background: #ffffff;}

/* =[FOOT]= Footer V2 ===== */
#footerContainerNew {position:relative; width:1024px; height: 330px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; float: left; text-align: left; background: url("../images/behindBlkBanner.jpg") #000000 no-repeat left top;}

#footer1New {position:relative; width:270px; height: 235px; padding: 0px 64px 0px 0px; margin: 20px 0px 20px 22px; float: left; text-align: left; color: #ffffff; line-height: 1.6em;}
#footer2New {position:relative; width:259px; height: 235px; padding: 0px 64px 0px 10px; margin: 20px 0px 20px 0px; float: left; text-align: left; color: #ffffff; line-height: 1.6em; border-left: 1px dotted #ffffff;}
#footer3New {position:relative; width:259px; height: 235px; padding: 0px 64px 0px 10px; margin: 20px 0px 20px 0px; float: left; text-align: left; color: #ffffff; line-height: 1.6em; border-left: 1px dotted #ffffff;}

#footerBar { position:relative; width: 1024px; height: 75px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; float: left; text-align: left; background: #ffffff;}

/* =[COM] Common Formatting ===== */

h1 {color: #9d1a16; font-size: 180%; font-weight: bold; line-height: 110%;}
h2 {color: #9d1a16; font-size: 140%; font-weight: bold; padding-bottom: 5px;}
h3, h4 {color: #9d1a16; font-size: 120%; font-weight: bold; padding-bottom: 5px;}

p.hdr {color: #ffffff; font-size: 120%; font-weight: bold; padding-bottom:10px}
.heading {color: #9d1a16; font-size: 120%; font-weight: bold; padding-bottom:10px}

.large {font-size: 120%; line-height: 1.6em;}
.medium {font-size: 85%; line-height: 1.6em;}
.small {font-size: 70%; line-height: 1.6em;}

.bold	{ font-weight: bold;}

.white { color: #ffffff;}
.black { color: #000000;}
.red {color: #9d1a16;}
.blue {color: #322b80;}

.italic {font-style: italic;}

.clear { clear: both; font-size: 1px; }
.quote {font-style: italic; text-align: center;}

/* =[LIST]= List Settings ===== */
/*ul.main { list-style-type:none; padding:0px; margin:0px;}
ul.main li { background: url(../images/arrow-right.gif); background-repeat:no-repeat; background-position:0px 5px; list-style: none; padding: 0px 0px 5px 25px; margin: 0px 0px 0px 0px; color: #000000; font-size: 75%;} */
/*ul.main { list-style-type:none; padding:0px; margin:0px 0px 0px 20px;}
ul.main li {  list-style: disc; padding: 0px 0px 5px 0px; margin: 0px 0px 0px 0px; color: #000000; font-size: 75%;} */
/* =[LIST]= List Settings ===== */
ul.main { list-style-type:none; padding:0px;  margin: 0px 0px 0px 10px;}
ul.main li { background: url(../images/bullet.png); background-repeat:no-repeat; background-position:0px 5px; list-style: none; padding: 0px 0px 5px 15px; margin: 0px 0px 0px 0px; color: #000000; font-size: 100%;} 


ul.main li ul li { background: url(../images/bulletSq.png); background-repeat:no-repeat; background-position:0px 5px; list-style: none; padding: 0px 0px 5px 15px; margin: 0px 0px 0px 0px; color: #000000; font-size: 100%;}

/* =[LINK]= Links ===== */
a { color: #9d1a16; text-decoration: underline;}
a:hover { color: #9d1a16; text-decoration: none;}

a.productsLink {text-decoration:none;}

/* =[FORM]= Forms ===== */
form { margin: 0; padding: 0; display: inline;}
.thanksText {  font-weight: bold; color: #00214E;}
.errText { font-weight: bold; color: #AE0D0D;}
input, textarea, select { font: Verdana, Helvetica, Geneva; color: #000000;}
.submit { font:  Verdana, Helvetica, Geneva; background-color: #54816e; color: #000000;}
fieldset,img { clear: both; border: 0; }
fieldset, .bord { border:1px solid #CCCCCC; padding: 10px; margin-bottom: 10px;}
fieldset, .bordRed { border:1px solid #ca1e53; padding: 10px; margin-bottom: 10px;}
fieldset, .error { border:1px solid #AE0D0D;}
fieldset, .thanks { border:1px solid #cccccc;}
legend { color: #049cd5; font-weight: bold; font-size: 90%;}

/* =[IMG]= Images ===== */
.borderGrey {border: 1px solid #cccccc;}
.borderRed {border: 1px solid #9d1a16;}

/* =[PROD]= Product Menu ===== */
#productMenuArea {position: relative; width:272px; padding: 0px 22px 0px 0px; margin-right:20px; float: left; text-align: left; background: #ffffff;}
#productInfoArea {position: relative; width:660px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; float: left; text-align: left; background: #ffffff;}

.productMenuItem {position:relative;margin-bottom:5px;}
.productMenuMain {position:relative; width:250px; padding:7px; background:#7A0905;color:#FFFFFF;margin-bottom:5px;cursor:pointer;}
.productMenuMain:hover{background:#e41a16;}
.productMenuSub {position:relative; width:250px; padding:7px; background:#DDDDDD;color:#000000;margin-bottom:5px;cursor:pointer;}
.productMenuSub:hover {background:#BBBBBB;}

#productInfoMain {border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #7A0905;padding:20px; padding-top:0px;}
.productCopyBlock {position:relative; width:310px;margin-right:20px;}
.productInfoHeading {margin-bottom:20px;}
.productPicture {position:relative; width:282px;}
.productPicture img{width:282px; height:200px; background:#BBBBBB; border-width:1px; border-style: solid; border-color: #7A0905;}

#productInfoExpand {border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #7A0905;padding:20px;background-color: #FFEEEE;}

#productInfoBoxes {position:relative; width:630px;padding:20px;}
.productInfoBoxUnit {position:relative; width:90px; height:140px; margin-right:12px; margin-bottom:10px; background:#9D1A16;display:inline-block;cursor:pointer;}
.productInfoBoxUnit:hover {background:#E41A16;}
.productInfoBoxImage {position:absolute; top:1px;left:1px; width:88px; height:88px;}
.productInfoBoxImage img {width:88px; height:88px; background:#AAAAAA;}
.productInfoBoxCaption {position:absolute; bottom:1px; left:1px; width:88px; height:45px; font-size: 10px; line-height:12px; color:#ffffff; text-align: center;}

#productDisplayTable {position:relative; margin-top:20px;border-collapse: collapse; border-width: 2px; border-style: solid; border-color: #7A0905;color:#7A0905;}
#productDisplayTable td {padding:5px;}




/* =[JQUERY]= jQuery Related items ===== */
#SP_ScrollingBanner{position:relative; width:1024px; height:319px; overflow:hidden;}
#SP_ImageHolder{position:absolute; top:0px; left:0px;width:1024px; height:319px; }
#SP_ImageHolder img{width:1024px; height:319px;float:left;clear:none; }
#SP_OrderFlash{position:absolute; bottom:0px; left:0px; cursor:pointer;}