/* element styling */

* {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

a {
	outline:none;
}

html, body {
	font-family: Futura, Arial;
	font-size: 10px;
	color: #898787;
}

a:link, a:visited {
	color: #898787;
	text-decoration: none;
}

a:hover { 
	text-decoration:underline;
}

a:active {
	color: #567eb9;
}

h1 {
	font-size: 1.2em;
}

p {
	padding:0.5em;
}

img {
	border: none;
}

input, submit, checkbox, textarea {
	border: 1px solid #ddd;
	color: #444;
}

.submit {
	padding: 0.2em;
	background: #f8f8f8;
}

li {
	list-style: none;
}

/* layout */

#siteWrapper {
	width: 739px;
	margin: 0 auto;
	margin-top:30px;
	position: relative;

}

#top {
	position: relative;
	width: 100%;
	height: 17px;
	background: url(../_images/shorthats_top.png) repeat-x;
}

#topLeft {
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 17px;
	background: url(../_images/shorthats_tl.png) no-repeat;
}

#topRight {
	position: absolute;
	left: 719px;
	top: 0;
	width: 20px;
	height: 17px;
	background: url(../_images/shorthats_tr.png) no-repeat;
}

#mainWrapper {
}

#left {
	float: left;
	width: 20px;
	height: 100%;
	background: url(../_images/shorthats_left.png) repeat-y;	
}

#main, #productMain, #textMain {
	background:transparent url(../_images/shorthats_left.png) repeat-y;
	height: 424px;
}

#mainInner, #productMainInner, #textMainInner {
	background:transparent url(../_images/shorthats_right.png) repeat-y scroll 100% 50%;
	padding:18px 20px 0 20px;
	width:700px;
	height: 424px;
}

#textMainInner {
	padding: 0 20px;
}

#right {
	float: left;
	width: 20px;
	height: 100%;
	background-image: url(../_images/shorthats_right.png);
}

#bottom {
	position: relative;
	width: 100%;
	height: 24px;
	background: url(../_images/shorthats_bot.png) repeat-x;	
}

#bottomLeft {
	position: absolute;
	left:0;
	top: 0;
	width: 20px;
	height: 25px;
	background: url(../_images/shorthats_bl.png) no-repeat;
}

#bottomRight {
	position: absolute;
	left: 719px;
	top: 0;
	width: 20px;
	height:25px;
	background: url(../_images/shorthats_br.png);
}

#footer {
	clear: both;
	margin-top: 25px;
	text-align: center;
}

.clearBoth {
	clear: both;
}
/* navigation styling */

#navLinks, #companyLinks {
	font-size:12px;
}

#navLinks a, #companyLinks a {
	color: #8e8c8c;
	text-decoration: none;
}

#navLinks a:hover, #companyLinks a:hover {
	color: #567eb9;
	text-decoration: none;
}

#navLinks a:active, #companyLinks a:active {
	color: #567eb9;
	text-decoration: none;
}

#navLinks ul li {
	display: inline;
	padding: 0 2em;
	background: url(../_images/shorthats_bullet.png) no-repeat 0 50%;
}

/* home page styles */

img.homeLogo {
	padding-top: 160px;
	padding-left: 28px;
}

/* product page styles */

#picto {
	float: left;
	width: 178px;
	height: 390px;
	margin-left: 25px;
	overflow: hidden;
}

* html div#picto {
	margin-left: 20px;
}

#pictoTop {
	width:100%;
	height:27px;
	background:url(../_images/hats/pictograms/shorthats_picto_top.png) no-repeat;
	overflow: hidden;
}

#pictoSubNav { 
  background:transparent url(../_images/hats/pictograms/shorthats_picto_bg.png) repeat-y scroll 0 0;
  padding:0px 0 0 10px;
}

#pictoSubNav a:hover { color: #000; text-decoration: none; }
#pictoSubNav a.active { color: #000; font-weight: bold; }

#pictoMain {
	height: 353px;
	padding: 0 0 0 13px;
	background: url(../_images/hats/pictograms/shorthats_picto_bg.png) repeat-y;
}

#pictoMainB {
	height: 333px;
	padding: 20px 0 0 13px;
	background: url(../_images/hats/pictograms/shorthats_picto_bg.png) repeat-y;
}
#pictoMainB img {
  padding: 0;
}

#pictoBot {
	height:8px;
	background: url(../_images/hats/pictograms/shorthats_picto_bot.png) no-repeat;
}

#pictoMain img {
	padding:9px;
	z-index: 21;
}

#productWrapper {
	float:left;
	/* padding-top:30px; */
	position:relative;
	width:480px;
	height:390px;
}

#productWrapper img.logo {
	position:absolute;
	right: 60px;
	top:0;
}

#productDetail {
	float: left;
}
#productDetailShort {
  padding-top: 37px;
}
#productAlt {
	float: left;
}

#productDesc {
	float: left;
	padding-left: 30px;
}
#productDesc li {
	list-style:none;
}
#productDescFloat {
  position: absolute;
  right: 22px;
  top: 176px;
}
div.buy {
	position:absolute;
	right:10px;
	top:370px;
	z-index:300;
	font-size: 12px;
}
span.sizing {
  margin-right: 40px;
}
table.wholesaleTable {
	width: 100%;
}

td.inputDesc {
	width: 6em;
	padding: 0.5em 0;
}

td.inputField {
	width: 18em;
}

/* company page styles */

#companyLinks {
	float: left;
	width: 10em;
	padding: 40px 30px;
}

#companyLinks a {
	color: #707070;
}

#companyLinks li {
	padding: 0.8em 0;
}

#companyText {
	float: left;
	width: 400px;
	padding: 60px 0;
}

/* wholesale page styles */

#wholesaleText {
	width: 70%;
	margin: 0 auto;
	text-align: left;
	padding: 40px 0 0 0;
	font-size: 11px;
}

#wholesaleText h1 {
	color: #666;
	text-transform: none;
}

#wholesaleText a {
	color: #666;
}

#wholesaleText p {
	text-indent: 0;
	padding: 0 0 0.5em;
	font-weight: normal;
}

#wholesaleFormWrapper {
	text-align: left;
	font-size: 10px;
	width: 90%;
	margin: 0 auto;
}

/* footer styles */

#footer {
	font-size: 9px;
}

#footer ul li {
	display: inline;
	padding: 0 2em;
	background: url(../_images/shorthats_bullet.png) no-repeat 0 50%;
}

/* misc. styling */
#site {
	position: absolute;
	left:-999px;
}

#logo {
	width: 95%;
	text-align: right;
}

div.trLogo {
	position: absolute;
	right: 95px;
	top: 66px;
	z-index: 10;
}

#footer ul li.firstListItem, #navLinks ul li.firstListItem {
	background: none;
}

#navLinks li.activeLink a, #companyLinks li.activeLink a {
	color: #567eb9;
}
.em {
	font-size: 12px;
	color: #555;
}

.error {
	color: #ff0000;
}