/*---------------------------------------
version:  1.0 boilerplate
author:   Peter Mah
email:    peter@xpan.ca
website:  www.xpan.ca
----------------------------------------*/

/* Table of Contents:

	global Settings
	div structure
	headings
	common Formatting
	links
	forms
	tables
*/


/*---------------------------*/
/***** =global Settings *****/
/*--------------------------*/
html, body {
	border:0;
	margin:0;
	padding:0;
	background-color:#90A69B;
	}


/*-----------------------*/
/***** div structure *****/
/*-----------------------*/
body {
	/*font:100%/1.25 Arial, Helvetica, sans-serif;*/
	font-size:62.5%;  /*Default value for all fonts roughly equal to 10px. */
	font-family:Arial, Helvetica, sans-serif;
	}

#wideWrapper{
	width:100%;
    height:100%;
    text-align:center;
    background-color:#90A69B;
}

#contentContainer {
	width:780px;
	margin:0 auto;
	background-color:#fff;
	margin-bottom:20px;
	}

#banner{
	width:780px;
	height:171px;
	background-image:url('/images/hbiMainBanner.jpg');
	background-repeat:no-repeat;
	position:relative;
}
#subBanner{
	width:780px;
	height:117px;
	background-color:#fff;
	background-image:url('/ximages/hbiSubBanner.jpg');
	background-repeat:no-repeat;
	margin-bottom:8px;
}
#coreBanner{
	width:780px;
	height:135px;
	/*background-image:url('/images/coreBanner.jpg');*/
	background-repeat:no-repeat;
	position:relative;
}
#navContainer{
	width:780px;
	height:42px;
	background-color:#fff;
}
#navigation{
	width:634px;
	height:28px;
	margin-top:7px;
	background-color:#b1d413;
	float:left;
}
#search{
	float:right;
	width:188px;
	height:22px;
	margin-right:4px;
	margin-top:4px;
}
#resourceNav{
	width:136px;
	height:28px;
	margin-top:7px;
	float:right;
	background-color:#4b5b51;
}
#productsNavigation{
	height:30px;
	width:780px;
}

#content{
	width:780px;
	text-align:center;
}
#wideContentPadding{
	width:700px;
	margin-left:auto;
	margin-right:auto;
}
#contentProducts{
	width:780px;
	margin-top:4px;
	margin-bottom:4px;
	background-image:url('/images/prodSubMenuBack.gif');
	background-repeat:repeat-y;
	background-position:left;
}
	#prodMenu{
		width:191px;
		float:left;
		margin-right:5px;
	}
	#prodMenuPad{
		width:165px;
		margin-left:auto;
		margin-right:auto;
		text-align:left;
		margin-top:20px;
	}
	#prodImages{
		width:191px;
		float:left;
		margin-right:4px;
	}
	#prodDescription{
		width:370px;
		float:left;
		text-align:center;
	}
	#prodDescriptionPad{
		width:330px;
		margin-right:auto;
		margin-left:auto;
		margin-top:13px;
	}
#contentService{
	width:780px;
	margin-top:4px;
	margin-bottom:4px;
	background-image:url('/images/serviceSubMenuBack.gif');

	background-repeat:repeat-y;
	background-position:left;
}
	#creativeImages{
		width:202px;
		float:left;
		margin-right:4px;
	}
	#serviceMenu{
		width:191px;
		float:left;
		margin-right:5px;
	}
	#serviceMenuPad{
		width:155px;
		margin-left:auto;
		margin-right:auto;
		text-align:left;
		margin-top:20px;
	}

	#coreMenu{
		width:191px;
		float:left;
		margin-right:5px;
	}
	#coreMenuPad{
		width:155px;
		margin-left:auto;
		margin-right:auto;
		text-align:left;
		margin-top:20px;
	}
#contentCreative{
	width:780px;
	margin-top:5px;
	margin-bottom:4px;
	background-image:url('/images/coreSubMenuBack.gif');
	background-repeat:repeat-y;
	background-position:left;
}
	#creativeDescription{
		width:360px;
		float:left;
		text-align:center;
	}
	#creativeDescriptionPad{
		width:330px;
		margin-right:auto;
		margin-left:auto;
		margin-top:13px;

	}


.column{
	float:left;
	width:192px;
	margin-right:5px;
}
#column1{
	width:191px;
	text-align:center;
}
#column2{
	width:191px;
	text-align:center;
}
#column3{
	text-align:center;
}
#column4{
	text-align:center;
}
.columnPad{
	width:175px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	margin-top:20px;
}
#columnClearHome{
	width:770px;
	clear:both;
	height:53px;
	margin:0px;
	padding:0px;
}
#columnClearSub{ /*provides some white space at the bottom of the interior pages,
change height value to adjust the amount*/
	width:770px;
	clear:both;
	height:53px;
	margin:0px;
	padding:0px;
}
#footer{
	width:780px;
	height:41px;
	clear:both;
	background-color:#b1d413;
	background-image:url('/images/greenStripes.gif');
	background-position:left;
	background-repeat:no-repeat;
	color:#fff;
	font-size:1.2em;

}
#footerText{
	width:548px;
	height:20px;
	float:right;
	margin-right:0px;
	margin-top:9px;
}

/*---------------------------*/
/***** =headings *****/
/*---------------------------*/
h1, h2, h3, h4, h5, h6 {
	margin:0;
	padding:0;
	font-weight:normal;
	}

h1 {
	padding:10px 0 13px 0;
	letter-spacing:-1px;
	font-size:2em;
	color:#20536C;
	font-size:15px;
	font-weight:bold;
	text-align:left;
}
h1.homeHeader{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.3em;
	line-height:1.4em;
	padding-bottom:5px;
	padding-top:0px;
	font-weight:bold;
	text-align:left;
	color:#266485;
}

#homeHeader{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.3em;
	line-height:1.4em;
	padding-bottom:5px;
	padding-top:0px;
	font-weight:bold;
	text-align:left;
	color:#266485;
}

h2 {
	padding:20px 0;
	letter-spacing:-1px;
	color:#20536C;
	font-size:13px;
	font-weight:bold;
	text-align:left;
}

h3 {
	font-size:12px;
	font-weight:bold;
	text-align:left;
	}


/*---------------------------*/
/***** common Formatting *****/
/*---------------------------*/
/* =p */
p, ul, ol {
	margin:0;
	padding:0 0 1.25em 0;
	}
p{
	font-size:1.2em;
	line-height:1.4em;
	text-align:left;
	padding-bottom:0em;
}
#prodDescription p, #creativeDescription p{
	line-height:1.5em;
	padding-bottom:14px;
}
#creativeDescription p
#footerText p{
	padding:0px;
	margin-top:6px;
	font-size:14px;
}
#footerText p{
	font-size:14px;
}


/* =list  */
ul, ol {
	padding:0 0 1.25em 2.5em;
	}
#prodDescription ul{
	margin-left:14px;
	padding-left:0px;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
#creativeDescription ul{
	margin-left:14px;
	padding-left:0px;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
#prodDescription ul li, #creativeDescription ul li{
	margin-bottom:7px;
}

blockquote {
	margin:1.25em;
	padding:1.25em 1.25em 0 1.25em;
	}
small {
	font-size:0.85em;
	}

img {
	border:0;
	}

sup {
	position:relative;
	bottom:0.3em;
	vertical-align:baseline;
	}

sub {
	position:relative;
	bottom:-0.2em;
	vertical-align:baseline;
	}

acronym, abbr {
	cursor:help;
	letter-spacing:1px;
	border-bottom:1px dashed;
	}


/*---------------*/
/***** =links *****/
/*---------------*/
a,a:link,a:visited,a:hover {
	text-decoration:none;
	}
a{
	color:#20536C;
	font-weight:bold;
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}
#prodDescription ul li a, #creativeDescription ul li a{
	font-weight:normal;
	margin-bottom:5px;
}

/* site map list styles */
/*----------------------*/
ul#siteMapList li a{
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:14px;
}
ul#siteMapList li{
margin-top:10px;
}
ul#siteMapList ul.subSiteMapList li{
margin-top:5px;
}
ul#siteMapList ul.subSiteMapList li a{
	font-weight:normal;
	font-size:12px;
}
ul#siteMapList{
	margin-top:8px;
}
ul#siteMapList ul.subSiteMapList{
	margin-left:20px;
	padding-bottom:0px;
}
/*----------------------*/

#creativeDescription a{
	color:#749BB6;
	font-weight:bold;
	text-decoration:none;
}
#creativeDescription a:hover{
	color:#749BB6;
	font-weight:bold;
	text-decoration:underline;
}
a#CreativeCoreLink {
	color:#fff;
	font-size:15px;
	line-height:25px;
	font-weight:bold;
	text-decoration:none;
}
a#hbiLogoLink{
	text-indent:-1000em;
	position:absolute;
	text-decoration:none;
	left:17px;
	top:28px;
	height:90px;
	width:205px;

}
a#creativeLogoLink{
text-indent:-1000em;
	position:absolute;
	text-decoration:none;
	left:85px;
	top:35px;
	height:52px;
	width:337px;
}
.columnPad a{
	text-decoration:none;
	color:#20536C;
	font-weight:bold;
	text-decoration:none;
}
.columnPad a:hover{
	text-decoration:underline;;
	color:#20536C;
}
#navMenu{/*div to hold the main navigation links*/
	width:390px;
	height:22px;
	margin-top:4px;
	margin-left:4px;
	float:left;
}
#navMenu ul{
	margin-left:0px;
	padding-left:0px;
}
#navMenu ul li{
	list-style-type:none;
	float:left;
	color:#fff;
	font-size:1.4em;
	font-weight:bold;
	line-height:1.5em;
	position:relative;
}
#navMenu ul li a{
	text-decoration:none;
	color:#fff;
	padding:4px 12px 8px 12px;
	/*border-right:1px solid #fff;*/
}
#navMenu ul li a:hover{
	color:#706C00;
}
#navMenu #contact a{
	/*border-right:none;*/
}
div#navMenu ul li:hover ul{
	/*USING specifity as outlined in
    http://www.w3.org/TR/CSS21/cascade.html#specificity
    trigger the submenu to display. This is combined with the .htc*/
	display:block;
}

/* styles for the subnavigation list*/
#navMenu ul li ul{
margin:0;
position:absolute;;
width:210px;/*adjust for width of subnav unordered */
left:12px;
top:26px;/*top value reduced to 17px to fix problem with Firefix (Mac version)
not displaying the submenu and holding it on hover of the main navigation.*/
display:none;  /*hide the submenus by default*/
padding-top:3px;
}
        #navMenu ul li ul li{
        width:100%;
        text-align:left;
        }
        #navMenu ul li ul li a{
        color:#000;
        display:block;
        background-color:#fff;
        padding:3px 0px 3px 8px;
        width:100%;
		font-size:13px;
		font-weight:normal;
		line-height:1.1em;
        }
        #navMenu ul li ul li a:hover{
        color:#000;
        }

/* =products navigation */
#productsNavigation ul{
	margin-left:0px;
	padding-left:0px;
}
#productsNavigation ul li{
	list-style-type:none;
	float:left;
	margin-right:5px;
}
#productsNavigation ul li a{
	text-decoration:none;
	color:#749bb6;
	background-color:#dee9f0;
	height:30px;
	width:191px;
	display:block;
	font-size:1.3em;
	line-height:2.1em;
	font-weight:bold;
}
#productsNavigation ul li a:hover{
	text-decoration:none;
	color:#dee9f0;
	background-color:#749bb6;
}

/*styles for sub navigation on left side in the content area, only on the products pages*/
#prodMenu ul{
	margin-left:0px;
	padding-left:0px;
}
#prodMenu ul li{
	list-style-type:none;
	padding-bottom:13px;
}
#prodMenu ul li a{
	text-decoration:none;
	font-size:13px;
	color:#749BB6;
}
#prodMenu ul li a:hover{
	color:#20536C;
}


/*styles for sub navigation on left side in the content area, only on the service pages*/
#serviceMenu ul{
	margin-left:0px;
	padding-left:0px;
}
#serviceMenu ul li{
	list-style-type:none;
	padding-bottom:13px;
}
#serviceMenu ul li a{
	text-decoration:none;
	font-size:13px;
	color:#a49f49;
}
#serviceMenu ul li a:hover{
	color:#706c00;
}


/*styles for sub navigation on left side in the content area, only on the creative core pages*/
#coreMenu ul{
	margin-left:0px;
	padding-left:0px;
}
#coreMenu ul li{
	list-style-type:none;
	padding-bottom:14px;
}
#coreMenu ul li a{
	text-decoration:none;
	font-size:13px;
	color:#73867c;
}
#coreMenu ul li a:hover{
	color:#374a41;
}

/*styles for footer links */
#footerText a{
	color:#fff;
	text-decoration:none;
	font-size:14px;
}
#footerText a:hover{
	color:#706c00;
}
/*---------------*/
/***** forms *****/
/*---------------*/
form {
	margin:0;
	padding:0;
	display:inline;
	}

input, select, textarea {
	font:1em Arial, Helvetica, sans-serif;
	}

textarea {
	width:100%;
	line-height:1.25;
	}

label {
	cursor:pointer;
	}
#sInput{
	border:1px solid #ccc;
	height:15px;
	margin-bottom:3px;
	float:right;
	width:127px;
}
#searchsubmit{
	margin:0px;
	margin-top:0px;
	margin-bottom:0px;
	padding:0px;
	padding-bottom:2px;
	border:0px;
	width:55px;
	height:20px;
	float:left;
	background-color:#b1d413;
	color:#fff;
	font-weight:bold;
	font-size:1.4em;
}

/*-----------------------------*/
/*service request forms styles*/
/*-----------------------------*/

fieldset{
	width:430px;
	padding:10px;
	border:1px solid #ccc;
	margin:2px 0 10px 0;
}
fieldset .inputboxes{
	border:1px solid #7f7f7f;
	}
legend{
	font-size:12px;
}
#problemCheckbox{
	margin-left:40px;
}
/*styles for the block area around the labels on the form */
label.inputLabel{
	width:140px;
	display:block;
	float:left;
	}
	label.inputLabelWork{
	width:170px;
	display:block;
	float:left;
	}
/*styles for the text only inside the labels. They are floated right to
align themselves next to the input boxes on the form. */
.inputLabel .labelText{
	float:right;
	line-height:18px;
	margin-right:3px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	}
	.inputLabelWork .labelText{
	float:right;
	line-height:18px;
	margin-right:3px;
	}

#submitRequest{
	margin-top:0px;
	margin-right:47px;
	float:right;
}






/*-----------------*/
/***** =tables *****/
/*-----------------*/
/* table { uncomment if layout does not use tables for it's layout
border:0;
margin:0 0 1.25em 0;
padding:0;
}
*/

table tr td {
padding:2px;
text-align:left;
}


/*-------------------------*/
/***** =global classes *****/
/*-------------------------*/
.clear         { clear:both; }
.float-left    { float:left; }
.float-right   { float:right; }

.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }

.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }
.highlight     { background:#ffc; }

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

.img-left      { float:left;margin:4px 10px 4px 0; }
.img-right     { float:right;margin:4px 0 4px 10px; }

.nopadding     { padding:0; }
.noindent      { margin-left:0;padding-left:0; }
.nobullet      { list-style:none;list-style-image:none; }



/* =cms styles*/

#CMSeditor table td{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
}
#CMSeditor table input, #CMSeditor table textarea{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	border:1px solid #ccc;
}
#CMSeditor table {
	border:1px solid #ccc;
}
#CMSeditor table td{
	border:1px solid #ecebeb;
}
#CMSeditor #xEditingArea {
	border:1px solid red;
}

.border_full{
  border:1px solid #cccccc;
  padding:4px;
}