/*---------------------------------------------------------------------------------------
  
                        Website: Envelope Works
                        Author: Bitmedia
                        Created: November 2010
  
---------------------------------------------------------------------------------------*/

@import "default.css";
html {
	overflow: -moz-scrollbars-vertical;
	height: 100%;
	background: #F3F3F3;
}

body {
	background: #e5e5e3; 
	/*height: 100%;*/
}

/*---------------------------------------------------------------------------------------
                               *** BASE TYPOGRAPHY ***
---------------------------------------------------------------------------------------*/
/*------------------------------------
   Links
------------------------------------*/
a:link,
a:visited {
	color: #000;
	text-decoration: none;
}

a:hover {
	color: #000;
	text-decoration: underline;
}

/*------------------------------------
   Type
------------------------------------*/
body {
	font: 62.5% arial, tahoma, arial, helvetica; 
	color: #000;
}

#container {
	font-size: 1.2em; 
	line-height: 1.2em; 
	text-align: left;
	background: #fff;
}

p {
	color: #666666;
	font-size: 1.0em;
	padding: 0 0 1.0em 0;
}

/*------------------------------------
   Headers
------------------------------------*/

h1 {
	font-size: 1.7em; 
	color: #666666;
}

h2 {
	font-size: 1.6em; 
	color: #666666;
}

h3 {
	font-size: 1.4em; 
	color: #666666;
}

h4 {
	font-size: 1.4em; 
	color: #666666;
}



/*---------------------------------------------------------------------------------------
                               *** BASE TEMPLATE ***
---------------------------------------------------------------------------------------*/
/*------------------------------------
   Container
------------------------------------*/
#container {
	margin: 0 auto;
	height: 100%;
}

.wrapper {
	width: 960px;
	margin: 0 auto;
}

#content_upper {
	background: #e5e5e3;
	border-bottom: solid 1px #dbdada;
	padding: 20px 0 20px 0;
}

/*------------------------------------
   Header 
------------------------------------*/
#header {
}

	#header h1 {
		float: left;
		padding: 16px 0 0 0px;
	}

		#header h1 a {
			background: url(../images/logo_large.png) no-repeat;
			text-indent: -9999px;
			display: block;
			height: 85px;
			width: 190px;
		}
	
	#contact_details {
		float: right;
		text-align: right;
		width: 650px;
		padding: 35px 0 0 0;
		overflow: hidden;
	}
	
		#contactDetails_address {
			float: right;
			width: 425px;
		}
		
			#contactDetails_address p {
				font-size: 1.1em;
				font-weight: normal;
				color: #000;
			}
		
		#contactDetails_telEmail {
			float: right;
			width: 575px;
		}
		
			#contactDetails_telEmail p {
				font-size: 1.1em;
				font-weight: bold;
				color: #999999;
			}
		
			#contactDetails_telEmail a {
				color: #999999;
			}
	
	#header_nav {
		background: url(../images/header_backgroundGradient.png) repeat-x;
		height: 38px;
		margin: 6px 0 0 0;
		padding: 0;
	}
	
	ul#mainNav {
		list-style: none; 
		margin: 0; 
		padding: 0 0 0 5px; 
	}
	
		ul#mainNav li {
			display: inline; 
			float: left;
			padding: 0;
		}
		
			ul#mainNav li a {
				float: left;
				font-size: 1.2em;
				color: #f7f7f7;
				padding: 10px 25px 12px ;
				margin: 1px 0 0 0;
				border-right: solid 1px #383838;
				border-left: solid 1px #fff;
				font-weight: normal;
			}
			
				ul#mainNav li a.first {
					border-left: none;
				}
			
				ul#mainNav li a.last {
					border-right: none;
				}
			
			ul#mainNav li a:hover,
			ul#mainNav li a:focus {
				text-decoration: none !important;
				background: url(../images/mainNav_hover.png) repeat-x #6d6d6d;
			}
			
			ul#mainNav li a:active,
			ul#mainNav li a.selected {
				background: url(../images/mainNav_selectedBackground.png) repeat-x;
		        cursor: default;
			}
			
				ul#mainNav ul {
					background: #aeaeae url(../images/superfish/manNav_optionsBackground.png) repeat-x;
					/*width: 410px !important;
					height: 195px !important;*/
          overflow: hidden;
					margin: 0;
					float: left !important;
					border-top: solid 1px #000;
					border-left: solid 1px #c2c2c2;
					border-right: solid 1px #9c9c9c;
					border-bottom: solid 1px #898989;
					padding: 0px;
				}
				
					ul#mainNav ul li {
						padding: 0px; 
						float: left;
						margin: 0px;
            border-bottom: solid 1px #b9b9b9;
					}
					
          ul#mainNav ul li:hover,
          ul#mainNav ul li:focus {
            background: url(../images/mainNav_selectedBackground.png) repeat-x #6d6d6d;
          }
          
						ul#mainNav ul li img {
							padding: 13px 0 0 22px;
							float: left;
						}
            /*
						ul#mainNav ul li.mainNavUL_prod {
							width: 164px !important;
						}
						
						ul#mainNav ul li.mainNavUL_ware {
							width: 223px !important;
						}
						
						ul#mainNav ul li.mainNavUL_repr {
							width: 164px !important;
						}
						
						ul#mainNav ul li.mainNavUL_samp {
							width: 185px !important;
						}
            */
						ul#mainNav ul li a,
            ul#mainNav ul li a.selected {
							color: #f7f7f7; 
							background: none !important;
							border: none;
							font-size: 1.2em;
							padding: 10px 0 10px 0;
							margin: 0 0 0 5px;
							line-height: 1.2em;
						}
						
							ul#mainNav ul li a.bottom { 
								border-bottom: none;
							}


/*------------------------------------
   Cols
------------------------------------*/
#cols {
	padding: 20px 0 20px 0;
}

	#mainCol {
		float: left;
	}
	
	#sideCol {
		float: right;
	}

/*------------------------------------
   Footer
------------------------------------*/
#footer {
	overflow: hidden;
	background: #f3f3f3;
	border-top: solid 1px #dbdada;
	padding: 20px 0 80px 0;
}
	#copyright {
		float: right;
	}
	
		#copyright p {
			color: #908A8B;
			font-size: 0.9em;
			padding: 0 20px 0 0;
		}
	
	ul#minorNav_left {
		float: left; 
		list-style: none; 
		margin: 0; 
		padding: 0;
	}
	
		ul#minorNav_left li {
			display: inline; 
			float: left; 
			padding: 0 0px 0 0;
		}
		
			ul#minorNav_left li a {
				float: left;
				font-size: 0.9em;
				color: #908A8B;
			}
      
      ul#minorNav_left li a:hover,
      ul#minorNav_left li a:focus {
        color: #666666;
      }


      ul#minorNav_left li a:active,
      ul#minorNav_left li a.selected {
        color: #333333;
      }

      ul#minorNav_left li a.selected {
        text-decoration: none;
        cursor: default;
      }


			
			ul#minorNav_left li span {
				float: left;
				padding: 0 5px 0 5px;
				color: #908A8B;
			}
		
		ul#minorNav_right li {
			display: inline; 
			float: right; 
			padding: 0 0px 0 0;
		}
		
			ul#minorNav_right li a {
				float: right;
				font-size: 0.9em;
				color: #908A8B;
			}
			
			ul#minorNav_right li span {
				float: right;
				padding: 0 5px 0 5px;
				color: #908A8B;
			}
			
/*---------------------------------------------------------------------------------------
                               *** PAGE TEMPLATES ***
---------------------------------------------------------------------------------------*/

/*------------------------------------
   HomePage
------------------------------------*/
/*
#slideShow {
	float: left;
	width: 650px;
	height: 326px;
}
*/
#mediaPlayer {
  float: right;
  width: 270px;
}
#mediaPlayer,
#mediaPlayer * {
  padding: 0px;
  margin: 0px;
}
#mediaPlayer h1,
#mediaPlayer hr,
#mediaPlayer p {
  margin: 10px 0px;
}
#mediaPlayer hr {
  border: none;
  height: 1px;
  background-color: #CCC;
  margin: 20px 0px 10px 0px;
}


.contentUpper_infoBox {
	background: #FFF;
	border: solid 1px #dbdada;
	margin: 20px 0 0 0;
	padding: 15px 20px 0 20px;
}

	.contentUpper_infoBox_title {
		border-bottom: solid 1px #dbdada;
		padding: 0 0 10px 0;
	}
	
		.contentUpper_infoBox_title h2 {
			float: left;
		}
		
		.contentUpper_infoBox_title img {
			float: right;
			padding: 0 0 0 5px;
		}
		
		.contentUpper_infoBox_title a {
			float: right;
			padding: 3px 0px 3px 30px;
			color: #e28119;
		}
	
	.contentUpper_infoBox_content {
		padding: 10px 0 10px 0;
	}
	
		.contentUpper_infoBox_content img {
			float: left;
			padding: 0 20px 0 10px;
		}
		
		.contentUpper_infoBox_content h3 {
			padding: 0px 0 10px 0;
			font-weight: bold;
		}
		
		.contentUpper_infoBox_content a {
			/*padding: 0px 0 0px 10px;*/
			font-weight: bold;
			font-size: 0.9em;
		}
	
			.contentUpper_infoBox_content h3 span {
				font-size: 0.7em;
			}

#contentUpper_title {
	padding: 10px 0 15px;
}

#main_content {
	width: 580px;
	padding: 10px 0 0 0;
}

	#main_content h1 {
		border-bottom: solid 1px #d9d9d9;
		padding: 0 0 15px 0;
		margin: 0 0 10px 0;
	}
	
	#main_content h2 {
		padding: 0 0 5px 0;
		margin: 20px 0 10px 0;
		line-height: 1.2em;
	}

#main_contactContent {
	width: 450px;
	padding: 10px 0 0 0;
}

	#main_contactContent h2 {
		border-bottom: solid 1px #d9d9d9;
		padding: 0 0 5px 0;
		margin: 20px 0 10px 0;
		line-height: 1.2em;
	}
	
	#main_contactContent p span {
		font-weight: bold;
	}
	
	#main_contactContent a {
		color: #666666;
	}
	
	#contactContent_contactDetails {
		margin: 20px 0 0 0;
	}
	
		#contactContent_contactDetails p {
			padding: 0 0 0.3em;
		}
	
	#contentContact_addressTitle {
		padding: 0 0 10px 0;
	}
	
	#contentContact_addressPhone {
		padding: 10px 0 0px 0;
	}
	
#sideCol_content {
	width: 284px;
}

#sideCol_contactContent {
	width: 456px;
}

	#sideCol_content img {
		border: solid 1px #a0a09e;
	}
	
	#sideCol_box {
		border: solid 5px #999999;
	}
	
		#sideCol_box img {
			border: none;
		}
	
	.download_box {
		height: 500px;
	}
	
    /*
		#box_title {
			background: #999999;
		}
    */
		
			#box_title h4 {
				/*color: #fff;*/
				font-weight: bold;
				padding: 10px 0 15px 15px;
			}
	
	#downloadLinks {
		list-style: none;
		margin: 0; 
		padding: 2px 15px 0 15px; 
		overflow: hidden;
	}
	
		#downloadLinks li {
			padding: 12px 0 12px 0;
			border-bottom: solid 1px #d9d9d9;
		}
		
		#downloadLinks li.last {
			padding: 12px 0 12px 0;
			border-bottom: none;
		}
		
			#downloadLinks a {
				color: #444343;
        display: block;
			}
			
			#downloadLinks li img {
				border: none;
				float: right;
			}
	
	#sideCol_info {
		border-top: solid 1px #d9d9d9;
		margin: 15px 0 0 0;
		padding: 15px 0 0 0;
	}
		
		#sideCol_info p {
			float: left;
			width: 40px;
			margin: 0 10px 0 0;
		}
		
		#sideCol_info img {
			border: none;
			margin: 0px 0 0 15px;
		}

/*---------------------------------------------------------------------------------------
                               *** MISC. ***
---------------------------------------------------------------------------------------*/

/*------------------------------------
   ErrorPage
------------------------------------*/

body.errorPage {
  background: #F3F3F3;
}

body.errorPage p#errorMessage { 
	padding: 100px 0;
	text-align: center;
}

.overflow {
	overflow: hidden;
}


#main_content .ExpressForm {
  width: 100% !important;
  /*  margin: 0px auto;*/
}

#main_content .ExpressForm div.row {
 overflow: hidden;
 margin: 5px 0px;
 text-align: left;
 line-height: 17px;
}

#main_content .ExpressForm div.formLeft {
  width: 55%;
}

#main_content .ExpressForm div.formRight {
  width: 45%;
}

#main_content .ExpressForm input {
  margin: 0px;
  color: #666666;
  background: #FFFFFF;
  line-height: 17px;
  border: 1px solid #999999;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  width: 90%;
}

#main_content .ExpressForm input:focus {
  color: #333333;
  background: #FFFFEE;
}

#main_content .ExpressForm input.submit {
  background: #666666;
  border: 1px solid #333333;
  color: #FFFFFF;
  padding: 2px 0px;
  width: 100px;
}

#main_content .ExpressForm input.submit:hover {
  background: #555555;
}

#main_content .ExpressForm #pgeControls_ctl00_txtEmailAddress,
#main_content .ExpressForm #pgeControls_ctl00_txtQuantityOfEnvelopes,
#main_content .ExpressForm #pgeControls_ctl00_txtColourSpec {
  margin-bottom: 10px;
}

#main_content .ExpressForm .formError {
  float: right;
  display: block;
  margin-left: 3px;
}

/*******************************************************************************
* Gallery Style Section
*******************************************************************************/
#gallery {
  width: 650px;
  height: 320px;
  float: left;
  background: #CCCCCC;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

#gallery .viewport,
#gallery .viewer {
  height: 250px;
}

#gallery .viewer img {
  position: absolute;
  float: left;
  z-index: 0;
}

#gallery .viewport .label {
  width: 500px;
  line-height: 50px;
  font-family: verdana;
  font-size: 15pt;
  background: #FFFFFF;
  text-align: left;
  float: left;
  margin: 20px 0px;
  padding: 0px 10px;
  position: absolute;
  z-index: 2;
  top: 200px;
}

#gallery .preview {
  height: 70px;
}

#gallery .preview  .browse {
  display: block;
  width: 13px;
  height: 30px;
  text-indent: -9999em;
  overflow: hidden;
  margin: 25px 5px;
  position: relative;
  cursor: pointer;
}

#gallery .preview .prev {
  float: left;
  background-image: url("../images/prev.png");
}

#gallery .preview .next {
  float: right;
  background-image: url("../images/next.png");
}

#gallery .preview .scrollable {
  overflow: hidden;
  position: relative;
  width: 590px;
  height: 70px;
  left: 10px;
}

#gallery .preview .items {
  position: absolute;
  width: 9999em;
  clear: both;
}

#gallery .preview .items div {
  width: 590px;
  float: left;
  text-align: center;
}

#gallery .preview img {
  width: 100px;
  height: 50px;
  margin: 10px 5px;
  padding: 0px;
  border: none;
  cursor: pointer;
  border: 1px solid #BBBBBB;
}

#gallery .preview img.active {
  border: 1px solid #666666;
}