@charset "utf-8";

/* Jumbo Bag CSS Document */

/* Created by ImMedia */

/* --------------------- */
/*	General Styles	*/
/* --------------------- */

body {
	font-family: Tahomoa, Arial, Verdana, Sans-serif;
	font-size: 13px;
	color: #1a1a1a;
	font-weight: 300;
	background: #c7dbe7;
	margin: 0px;
	padding: 0px;
	background-image: url("../resources/bg.png");
	background-repeat: repeat-x;
}

a {
	color: #2a6096;
	text-decoration: none;
	outline: none;
}
a:hover {
	color: #333;
	padding: 0 0 0 0;
}

.line {
	border-bottom: #ccc dotted 1px;
	padding-top: 20px;
	margin: 0 0 15px 0;
}

/* --------------------- */
/*	Main Structure Styles	*/
/* --------------------- */

.box {
	width: 880px;
	margin: 0 auto;
	padding: 0;
	border: none;
	height: 100%;
	overflow: hidden;
}

.shadow {
	width: 840px;
	height: 100%;
	margin: 0px;
	padding: 0 20px 0 20px;
	border: none;
	background-image: url("../resources/shadow.png");
	float: left;
}
	
.container {
	width: 836px;
	height: 100%;
	margin: 0 auto;
	padding: 0 2px;
	border: none;
/*  Equal-height Columns  
	overflow: hidden;
	Equal-height Columns   */
	}


/* --------------------- */
/*	Masthead Styles	*/
/* --------------------- */


.masthead {
	width: 836px;
	height: 110px;
	background-image: url("../resources/masthead.png");
	background-repeat: no-repeat;
	float: left;
}

#signup {
	font-family: Arial, Tahomoa, Verdana, Sans-serif;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: .04em;
	color: #fff;
	width: 225px;
	height: 20px;
	float: right;
	margin: 1px 0 0 400px;
	border: none;
}

#signup a {
	color: #fff;
	text-decoration: none;
	margin-right: 10px; padding: 0;
}
#signup a:hover {
	color: #FFFFCC;
	text-decoration: none;
}
.signup img {
	padding: 0 0 0 8px;
	border: none;
}

.navbox {
	font-family: Arial, Tahomoa, Verdana, Sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: right;
	color: #6b6b6b;
	width: 490px;
	height: 20px;
	float: right;
	margin: 70px 0 0 0;
	display: bottom right;
}

.navbox a {
	color: #6b6b6b;
	text-decoration: none;
	margin-right: 13px;
}
.navbox :hover {
	color: #ff5a00;
	text-decoration: none;
	margin-right: 13px;
}


/* --------------------- */
/*	Screen Styles	*/
/* --------------------- */

.screen {
	width: 836px;
	height: 240px;
	background-image: url("../resources/screenMain.jpg");
	background-repeat: no-repeat;
	float: left;
}
.screenAbout {
	width: 836px;
	height: 160px;
	background-image: url("../resources/screenAbout.jpg");
	background-repeat: no-repeat;
	float: left;
}
.screenProducts {
	width: 836px;
	height: 160px;
	background-image: url("../resources/screenProducts.jpg");
	background-repeat: no-repeat;
	float: left;
}
.screenLocations {
	width: 836px;
	height: 160px;
	background-image: url("../resources/screenLocations.jpg");
	background-repeat: no-repeat;
	float: left;
}
.screenServices {
	width: 836px;
	height: 160px;
	background-image: url("../resources/screenServices.jpg");
	background-repeat: no-repeat;
	float: left;
}
.screenContact {
	width: 836px;
	height: 160px;
	background-image: url("../resources/screenContact.jpg");
	background-repeat: no-repeat;
	float: left;
}
.screenSizing {
	width: 836px;
	height: 160px;
	background-image: url("../resources/screenSizing.jpg");
	background-repeat: no-repeat;
	float: left;
}

/* --------------------- */
/*	Info Bar Styles	*/
/* --------------------- */

.infobar {
	width: 766px;
	height: 5px;
	padding: 5px 35px 0 35px;
	background-image: url("../resources/infoBg.png");
	background-repeat: no-repeat;
	border-bottom: 1px dotted #5a656f;
	float: left;
}

/* --------------------- */
/*	Body Styles	*/
/* --------------------- */


#body {
	width: 766px;
	height: 100%;
	line-height: 20px;
	color: #1a1a1a;
	font-weight: 300;
	min-height: 390px;
	margin-top: 1px;
	padding: 10px 35px 40px 35px;
	background-image: url("../resources/globeBg.jpg");
	background-repeat: no-repeat;
	float: left;
}

#body li, ul {
	font-size: 12px;
	line-height: 18px;
	margin: 0 20px 6px 0;
}
#body table, td, tr {
	border-bottom: 1px solid #1a1a1a;
}

.left {
	width: 480px;
	height: 100%;
	float: left;
	margin: 0; padding: 0;
}
.left p {
	margin-left: 15px;
}

.h1{
	font-size: 20px;
	font-weight: bold;
	line-height: 22px;
	color: #0d316d;
	padding: 10px 0 10px 0;
}

.jumbo {
	color: #515356;
}
.h2{
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	color: #232527;
	padding: 10px 0 0 0;
}
#dlcontainer {
	width: 440px;
	height: 80px;
	padding: 15px 10px 18px 20px;
	margin: 20px 0 10px 0;
	background-color: #e4eaf1;
	border: 1px solid #515356;
	float: left;
}
a.dlbig {
	display: block;
	width: 80px;
	height: 80px;
	background: url("../resources/dl_big.png") 0 0 no-repeat;
	border: 1px solid #515356;
	float: left;
}
#dlcontainer a:hover {
	height: 80px;
	background-position: 0 -85px;
}
#dlleft {
	width: 130px;
	float: left;
	font-size: 13px;
	font-weight: bolder;
	color: #535252;
	margin: 10px 0 5px 15px; 
}
#dlleft .dl {
	width: 100%;
	font-size: 16px;
	font-weight: bolder;
	color: #373737;
	margin: 0 0 5px 0; 
}

.dlright {
	width: 180px;
	height: 70px;
	margin: 0;
	padding: 10px 5px 0 15px;
	font-size: 11px;
	line-height: 16px;
	color: #535252;
	border-left: 1px dotted #515356;
	float: right;
}

/*	Product Page Styles	*/
/* --------------------- */

.imgbox {
	width: 100%;
	height: 100%;
	margin: 15px 0 20px 0;
	padding-bottom: 15px;
	background-color: #e4eaf1;
	border: 1px solid #515356;
	float: left;
}

.img {
	width: 115px;
	font-size: 13px;
	line-height: 16px;
	text-align: center;
	font-weight: bolder;
	color: #0d316d;
	margin: 0 20px 0 20px;
	float: left;
}

.img img {
	margin-top: 3px;
}

/*	Locations Page Styles	*/
/* --------------------- */

.leftl {
	width: 776px;
	height: 100%;
	float: left;
	margin: 0; padding: 0;
}
.leftl p {
	margin-left: 15px;
	margin-right: 25px;
}

/*	Contact Page Styles	*/
/* --------------------- */

.cleft {
	width: 200px;
	height: 225px;
	float: left;
}

.cright {
	width: 279px;
	height: 225px;
	float: right;
}


/* --------------------- */
/*	Sidebar Styles	*/
/* --------------------- */

.right {
	font-size: 12px;
	line-height: 16px;
	width: 245px;
	height: 100%;
	float: right;
	padding-top: 30px;
}

a.callout {
	width: 240px;
	height: 80px;
	margin: 0px; 
	padding: 0 0 10px 0;
	color: #535252;
	float: none;
}

a.callout :hover {
	color: #2a6096;
}

.title {
	font-size: 12px;
	line-height: 16px;
	font-weight: bolder;
	color: #3f4045;
	padding: 0 15px 2px 20px;
	margin: 0 0 0 20px;
	background-image: url("../resources/arrow.png");
	background-repeat: no-repeat;
}

.right p {
	padding: 0 15px 15px 40px;
	margin: 0;
}

.right img {
	margin: 20px 0 10px 0;
	border: 1px solid #4e4e4e;
}
.right img:hover {
	margin: 20px 0 10px 0;
	border: 1px solid #ff5a00;
}

/* --------------------- */
/*	Footer Styles	*/
/* --------------------- */

.footerbar {
	font-size: 10px;
	font-weight: bold;
	line-height: 20px;
	color: #2C363A;
	width: 766px;
	height: 36px;
	padding: 8px 35px 0 35px;
	background-image: url("../resources/footerBar.png");
	background-repeat: no-repeat;
	float: left;
}

.footer {
	width: 766px;
	height: 120px;
	padding: 35px 35px 0 35px;
	background-image: url("../resources/footerBg.png");
	background-repeat: repeat-x;
	background-color: #dbe0e5;
	float: left;
}

.ftnav {
	width: 470px;
	height: 100px;
	text-decoration: none;
	float: left;
}

.fth1 {
	font-size: 14px;
	font-weight: bolder;
	text-transform: uppercase;
	margin: 0 0 10px 0;
}

.ftlinks {
	font-size: 11px;
	text-transform: uppercase;
	line-height: 18px;
	margin-left: 15px;
}
.ftlinks a {
	color: #2C363A;
	font-weight: bold;
	text-decoration: none;
	padding: 0 12px 15px 0;
}

.ftlinks :hover {
	color: #2a6096;
	text-decoration: none;
}

.ftnav a {
	color: #2a6096;
	text-decoration: none;
}
.ftnav :hover {
	color: #2C363A;
	text-decoration: none;
}
.ftinfo {
	width: 245px;
	height: 105px;
	float: right;
}

.immedia {
	font-size: 10px;
	color: #5b5b5b;
	margin-top: 15px;
}
.immedia a {
	font-weight: bold;
	color: #003366;
	text-decoration: none;	
}
.immedia a:hover {
	font-weight: bold;
	color: #2a2a2a;
	text-decoration: none;	
}

/* --------------------- */
/*	Gallery Styles	*/
/* --------------------- */

.thumbnail{
position: relative;
z-index: 0;
float: left;
}
.thumbnail img {
width: 75px;
height: 75px;
border: 1px solid #000;
margin: 6px 20px 0 0;
}
.thumbnail:hover{
background-color: transparent;
border-color: #000;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
left: -1000px;
border-color: #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border: 1px solid #000;
padding: 0;
width: 150px;
height: 150px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
border-color: #000;
top: -20px;
left: 20px; /*position where enlarged image should offset horizontally */
}

.thumbnail2 {
position: relative;
z-index: 0;
float: right;
}
.thumbnail2 img {
width: 75px;
height: 75px;
border: 1px solid #000;
margin: 6px 0 0 20px;
}
.thumbnail2:hover{
background-color: transparent;
border-color: #000;
z-index: 50;
}

.thumbnail2 span{ /*CSS for enlarged image*/
position: absolute;
left: -1000px;
border-color: #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail2 span img{ /*CSS for enlarged image*/
border: 1px solid #000;
padding: 0;
width: 150px;
height: 150px;
}

.thumbnail2:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
border-color: #000;
top: -20px;
left: 20px; /*position where enlarged image should offset horizontally */
}