/* Hoggan's CSS page, these are the "general" rules that rule the entire site */

.wrapper {
	font-size: 89%;
	margin-left: auto;
	margin-right: auto;
	width: 60em;
	color: black;
	position: relative;
}

body {
   font-family: Verdana, Helvetica, Arial, sans-serif;
   background-color: black;
   line-height: 125%;
   padding: 0;
   margin: 0;
   
}

#tagline p {
    color: white;
    padding-top: .2em;
    padding-bottom: .2em;
    padding-left: 0;
	margin-top: 20px;
	margin-left: 150px;
	position: absolute;
}
  
ul {
    margin-top: 15px;
}

li {
    font-size: 12px;
    font-weight: bold;
    color: white;
}

li a {
    text-decoration: none;
    list-style-type: none;
    color: #00CCFF;
    
}

p {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: white;
}

a {
    font-size: 12px;
    font-weight: bold;
    color: #00CCFF;
}

a:link {
    color: #00CCFF;
}

a:visited {
}

a:hover {
    text-decoration: underline;
    color: white;
}

a:active {
    color: red;
    background-color: navy;
}

blockquote {
	color: white;
}

h1, h2, h3, h4, h5 {
    font-family: Calibri, Tahoma, Rockwell, sans-serif;
    color: white;
}

h1 {
     font-size: xx-large; 
     font-weight: bold;
     padding-top: 1em;
     padding-bottom: .2em;
     padding-left: .4em;
     margin: 0;
}
    
h2 {
      font-size: 130%;
      font-weight: normal;
	  color: #00CCFF;
}

h2 a {
      font-size: 120%;
      font-weight: bold;
	  color: #00CCFF;
}

h3 {
     font-weight: normal;
     font-size: large;
}


h4 {
 	font-weight: normal;
   	font-size: large;
  }
  
h5 {
   	font-size: large;
  } 	
   	
.attentiongrab {
    width: 50%;
    font-weight: bold;
	font-style: italic;
    font-size: x-large;
}

#bodycontent {
	width: 45em;
	float: right;
	clear: right;
	padding-top: 20px;
}
 
#header {
	position: inherit;
	margin-left: 40px;
	height: 200px;
}

#header img {
	border: none;
}

#footer {
	text-align: center;
	clear: both;
}

#breadcrumbs p{
	text-align: left;
	font-size: smaller;
	color: white;
	margin-bottom: 5px;

}
 

/* This helps keep the return to top button to the right side of the page */
.return {
	text-align: right;
}

.return img {
	border: none;
}

/*******************************************************************************************/

/* This left column contains the navigation, Goji, and Better Business Bureau */

.leftcol {
	width: 14em;
	height: auto;
}

#images {
	position: absolute;
	left: 0;
	top: 753px;
	width: 174px;
}

#goji {
	float: left;
	clear: right;
}

#goji img, #BBB img {
	border: none;
}
/**************************/

/*This controls the navigation throughout the site */
#navigation {
	float: left;
	margin-top: 80px;
}

#nav li a:hover {
	background-color: #00CCFF;
	color: #FFFFFF;
}

#nav ul {
	padding: 0;
	display: none;
	background-color: #9900CC;
}

#nav ul a {
	color: #000000;
	font-weight: bold;
}

#nav ul li {
	list-style: none;
	margin-bottom: -1px;
	margin-top: 1px;
}

#nav li:hover ul{
	display: block;
	margin-left: 1em;
	margin-top: -0.20em;
}

#nav a {
	display: block;
	margin: 0;
	padding: 2px 3px;
	text-decoration: none;
}

#nav li {
	position: relative;
	list-style: none;
	width: 10em;
}

/*This is a little hack for IE */
* html #nav a {
	width: 100%;
}

/********************************/

/* This helps with the tweaking of the contact section at the top */

#contact {
	margin-top: -10em;
	position: absolute;
	margin-left: 40em;
}

form {
	margin-top: -1em;
}
/*****************************/

/*This controls the images javascript on the line gear page */
#slideshow {
	/*IE method of centering a relative div*/
	text-align: center;
}

#slideshow>div { 
	/*Proper way to center a relative div*/
	margin: 0 auto;
	float: right;
}
/********************************/

/* This controls the steps on the custom line gear page and steps */
fieldset {
	margin-top: 5em;
}

#step1 fieldset {
	margin-top: 3em;
}
	
#step2 fieldset, #step3 fieldset, #step4 fieldset, #step5 fieldset {
	margin-top: 13em;
}

#step5 {
	width: 47em;
}
 
#embroidery-option {
	width: 310px;
	margin-left: 23em;
	margin-top: -7em;
	background-color: #333333;
	text-align: center;
}

#embroidery-option h3 {
	margin: 0;
	text-align: center;
}

#embroidery-option h3 a {
	font-size: 20px;
}

legend {
	font-size: xx-large;
	color: #CC0099;
}

#step1 ul {
	float: right;
	margin-top: -200px;
	width: 380px;
}

p span {
	color: #CC0099;
	font-weight: bold;
	font-size: xx-large;
}

p strong span {
	color: #CC0099;
	font-weight: normal;
	font-size: large;
}

p strong span a {
	color: #CC0099;
	font-weight: normal;
	font-size: large;
	text-decoration: none;
}

p strong span a:link {
	color: #CC0099;
	font-weight: normal;
	font-size: large;
	text-decoration: none;
}

p strong span a:hover {
	color: #00CCFF;
}

span.underline {
	text-decoration: underline;
}

p span.underline {
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

ul li span {
	color: #0066CC;
}

/* For the hip belts */
#shoulder-images #H {
	margin-left: 1.5em;
	margin-bottom: 0;
}

#shoulder-images #Y {
	margin-left: 3.5em;
}

#shoulder-images #YC {
	margin-left: 2.5em;
	margin-bottom: 0;
}

#shoulder-images #HS {
	margin-left: 1.5em;
}

#shoulder-images img {
	margin: 0;
	padding: 0;
}

#hip-belts #standard {
	margin-left: 1.5em;
}

#hip-belts #long {
	margin-left: 4em;
}

#horseshoe-hip h3 {
	text-align: center;
}

#horseshoe-hip #ladder {
	font-size: 13px;
	font-weight: bold;
}

#horseshoe-hip #slide {
	font-size: 13px;
	font-weight: bold;
	margin-left: 1.5em;
}

#horseshoe-hip #float {
	font-size: 15px;
	font-weight: bold;
	margin-left: 5.5em;
}
#horseshoe-hip #lash {
	font-size: 15px;
	font-weight: bold;
	margin-left: 6.5em;
}

/************************/

/*This is for the pockets */
#SIGG h3 {
	text-align: center;
}

#pockets #radio {
	font-size: 15px;
	font-weight: bold;
}

#pockets #wedge {
	font-size: 15px;
	font-weight: bold;
	margin-left: 1.5em;
}

#pockets #clamm {
	font-size: 15px;
	font-weight: bold;
	margin-left: 2.5em;
}
#pockets #flatzip {
	font-size: 13px;
	font-weight: bold;
	margin-left: 1.5em;
}

#SIGG .Tgrommet {
	font-size: 12px;
	font-weight: bold;
}

#SIGG #Tstrap {
	font-size: 12px;
	font-weight: bold;
	margin-left: 1em;
}

#SIGG #Tflap {
	font-size: 12px;
	font-weight: bold;
	margin-left: 1.5em;
}
#SIGG #Bweb-cross {
	font-size: 12px;
	font-weight: bold;
	margin-left: 1.5em;
}

#pack-parts img {
	margin-left: 19em;
	clear: both;
}

#pack-parts ol {
	margin-left: 20em;
	margin-top: -17em;
}

#pack-parts #linegear-pocket{
	width: 250px;
	margin-left: 0;
}
/**************************/

/*This is for the accessories step */
#lash-tabs h3 {
	text-align: center;
}

#acc #shelter {
	font-size: 13px;
	font-weight: bold;
}

#acc #outer-shelter {
	font-size: 12px;
	font-weight: bold;
	margin-left: 2.5em;
}

#acc #daisy {
	font-size: 12px;
	font-weight: bold;
	margin-left: 3.5em;
}

#lash-tabs #lash-2tab {
	font-size: 12px;
	font-weight: bold;
}
#lash-tabs #lash-4tab {
	font-size: 12px;
	font-weight: bold;
	margin-left: 1.5em;
}
/****************************/

/*This is for the other accessories that are not shown */
#other-acc table{
	width: 45em;
	margin-left: 0;
	border: 2px solid white;
}

#other-acc h2 {
	font-size: large;
	text-align: center;
}

#other-acc h3 {
	font-size: 15px;
	text-align: center;
	font-weight: bold;
}

#other-acc td {
	color: white;
	font-size: 11px;
	font-weight: bold;
	border-width: 2px;
	text-align: center;
}

.greyback {
	border-width: 2px;
	text-align: center;
	background-color: #C0C0C0;
	color: black;
	border: 2px solid white;
}

.greyback h3 {
	color: black;
}

.greyback span {
	color: black;
	font-size: 11px;
}

.blackback {
	border: 2px solid white;
}
/********************************/

/*This is for the Popular Packs Configuration */
#pop-packs {
	width: 180px;
	float: left;
	position: absolute;
	left: 0;
	top: 940px;
}

#popular-packs img {
	margin-left: 30em;
}

#popular-packs p {
	margin-left: 0;
	margin-top: 4em;
}


#popular-packs h2 {
	font-size: 36px;
	text-align: center;
}

#popular-packs h3 {
	text-align: center;
	color: #0066CC;
	border-bottom: 4px solid white;
	font-size: 24px;
}

#popular-packs ul {
	float: left;
	margin-top: -250px;
	width: 380px;
}


#popular-packs h4 {
	text-align: left;
	font-weight: bold;
	color: #CC0099;
	margin-right: 3em;
	margin-bottom: -2.5em;
}

#popular-packs p.pichover {
	font-size: 10px;
	margin-left: 42em;
	margin-top: -0.75em;
}

#bonneville154 {
	border-bottom: 4px dashed white;
} 

#lolo154 {
	border-bottom: 4px dashed white;
} 

#deluxe154 {
	border-bottom: 4px dashed white;
} 

#small154 {
	border-bottom: 4px dashed white;
} 

#yosemite457 {
	border-bottom: 4px dashed white;
} 

#burley457 {
	border-bottom: 4px dashed white;
} 

#deluxe457 {
	border-bottom: 4px dashed white;
} 

#small457 {
	border-bottom: 4px dashed white;
} 
/******************************************/

/*End of line gear page styling */

/*This starts the Embroidery page */
#embroidery {
	width: 310px;
	background-color: #333333;
	text-align: center;
}

#embroidery h3 {
	margin: 0;
	text-align: center;
	text-decoration: underline;
}

#embroidery h3 a {
	font-size: 20px;
}

#embroidery-images #WMWT {
	margin-left: 7em;	
}

/*******************************/

/*This is for the custom web strap page*/
#color-key {
	width: 110px;
	background-color: #333333;
	text-align: center;
}

#color-key h3 {
	margin: 0;
	text-align: center;
	text-decoration: underline;
}

#web-key {
	width: 30em;
	margin-left: 8em;
	margin-top: -9em;
}

.MC {
	background-color: #FF00FF;
}

.MC span {
	color: #000000;
}

td.MC {
	border: 2px solid white;
}

.YG {
	background-color:#0099FF;
}

.YG span {
	color: #000000;
}

td.YG {
	border: 2px solid white;
}


.YO {
	background-color: #FFFF00;
	color: #000000;
}

.YO span {
	color: #000000;
}

td.YO {
	border: 2px solid white;
}


#web-table table{
	width: 45em;
	margin-left: 0;
	border: 2px solid white;
}

#web-table td {
	color: white;
	font-size: 11px;
	font-weight: bold;
	border-width: 2px;
	text-align: center;
}

#plastic-hardware table {
	width: 45em;
	margin-left: 0;
	border: 2px solid white;
}

#plastic-hardware td {
	color: white;
	font-size: 11px;
	font-weight: bold;
	border-width: 2px;
	text-align: center;
}

#nickel-hardwear {
	width: 45em;
	margin-left: 0;
	border: 2px solid white;
}

#nickel-hardwear td {
	color: white;
	font-size: 11px;
	font-weight: bold;
	border-width: 2px;
	text-align: center;
}

#cargo-hardware {
	width: 45em;
	margin-left: 0;
	border: 2px solid white;
}

#cargo-hardware td {
	color: white;
	font-size: 11px;
	font-weight: bold;
	border-width: 2px;
	text-align: center;
}

#orderex {
	background-image: url(/hoggansproject/images/order-pad.JPG);
	background-repeat: no-repeat;
	height: 870px;
	width:auto;
}

#orderex1 {
	padding-top: 80px;
	margin-left: 3em;
	width: 30em;
}

#orderex1 h4 {
	color: #9966CC;
}

#orderex1 p #ex1 {
	color: #000000;
}

#orderex1 p span#ex1 {
	color: #000000;
	font-size: 11px;
	padding-top: 0;
}

#orderex2 {
	width: 35em;
	margin-left: 3em;
	
}

#orderex2 table {
	margin-top: 2em;
}

#orderex2 h5 {
	color: #9966CC;
	font-size: 18px;
	font-weight: bold;
}

#orderex2 p #ex2 {
	color: #000000;
	margin-left: 30px;
}

#orderex2 p span#ex2 {
	color: #000000;
	font-size: 11px;
	padding-top: 0;
	margin-left: 0;
}
/****************************/

/*This is for the color page*/
#colors table{
	width: 45em;
	margin-left: 0;
	border: 2px solid white;
}

#colors td {
	color: white;
	font-size: 12px;
	font-weight: bold;
	border-width: 2px;
	text-align: center;
	background-color: #CCCCCC;
}

h1 a {
	font-size: xx-large;
	text-decoration: none;
}

p span em {/*There is inline styling for other colors on the color page*/ 
	color: #CC0099;
	font-weight: bold;
	font-size: 13px;
}

#camo {
	width: 20px;
	margin-top: -9em;
	margin-left: 6em;
}

#blogblurb p{
	font-size: x-large;
}


/********************************/

/*This is for the tarps page*/
#flattarp {
	width: auto;
	height: auto;
	border-bottom: 4px dashed white;
	border-top: 4px dashed white;
}

#flattarp img{
	float: right;
}


#tarp225 table{
	width: 45em;
	margin-left: 0;
	border: 2px solid white;
	margin-top: 10em;
	margin-bottom: 10px;
}

#tarp225 td {
	color: white;
	font-size: 11px;
	font-weight: bold;
	border-width: 2px;
	text-align: center;
}

#rolltarp {
	width: auto;
	height: auto;
	border-bottom: 4px dashed white;
}

#rolltarp img{
	float: right;
}

#tarp226 {
	width: 25em;
}

#tarp226 table{
	width: 25em;
	margin-left: 0;
	border: 2px solid white;
	margin-top: 1em;
	margin-bottom: 10px;
}

#tarp226 td {
	color: white;
	font-size: 11px;
	font-weight: bold;
	border-width: 2px;
	text-align: center;
}

#seedtarp {
	width: auto;
	height: auto;
	border-bottom: 4px dashed white;
}

#seedtarp img{
	float: right;
}

#tarp227 {
	width: 25em;
}

#tarp227 table{
	width: 25em;
	margin-left: 0;
	border: 2px solid white;
	margin-top: 1em;
	margin-bottom: 10px;
}

#tarp227 td {
	color: white;
	font-size: 11px;
	font-weight: bold;
	border-width: 2px;
	text-align: center;
}

#tiedowns {
	width: auto;
	height: auto;
	border-bottom: 4px dashed white;
}

#tiedowns-table {
	width: 25em;
}

#tiedowns-table table{
	width: 25em;
	margin-left: 0;
	border: 2px solid white;
	margin-top: 1em;
	margin-bottom: 10px;
}

#tiedowns-table td {
	color: white;
	font-size: 11px;
	font-weight: bold;
	border-width: 2px;
	text-align: center;
}

#shockcord-table table{
	width: 25em;
	margin-left: 0;
	border: 2px solid white;
	margin-top: 1em;
	margin-bottom: 10px;
}

#shockcord-table td {
	color: white;
	font-size: 11px;
	font-weight: bold;
	border-width: 2px;
	text-align: center;
}

#shockcord-table {
	width: 25em;
}
/*********************************/

/*This is for the tents page*/
#wall-tents250 {
	width: auto;
	height: auto;
	border-bottom: 4px dashed white;
	border-top: 4px dashed white;
}

#wall-tents250 img{
	float: right;
}


#tent250 table{
	width: 45em;
	margin-left: 0;
	border: 2px solid white;
	margin-top: 10em;
	margin-bottom: 10px;
}

#tent250 td {
	color: white;
	font-size: 11px;
	font-weight: bold;
	border-width: 2px;
	text-align: center;
}

#tent275 {
	width: 25em;
}

#tent275 table{
	width: 25em;
	margin-left: 0;
	border: 2px solid white;
	margin-top: 1em;
	margin-bottom: 10px;
}

#tent275 td {
	color: white;
	font-size: 11px;
	font-weight: bold;
	border-width: 2px;
	text-align: center;
}

#rolltarp {
	width: auto;
	height: auto;
	border-bottom: 4px dashed white;
}

#rolltarp img{
	float: right;
}

#tarp226 {
	width: 25em;
}

#tarp226 table{
	width: 25em;
	margin-left: 0;
	border: 2px solid white;
	margin-top: 1em;
	margin-bottom: 10px;
}

#tarp226 td {
	color: white;
	font-size: 11px;
	font-weight: bold;
	border-width: 2px;
	text-align: center;
}

#seedtarp {
	width: auto;
	height: auto;
	border-bottom: 4px dashed white;
}

#seedtarp img{
	float: right;
}

#tarp227 {
	width: 25em;
}

#tarp227 table{
	width: 25em;
	margin-left: 0;
	border: 2px solid white;
	margin-top: 1em;
	margin-bottom: 10px;
}

#tarp227 td {
	color: white;
	font-size: 11px;
	font-weight: bold;
	border-width: 2px;
	text-align: center;
}

#tiedowns {
	width: auto;
	height: auto;
	border-bottom: 4px dashed white;
}

#tiedowns-table {
	width: 25em;
}

#tiedowns-table table{
	width: 25em;
	margin-left: 0;
	border: 2px solid white;
	margin-top: 1em;
	margin-bottom: 10px;
}

#tiedowns-table td {
	color: white;
	font-size: 11px;
	font-weight: bold;
	border-width: 2px;
	text-align: center;
}

#shockcord-table table{
	width: 25em;
	margin-left: 0;
	border: 2px solid white;
	margin-top: 1em;
	margin-bottom: 10px;
}

#shockcord-table td {
	color: white;
	font-size: 11px;
	font-weight: bold;
	border-width: 2px;
	text-align: center;
}

#shockcord-table {
	width: 25em;
}
/*********************************/

/******Goji Page************/
#goji-header {
	margin-left: 4em;
}

#got-goji {
	margin-bottom: 1em;
}

#name {
	margin-left: 33em;
	margin-top: -3em;
}

#goji-stories {
	margin-left: 33em;
	margin-top: -3em;
	border: none;
}

.goji-info {
	border: #FF0000 outset medium;
}

#goji-links img {
	margin-right: 30px;
	margin-bottom: 20px;
}

/* CSS from Dad's page that needs updating */

/*****************************************/