/* BLUE THEME 

#073B5F >> EXTRA DARK
#6297BC >> DARK
#79A6C5 >> EXTRA MEDIUM
#8AB7D6 >> MEDIUM
#B7D3E7 >> LIGHT
#D0E3F0 >> EXTRA LIGHT
#F3F9FD >> FAINT

*/

.hidden, #address, #pnlBoxDetails, #printDisclaimer, #printCm, #printInch, #printPallets, #sample, #pnlBoxReference, #printMaximised, #dataBoxReference { 
	display: none;
}
.unhidden { 
	display: block;
}
html, body {
height: 100%; /*div inside page can be set to 100% height*/
}
* html #container {
height: 100%;  /*workaround for browser where 100% doesn't works*/
}
body {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
	background-color: #FFFFFF;
}




#sample {
	overflow: visible;
	left: 100px;
	top: 280px;
	position: absolute;
	visibility: visible;
}




#container {
	min-height: 100%;
	width: 100%;
	margin: 0px auto 0px auto;
	clear: both;
}
#topGap {
	height: 20px;
	width: auto;
	clear: both;
}
#contentBox { /* border box */
	min-height: 300px;
	width: 920px;
	margin: 0px auto 0px auto;
	padding: 0px;
	background-color: #FFFFFF;
}





/* HEADER */


#contentHeader { /* logo */
	clear: both;
	height: 40px;
	width: auto;
	margin: 0px 0px 10px 0px;
	padding: 0px;
	background-color: #FFFFFF;
}
#dataBoxReference {
	width: 280px; 
	height: auto;
	background-color: #FFFFFF; 
	padding: 5px;
	margin: 0px;
	float: right;
	text-align: left;
} 



/* END >> HEADER */



/* LEFT SIDE */


#contentLeft { /* data entry and calc */
	margin: 0px;
	padding: 0px;
	clear: left;
	float: left;
	height: auto;
	width: 300px;
	background-color: #FFFFFF;
}


#boxMeasurements {
	height: 64px; /* 104 so not to overlap 5px line at base*/
	width: 200px;
	margin: 0px;
	clear: left;
	background-image: url(../site_images/bg-measurements.gif);
	background-repeat: repeat-x;
	background-position: top;
	background-color: #EAF3F9;
	padding: 20px 20px 20px 20px;
	border: 1px solid #073B5F;
}
#boxUnit {}
#unitCm {
	height: 50px;
	width: 50px;
	background-image: url(../site_images/butCmOFF.gif);
	background-repeat: no-repeat;
}
#unitCm:hover {
	background-image: url(../site_images/butCmOVER.gif);
}
#unitInch {
	height: 50px;
	width: 50px;
	background-image: url(../site_images/butInchOFF.gif);
	background-repeat: no-repeat;
	margin: 5px 0px 0px 0px;
}
#unitInch:hover {
	background-image: url(../site_images/butInchOVER.gif);
}
#wrapOptions {
	float: left;
	width: 200px;
	margin: 0px 0px 10px 0px;
}
#boxWeight {
	height: 65px; /*  */
	width: 100px;
	background-color: #F3F9FD;
	background-image: url(../site_images/bg-weight.gif);
	background-repeat: no-repeat;
	background-position: bottom left;
	float: left;
}
#boxQuantity {
	height: 65px; /*  */
	width: 95px;
	float: left;
	background-color: #F3F9FD;
	background-image: url(../site_images/bgQuantity.gif);
	background-repeat: no-repeat;
	background-position: bottom left;
}
/*
#boxPallets {
	height: 110px;   
	width: 105px;
	float: left;
	background-image: url(../site_images/butPalletsNo.gif);
	background-repeat: no-repeat;
	background-position: bottom center;
}
#boxPallets:hover {
	background-image: url(../site_images/butPalletsOVER.gif);
}
*/
#boxReference, #boxWastage, #palletHeight {
	height: auto; /*  */
	width: 180px;
	float: left;
}
#boxOrientation {
	width: 92px;
	margin: 0px;
	padding: 0px;
	border: 0px;
	float: right;
}
#orientationBestFit {
	height: 100px;
	width: 92px;
	background-image: url(../site_images/butBestFitOFF.gif);
	background-repeat: no-repeat;
}
#orientationBestFit:hover {
	background-image: url(../site_images/butBestFitOVER.gif);
}
#orientationStandard {
	height: 100px;
	width: 92px;
	background-image: url(../site_images/butStandardOFF.gif);
	background-repeat: no-repeat;

}
#orientationStandard:hover {
	background-image: url(../site_images/butStandardOVER.gif);
}






/* END >> LEFT SIDE */





/* RIGHT SIDE */


#dataBoxDetails {
	margin: 0px 0px 0px 0px;
	padding: 10px 5px 0px 5px;
	clear: right;
	float: right;
	width: 590px;
	height: 120px;
	background-color: #FFFFFF;
	border: 1px solid #B7D3E7;
	position: relative;
}


/* BOX DETAILS DISPLAYED FOR PRINTING */


#printWeight {
	float: left;
	width: 100px;	
}
#labelWeight {
	overflow: visible;
	position: relative;
	top: -40px;
}
#labelQuantity {
	overflow: visible;
	position: relative;
	left: -70px;
}
#printPallets, #printPalletsNo {	
	position: relative;
	top: 29px;
}
#printPalletHeight {
	margin: 13px 0px 0px 0px;
	width: 105px;	
}
#printOrientation {

}
#printWastage {
	margin: 9px 0px 0px 8px;
	text-align: center;
}
#printDimensions {
	position: relative;
	height: 100px;
	width: 191px;	
}
#printLength {	
	overflow: visible;
	position: relative;
	left: 130px;
	top: -48px;
	clear: left;
}
#printWidth {	
	overflow: visible;
	position: relative;
	left: -55px;
	top: -55px;
}
#printHeight {	
	overflow: visible;
	position: relative;
	left: -40px;
	top: -90px;
}


/* END >> DETAILS ENTERED FOR PRINTING */


#contentDefault, #errorContainerSize, #errorPalletSize, #pnlBoxReference, #contentLoaded, #contentUnloaded, #pnlPalletSize, #pnlContainerSize { /* results in visual form */
	margin: 0px 0px 0px 0px;
	padding: 5px 5px 10px 5px;
	clear: right;
	float: right;
	width: 540px;
	background-color: #F3F9FD;
	border: 1px solid #B7D3E7;
}


/*  ERRORS  */

#errorContainerSize, #errorPalletSize {
	background-color: #FFFFFF;
	border: 1px solid #DD0000;
}
#errorPalletSize {
	margin: 0px 0px 10px 0px;
}
#lblError, #lblPalletError, #ValidationSummary1, #rfvLength, #rgvLength, #rfvWidth, #rgvWidth, #rfvHeight, #rgvHeight, #rgvWeight, #revQty {
	clear: both;
	margin: 0px 0px 0px 31px;
}
#ValidationSummary1 {
	margin: 0px 0px 10px 31px;
}
#errorMessages { /* display errors, default = hidden */
	margin: 0px auto 0px auto;
	clear: both;
	height: auto;
	width: 490px;
	line-height: 30px;
}

/*  END >> ERRORS  */



#contentLoaded {
	margin: 0px 0px 10px 0px;
}
#dataBoxesPerPallet, #dataBoxesPerContainer, #dataWeightPerBox, #dataPalletsUnload, #printDisclaimer, #dataPalletSizes, #dataContainerSizes  { /* data */
	margin: 0px auto 0px auto;
	clear: both;
	height: auto;
	width: 490px;
}
#printDisclaimer {
	margin: 0px auto 20px auto;
}




/* END >> RIGHT SIDE */







/* FOOTER */


#baseBar {
	height: 60px; /* so not to overlap 5px line at base*/
	width: auto;
	clear: both;
}
#contentBase {
	height: 55px; /* so not to overlap 5px line at base*/
	width: 920px;
	margin: -55px auto 0px auto;
	clear: both;
	text-align: right;
}
#disclaimer {
	margin: 0px 0px 0px 0px;
	float: left;
	height: auto;
}


/* END >> FOOTER */
















/* ALIGN */

.left {
	text-align: left;
}	
.center, #center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.right {
	text-align: right;
}
.top {
	vertical-align: top;
}	
.middle, #middle {
	vertical-align: middle;
}
.middleText {
	vertical-align: middle;
	padding-top: 50%;
	padding-bottom: 50%;	
}
.bottom {
	vertical-align: bottom;
}
.floatR {
	float: right;
}
.floatL {
	float: left;
}
.clearR {
	clear: right;
}
.clearL {
	clear: left;
}
.clear {
	clear: both;
}

.margin0 {
	margin: 0px;
}

.spacer {    /* Must go inside a unique fake DIV tag*/
	width: 1px;
	height: 1px;
	min-height: 1px;
	clear: both;
}


/* END >> ALIGN */


/* BORDERS */


.borderColorWhite {
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
}

.borderNo {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
.border1 {
	border: 1px solid #6297BC;
}
.border1011 {
	border: 1px solid #6297BC;
	border-right-width: 0px;
}
.border1010 {
	border: 1px solid #6297BC;
	border-right-width: 0px;
	border-left-width: 0px;
}
.border0011 {
	border: 1px solid #6297BC;
	border-top-width: 0px;
	border-right-width: 0px;
}


.border1000 {
	border: 1px solid #6297BC;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
.border0100 {
	border: 1px solid #6297BC;
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
.border0010 {
	border: 1px solid #6297BC;
	border-top-width: 0px;
	border-right-width: 0px;
	border-left-width: 0px;
}
.border0001 {
	border: 1px solid #6297BC;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
}

/* END >> BORDERS */



/* PADDING */


.pad05015 {
	padding: 0px 5px 0px 15px;
}

.pad0005 {
	padding: 0px 0px 0px 5px;
}
.pad5000 {
	padding: 5px 0px 0px 0px;
}
.pad5050 {
	padding: 5px 0px 5px 0px;
}
.pad0505 {
	padding: 0px 5px 0px 5px;
}
.pad100100 {
	padding: 10px 0px 10px 0px;
}
.pad010010 {
	padding: 0px 10px 0px 10px;
}
.pad00100 {
	padding: 0px 0px 10px 0px;
}
.pad0050 {
	padding: 0px 0px 5px 0px;
}
.pad10000 {
	padding: 10px 0px 0px 0px;
}
.pad20000 {
	padding: 20px 0px 0px 0px;
}
.pad30000 {
	padding: 30px 0px 0px 0px;
}
.pad00050 {
	padding: 0px 0px 0px 50px;
}
.pad5030 {
	padding: 5px 0px 3px 0px;
}

.pad2 {
	padding: 2px;
}
.pad3 {
	padding: 3px;
}
.pad4 {
	padding: 4px;
}
.pad5 {
	padding: 5px;
}
.pad8 {
	padding: 8px;
}
.pad10 {
	padding: 10px;
}
.pad20 {
	padding: 20px;
}

/* END >> PADDING */



/* MARGINS */


.mar0 {
	margin: 0px;
}
.mar0005 {
	margin: 0px 0px 0px 5px;
}
.mar10505 {
	margin: 10px 5px 0px 5px;
}
.mar01000 {
	margin: 0px 10px 0px 0px;
}
.mar010010 {
	margin: 0px 10px 0px 10px;
}
.mar10000 {
	margin: 10px 0px 0px 0px;
}
.mar10050 {
	margin: 10px 0px 5px 0px;
}
.mar10090 {
	margin: 10px 0px 9px 0px;
}
.mar10005 {
	margin: 10px 0px 0px 5px;
}
.mar100015 {
	margin: 10px 0px 0px 15px;
}
.mar10050 {
	margin: 10px 0px 5px 0px;
}
.mar100100 {
	margin: 10px 0px 10px 0px;
}
.mar00010 {
	margin: 0px 0px 0px 10px;
}
.mar00100 {
	margin: 0px 0px 10px 0px;
}
.mar01000 {
	margin: 0px 0px 10px 0px;
}
.mar20000 {
	margin: 20px 0px 0px 0px;
}
.mar00020 {
	margin: 0px 0px 0px 20px;
}
.mar200200 {
	margin: 20px 0px 20px 0px;
}
.mar002050 {
	margin: 0px 0px 20px 50px;
}
.mar200200 {
	margin: 25px 0px 25px 0px;
}
.mar30000 {
	margin: 30px 0px 0px 0px;
}
.mar03000 {
	margin: 0px 30px 0px 0px;
}
.mar00050 {
	margin: 0px 0px 0px 50px;
}
.mar00070 {
	margin: 0px 0px 0px 70px;
}
.mar06000 {
	margin: 0px 60px 0px 0px;
}


/* END >> MARGINS */