/*
-----------------------------------------------
Style Sheet

Site: traction.com
Author:   Andy Heintzelman    www.onezerocharlie.com / www.visual-language.com
Version:  general styles v.1 - 2007.4

NOTES: All styles are generaly setup to yellow, overridden in specific styles
----------------------------------------------- */


/*=import files
-------------------------------------------------- */
@import url(forms.css);



/* *********************************************************************************
=DOCUMENT SETUP
************************************************************************************ */

* {
font-size: 100%;
margin: 0px;
padding: 0px;
}

body {
background: #fff;/* added this 5.22.07 was #000 */
color: #605e55;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 76%;
line-height: 1.4em;
}

#header-wrap, #content-wrap, #footer-wrap {
text-align: center;
}

#header, #content {
width: 720px;
text-align: left;
margin: 0 auto;
}



/* *********************************************************************************
HEADER
************************************************************************************ */

#header-wrap {
background: #ECB730;
height: 171px;
}

#header {
background: url("../img/mst_hdr_yellow.jpg") 0 0 no-repeat;
width: 720px;
height: 171px;
}



/* *********************************************************************************
LOGO REPLACEMENT
************************************************************************************ */

#logo {
/*display: block;*/
width: 462px;
height: 80px;
text-decoration: none;
float: right;
margin: 24px 10px 0 0;
display: inline;/* corrects IE windows double bug */
}

#logo.yellow {
background: transparent url("../img/logo_yellow.jpg");
}

#logo img {
/*display: block;*/
padding-top: 80px;
height: 0;
overflow: hidden;
font: bold 60px/57px helvetica, arial, sans-serif;
color: #2ae;
}



/* *********************************************************************************
=CONTENT
************************************************************************************ */

#content-wrap {
background-color: #fff;
padding: 0;
overflow: auto; /*hidden -> use this to make scroll bars NOT appear*/
/*position: relative; ->this helps disappearing items in IE*/
min-width: 725px;/* added this 5.22.07 */
}



/*--[ glam image home ]----------------------------------------------------------------*/
#main {
float: left;
display: inline;
width: 720px;
position: relative;
}

/*--[ glam image ]----------------------------------------------------------------*/
#glam {
float: right;
display: inline;
width: 450px;/*was 490px*/
position: relative;
}

/*--[ glam text control ]----------------------------------------------------------------*/
#glam h2 {
padding-top: 20px;
}

#glam p {
margin-right: 20px;
}


#glam.full {
float: left;
display: inline;
width: 700px;/*was 490px*/
position: relative;
}


/* *********************************************************************************
=SIDEBAR
************************************************************************************ */

#sidebar {
margin-top: 20px;
}

#sidebar {
padding-left: 0;
/*border-right: 1px solid #dad7ca;*/
float: left;
display: inline;
margin-bottom: 20px;
width: 222px;/*was 200*/
}

#sidebar h2 {
padding-left: 20px;
}

#sidebar p {
padding-left: 20px;
}

/*
#sidebar #addy {
background: #fff url("../img/div_bg.jpg") top left repeat;
padding: 10px 10px 10px 20px;
margin: 0 0 20px 20px;
width: 200px;
}*/

#sidebar img {
padding-left: 20px;
}


/* *********************************************************************************
=FOOTER
************************************************************************************ */

#footer-wrap {
clear: both;
background: #000 url("../img/footer_bg.jpg") 0 0 repeat-x;
padding-top: 20px;
min-width: 725px;/* added this 5.22.07 */
}

#footer {
clear: both;
font-size: 0.9em;
line-height: 1.4em;
padding: 20px 0 0 0;
}

#footer p {
padding: 0 0 100px 0;
}


/*--[ footer link list - for links ]-----------------------------------------*/
#footlinks {
clear: both;
padding: 20px 0 0 0;
}

#footlinks li {
display: inline;
list-style-type: none;
padding-right: 15px;
}

#footlinks a {
color: #ECB730;
text-decoration: none;
}

#footlinks a:hover{
text-decoration: none;
color: #fff;
text-decoration: underline;
}

/* for active */
#footlinks #active a {
color: #fff;
text-decoration: underline;
list-style-type: none;
}


/* *********************************************************************************
=COMMON STYLES
************************************************************************************ */

h1, h2, h3, h4 {
margin-bottom: 0.6em;
font-family: "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
font-weight: normal;
}

h1 {
color: #70675c;
height: 1.4em;
line-height: 1.4em;
font-size: 2em;
font-weight: normal;
}

h1 em {
font-style: normal;
color: #e03a00;
}

h2 {
font-size: 1.4em;
color: #e03a00;
margin-bottom: 0.3em;
}

h3 {
font-size: 1.2em;
color: #e03a00;
}

p {
margin-bottom: 1em;
}

/*
em {
font-style: normal;
color: #e23b00;
}

ol {
margin: 0 0 1em 2em;
}

ul {
margin: 0 0 1em 1em;
}


ul li {
background: url(i/layout/bullet.gif) 0 0.3em no-repeat;
list-style-type: none;
margin: 0 0 0.3em 0;
padding: 0 0 0 20px;
}
*/

img {
border: none;
}

a img {
border: none;
} /* removes the default browser border */

.alignleft {
margin: 0 15px 5px 0;
float: left;
display: inline;
}
.alignright {
margin: 0 0 5px 15px;
float: right;
display: inline;
}

.clear { /* clear floated divs */
clear: both;
}

#content p {
text-align: justify;
}

#content p a:hover {
border-bottom-color :#c6c1ad;
}


/*--[ home text columns ]----------------------------------------------------------------*/
#content #col1 {
float: left;
width: 340px;/*was 320*/
}

#content #col2 {
float: left;
width: 320px;
padding-left:50px;
}

#content #col1, #col2 {
margin: 0;
}

#content #col1 p, #col2 p{
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-left: 50px;
}



/* *********************************************************************************
=LARGE FOOTER LINK BUTTONS
************************************************************************************ */


/*--[ for large buttons in footer ]----------------------------------------------------------------*/

#link-wrapper {
width: 720px;
margin: 0 auto;
padding: 30px 0 0 0;/*added this*/
}

/*--for selected projects--*/
#projects {
width: 330px;
height: 90px;
margin: 0px;
float: left;
}

#projects a{
text-indent: -9000em;
overflow: hidden;
width: 330px;
height: 90px;

text-decoration: none;
color: #fff;
float: left;
}

#projects, #projects a {
background: url("../img/projects.jpg") 0 0 no-repeat;
}

#projects a:hover {
background-position: -330px 0;
}

/*--for miracle league--*/
#miracle {
width: 330px;
height: 90px;
margin: 0px;
float: right;
}

#miracle a{
text-indent: -9000em;
overflow: hidden;
width: 330px;
height: 90px;

text-decoration: none;
color: #fff;
float: right;
}

#miracle, #miracle a {
background: url("../img/league.jpg") 0 0 no-repeat;
}

#miracle a:hover {
background-position: -330px 0;
}


/* *********************************************************************************
=PRODUCT DETAIL LINKS
************************************************************************************ */

/*
=PRODUCT SECONDARY NAVIGATION
[ for product detail links at bottom of product pages ] ----------------------------- */

#specs {
font-size: 12px;
line-height: 25px;
padding: 0;
margin: 10px 0 0 20px;
width: 90%;
color: #333;
font-weight: normal;
vertical-align: text-top;
font-family: verdana, arial, helvetica, sans-serif;
text-decoration: none;

border-bottom: 1px dashed #e03a00;
border-top: 1px dashed #e03a00;
}

#specs li {
list-style: none;
margin: 0;
border-bottom: 1px dashed #fff;
background: url("../img/icns/plus_ico_blue.gif") no-repeat center left;
}

#specs li a:link,
#specs li a:visited {
color: #333;
text-decoration: none;
display: block;
padding-left: 20px;
}

/* ----------- */
#specs strike {
color: #333;
text-decoration: line-through;
display: block;
padding-left: 20px;
}
/* ----------- */

#specs li a:active,
#specs li a:hover {
color: #1AD2ED;
text-decoration: none;
background: url("../img/icns/plus_ico_blue.gif") no-repeat center left;
}

/* for active */
#specs #active a {
color: #1AD2ED;
text-decoration: underline;
background: url("../img/icns/plus_ico_blue.gif") no-repeat center left;
}

/* for photo gallery over */

#specs li.photo {
list-style: none;
margin: 0;
border-bottom: 1px dashed #fff;
background: url("../img/icns/photo_ico.gif") no-repeat center left;
}

#specs li.photo a:active,
#specs li.photo a:hover {
color: #1AD2ED;
text-decoration: none;
background: url("../img/icns/photo_ico.gif") no-repeat center left;
}


/* *********************************************************************************
=SELECTED PROJECTS
************************************************************************************ */


/*--[ selected projects page columns ]--------------------------------------------------*/
.proj {
margin: 0 0 20px 0;
}

.proj ul {
margin: 0;
}


.proj ul li {
list-style-type: none;
margin: 0;
padding: 0;
}

/*-------------------------*/
#projcol1 {
float: left;
width: 200px;/*was 220*/
padding: 0 20px 0 0;/*was just padding-top: 0;*/
}

#projcol2 {
float: left;
width: 220px;
padding-left:0;
padding-top: 0;
}

#projcol1, #projcol2 {
margin: 0;
}

#projcol1 p, #projcol2 p{
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-left: 50px;
}

#projcol1 a, #projcol2 a {
color: #ffcc00;
text-decoration: none;
}

#projcol1 a:hover, #projcol2 a:hover {
text-decoration: none;
color: #666;
text-decoration: underline;
}



/* *********************************************************************************
=ORNAMENTAL ITEMS
************************************************************************************ */

/*[ quote box ] ------------------------------------------ */
.quote {
background: #FDFCF2 url("../img/icns/spoke.gif") center no-repeat;
background-position: 15px 7px; /* x-pos y-pos was 15px 50%;*/
text-align: left;
padding: 5px 20px 5px 65px;
border-top: 1px solid #F9F7DC;
border-bottom: 1px solid #F9F7DC;
margin: 20px 0 10px 0;/* was 50px 0 0 0 - added 10px bottom*/
}




/* *********************************************************************************
=BROCHURE DOWNLOADS
************************************************************************************ */

/*
=DOWNLOAD LINKS
[ use these id's [ tru, pro, power, league ] ------------------------------------------ */

#download-wrapper {
margin: 0 auto;
margin-left: 20px;
padding: 300px 0 100px 0;
/*
position: absolute;
top: 60%;
*/
}

#sidebar #tru {
width: 199px;
height: 96px;
margin: 0px;
}

#sidebar #tru a, #sidebar #pro a, #sidebar #power a, #sidebar #league a, #sidebar #maxx a, #sidebar #controlxt a,
#sidebar #powerstone a,#sidebar #powerturf a {
text-indent: -9000em;
overflow: hidden;
width: 199px;
height: 96px;
text-decoration: none;
color: #fff;
float: left;
}

#sidebar #tru, #tru a {
background: url("../img/prods/sport_badge.jpg") 0 0 no-repeat;
}

#sidebar #power, #power a {
background: url("../img/prods/dek_badge.jpg") 0 0 no-repeat;
}

#sidebar #pro, #pro a {
background: url("../img/prods/xx_badge.jpg") 0 0 no-repeat;
}

#sidebar #league, #league a {
background: url("../img/prods/miracle_badge.jpg") 0 0 no-repeat;
}

#sidebar #maxx, #maxx a {
background: url("../img/prods/max_badge.jpg") 0 0 no-repeat;
}

#sidebar #controlxt, #controlxt a {
background: url("../img/prods/control_badge.jpg") 0 0 no-repeat;
}

#sidebar #powerstone, #powerstone a {
background: url("../img/prods/stone_badge.jpg") 0 0 no-repeat;
}

#sidebar #powerturf, #powerturf a {
background: url("../img/prods/turf_badge.jpg") 0 0 no-repeat;
}

#sidebar #tru a:hover, #sidebar #pro a:hover,
#sidebar #power a:hover, #sidebar #league a:hover,
#sidebar #maxx a:hover, #sidebar #controlxt a:hover
,#sidebar #powerstone a:hover, #sidebar #powerturf a:hover {
background-position: -199px 0;
}


/* *********************************************************************************
=COACHES CORNER BADGE
************************************************************************************ */

#coach-wrapper {
margin: 0 auto;
margin-left: 20px;
padding: 120px 0 0 0;
/*
position: absolute;
top: 60%;
*/
}

#sidebar #coach {
width: 199px;
height: 96px;
margin: 0px;
}

#sidebar #coach a {
text-indent: -9000em;
overflow: hidden;
width: 199px;
height: 96px;
text-decoration: none;
color: #fff;
float: left;
}

#sidebar #coach, #coach a {
background: url("../img/prods/coaches_corner_badge.jpg") 0 0 no-repeat;
}

#sidebar #coach a:hover {
background-position: -199px 0;
}

/* *********************************************************************************
=POST NEWS BADGE
************************************************************************************ */

#post-wrapper {
margin: 0 auto;
margin-left: 0px;
padding: 0px 0 0 0;
/*
position: absolute;
top: 60%;
*/
}

#sidebar #post{
width: 199px;
height: 96px;
margin: 0px;
}

#sidebar #post a{
text-indent: -9000em;
overflow: hidden;
width: 199px;
height: 96px;
text-decoration: none;
color: #fff;
float: left;
}

#sidebar #post, #post a {
background: url("../img/post_news_badge.jpg") 0 0 no-repeat;
}

#sidebar #post a:hover{
background-position: -199px 0;
}



/* *********************************************************************************
=PRODUCT TABLES
************************************************************************************ */


/*
=PRODUCT SPECS
[ for product specifications ] ------------------------------------------ */

/* ----- [ table setups ] ----- */
table.sport,
table.dek,
table.xx,
table.maxx,
table.controller,
powerstone {
border-spacing: 0px;
border-collapse: collapse;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
width: 450px;
}

table.sport th,
table.dek th,
table.xx th,
table.maxx th,
table.controller th,
table.powerstone th,
table.powerstone th {
text-align: left;
font-weight: normal;
padding: 0.5em 0.5em;
border-bottom: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
}

table.sport td,
table.dek td,
table.xx td,
table.maxx td,
table.controller td,
table.powerstone td {
text-align: left;
border-bottom: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
padding: 0.5em 0.5em;
}

table.sport thead th,
table.dek thead th,
table.xx thead th,
table.maxx thead th,
table.controller thead th,
table.powerstone thead th{
color: #FFFFFF;
text-align: left;
font-weight: bold;
}

table.sport th.Corner,
table.dek th.Corner,
table.xx th.Corner,
table.maxx th.Corner,
table.controller th.Corner,
table.powerstone th.Corner{
text-align: left;
}

/* ----- [ table background colors ] ----- */

table.sport th, table.sport td {
background: #FDF0CD;
}

table.sport thead th {
background: #ECB730;
}


table.dek th, table.dek td {
background: #CFE8DC;
}

table.dek thead th {
background: #57AF88;
}


table.xx th, table.xx td {
background: #B8ECFF;
}

table.xx thead th {
background: #00ACEC;
}

table.maxx th, table.maxx td {
background: #ffdcc8;
}

table.maxx thead th {
background: #f46f21;
}

table.controller th, table.controller td {
background: #f7cfc9;
}

table.controller thead th {
background: #ec3e24;
}

table.powerstone thead th {
background: #899fb3;
}

table.powerstone th, table.powerstone td {
background: #e1e5e9;
}


/*
=PRODUCT FEATURES
[ for product highlights and features ] ------------------------------------------ */

table.feature {
border-spacing: 0px;
border-collapse: collapse;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 440px;
margin: 20px 0 0 0;
}

table.feature th {
text-align: left;
font-weight: normal;
padding: 0;
border-bottom: 5px solid #FFFFFF;
border-right: 5px solid #FFFFFF;
background: #fff;
}

table.feature td {
text-align: left;
border-bottom: 5px solid #FFFFFF;
border-right: 5px solid #FFFFFF;
padding: 0.5em 0;
background: #fff;
}

table.feature thead th {
background: #2191D0;
color: #FFFFFF;
text-align: left;
}

table.feature th.Corner {
text-align: left;
}



/*
=PRODUCT COLOR SAMPLES
[ for product available colors ] ------------------------------------------ */

table.colors {
border-spacing: 0px;
border-collapse: collapse;
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 440px;
margin: 20px 0 0 0;
}

table.colors th {
text-align: left;
font-weight: normal;
padding: 0;
border-bottom: 5px solid #FFFFFF;
border-right: 5px solid #FFFFFF;
background: #fff;
}

table.colors img {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}

table.colors td {
font-size: 80%;
font-weight: bold;
text-align: left;
border-bottom: 5px solid #FFFFFF;
border-right: 5px solid #FFFFFF;
padding: 0 0 5em 0;
background: #fff;
}

table.colors thead th {
background: #2191D0;
color: #FFFFFF;
text-align: left;
}

table.colors th.Corner {
text-align: left;
}


/*
=PHOTO GALLERY
[ for photo galleries ] ------------------------------------------ */

table.gallery {
border-spacing: 0px;
border-collapse: collapse;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 720px;
margin: 20px 0 0 0;
}

table.gallery th {
text-align: left;
font-weight: normal;
padding: 0;
margin:0;
border-bottom: 5px solid #FFFFFF;
border-right: 5px solid #FFFFFF;
background: #fff;
}

table.gallery td {
text-align: left;
border-bottom: 5px solid #FFFFFF;
border-right: 5px solid #FFFFFF;
padding: 0.5em 0;
background: #fff;
}

table.gallery thead th {
background: #2191D0;
color: #FFFFFF;
text-align: left;
}

table.gallery th.Corner {
text-align: left;
}


/*******************************************************************
PHOTO GALLERY COLUMNS
******************************************************************/

.gallery1 {
float: left;
width: 234px;
margin: 20px 9px 30px 0px;
padding: 0 0 0 0;
}

.gallery {
float: left;
width: 234px;
margin: 20px 0 30px 0px;
padding: 0 0 0 0;
}

.gallery b {
font-size: 80%;
line-height: 130%;
color: #333;
width: 180px;
}

/*******************************************************************
LIGHTBOX CONTROL
******************************************************************/

#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}

#lightbox a img {
border: none;
}

#outerImageContainer {
position: relative;
background-color: black;
width: 250px;
height: 250px;
margin: 0 auto;
}

#imageContainer {
padding: 10px;
}

#loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}

#hoverNav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}

#imageContainer>#hoverNav {
left: 0;
}

#hoverNav a {
outline: none;
}

#prevLink, #nextLink  { background: url("../img/blank.gif") no-repeat; display: block; width: 49%; height: 100% }

#prevLink {
left: 0;
float: left;
}

#nextLink {
right: 0;
float: right;
}

#prevLink:hover, #prevLink:visited:hover  { background: url("../img/prevlabel.gif") no-repeat left 15% }

#nextLink:hover, #nextLink:visited:hover  { background: url("../img/nextlabel.gif") no-repeat right 15% }

#imageDataContainer{
font: 10px/1.4em Verdana, Helvetica, sans-serif;
background-color: black;
margin: 0 auto;
overflow: auto;
width: 100%	
}

#imageData {
padding:0 10px;
color: #666;
}

#imageData #imageDetails {
width: 70%;
float: left;
text-align: left;
}

#imageData #caption {
font-weight: bold;
}

#imageData #numberDisplay {
display: block;
clear: left;
padding-bottom: 1.0em;
}

#imageData #bottomNavClose {
width: 66px;
float: right;
padding-bottom: 0.7em;
}

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}



/* *********************************************************************************
=SITEMAP 
************************************************************************************ */

#map {
line-height: 30px;
padding: 0;
margin: 0 0 20px 0; /*was 0*/
width: 100%;
font-weight: normal;
vertical-align: text-top;
text-decoration: none;
}

#map li {
list-style: none;
margin: 0;
border-bottom: 1px dashed #fff;
background: url("../img/icns/plus_ico_blue.gif") no-repeat 0px 50%;
}

#map li a:link,
#map li a:visited {
color: #333;
text-decoration: none;
display: block;
padding-left: 20px;
}

/* ----------- */
#map strike {
color: #333;
text-decoration: line-through;
display: block;
padding-left: 20px;
}
/* ----------- */

#map li a:active,
#map li a:hover {
color: #333;
text-decoration: none;
background: url("../img/icns/plus_ico_blue_over.gif") no-repeat 0px 50%;
background-color: #FDF0CD;
width: 90%;
}

/*photo gallery*/
#map li.photo {
list-style: none;
margin: 0;
border-bottom: 1px dashed #fff;
background: url("../img/icns/photo_ico.gif") no-repeat 0px 50%;
}

#map li.photo a:link,
#map li.photo a:visited {
color: #333;
text-decoration: none;
display: block;
padding-left: 20px;
}

#map li.photo a:active,
#map li.photo a:hover {
color: #333;
text-decoration: none;
background: url("../img/icns/photo_ico_over.gif") no-repeat 0px 50%;
background-color: #FDF0CD;
width: 90%;
}


#map h3 {
font-weight: normal;
margin: 0;
padding: 4px;
vertical-align: text-top;
border-top: #ccc 1px solid;
border-bottom: #ccc 1px solid;
width: 93%;
}

#map h3 .small {
font-weight: normal;
color: #999;
font-size: 10px;
font-style: italic;
}

#map .small {
font-weight: normal;
color: #999;
font-size: 10px;
font-style: italic;
}


/*******************************************************************
=RETURN TO PAGE
******************************************************************/
.goback {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
font-weight: normal;
vertical-align: text-top;
text-decoration: none;
padding: 0;
margin: 20px 0 0 0;
}
	
.goback li {
list-style-type: none;
}
		
.goback a:link, .goback a:visited {
color: #000;
text-decoration: none;
list-style-type: none;
padding-left: 15px;
background: url("../img/icns/return_icn.gif") no-repeat 0 50%;
}
		
.goback a:active, .goback a:hover {
color: #999;
text-decoration: none;
background: url("../img/icns/return_icn_over.gif") no-repeat 0 50%;
}
/*
.goback .arrow {
background: url("../img/icns/return_icn.gif") no-repeat 0 50%;
}
*/