/* CSS Document */

/* All Containers Start Here ----------------------------------------------------------------------------------------------------- */

/* page container that contains EVERYTHING ...well use this to make the page margins adjust relative to the browser size..oh yes!*/
#container{
position:relative;
background:#FFFFFF;
width:900px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding:0px;
font-size:10pt;
font-family:Arial, Helvetica, sans-serif;
}

/* this contains the banner and navigation...what a kick-ass banner, if i do say so myself! */
#headcontainer{
width:900px;
height:162px;
margin-left:auto;
margin-right:auto;
margin-bottom:auto;
margin-top:0px;
padding:0px;
background-image: url("ftwebheader.jpg"); 
background-repeat: no-repeat;
}

/* main horizontal navigation bar goes here--can you dig that! */
#navcontainer{
	position:absolute;
	top:113px;
	left:155px;
	width:568px;
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	padding:0px;
	display:inline;
}

/* div for view cart button goes here */
#viewcart{
	position:absolute;
	top:116px;
	left:740px;
	width:80px;
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	padding:0px;
	display:inline;
}

/* div for page content right below the headcontainer...contains column layout */
#content{
position:relative;
padding:10px 0px 0px 0px;
text-align:justify;
margin:0px 0px 0px 0px;
font-size:normal;
font-family:Arial, Helvetica, sans-serif;
color:#330066;
}

/* these create the various layout columns--has to go ABOVE footer */
/* col1 to col3 is for main index page...3 columns with middle column being the largest*/
div.col1{
float:left;
display:inline;
width:23%;
padding:5px 5px 0px 5px;
text-align:justify;
}
div.col2{
float:left;
display:inline;
width:51%;
padding:5px 5px 0px 5px;
text-align:justify;
}
div.col3{
float:left;
display:inline;
width:22%;
padding:5px 5px 0px 5px;
text-align:justify;
}
/* col4- to col 6 is for the supplies page...3 columns of roughly equal size */
div.col4{
float:left;
display:inline;
width:37%;
padding:5px 5px 0px 5px;
text-align:justify;
}
div.col5{
float:left;
display:inline;
width:37%;
padding:5px 5px 0px 5px;
text-align:justify;
}
div.col6{
float:left;
display:inline;
width:22%;
padding:5px 5px 0px 5px;
text-align:justify;
}
/* col7 to col8 ...specials page...2 columns with 1 for nav and 2 for content */
div.col7{
float:left;
display:inline;
width:35%;
padding:5px 5px 0px 5px;
text-align:justify;
}
div.col8{
float:left;
display:inline;
width:60%;
padding:5px 5px 0px 5px;
text-align:justify;
}

/* this creates the footer */
.hidden {
visibility:hidden;
clear:both;
} 
#footcontainer{
width:900px;
height:55px;
position:relative;
padding:15px 0px 0px 0px;
margin-top:0px;
background-image: url("ftwebfooter.jpg"); 
background-repeat: no-repeat;
}
/* End Containers */

/* All Navigation Formatting Starts Here ------------------------------------------------------------------------------------------- */

/* main navigation style starts here...define ul margins-top/right/bottom/left as 0px so theres no indents on either firefox or IE */
ul#nav { position:absolute; top:0px; left:0px; padding:0px; background:url("ftwebmainmenu.jpg"); margin: 0px 0px 0px 0px; }
ul#nav li { float:left; list-style-type:none; display:inline; }
ul#nav li a { height:28px; display:block; position:absolute; top:0px; text-indent:-9999px; outline:none }

li#navHome a, li#navSupp a, li#navPromo a, li#navEvent a, li#navAbout a,  li#navClear a, li#navLink a { background:url("ftwebmainmenu.jpg") }

li#navHome a 					{ background-position:0 0; width:59px; left:0px}
li#navHome a:hover				{ background-position:0 -28px }
body#pageHome li#navHome a 		{ background-position:0 -56px }

li#navSupp a 					{ background-position:-59px 0; width:84px; left:59px }
li#navSupp a:hover				{ background-position:-59px -28px }
body#pageSupp li#navSupp a 		{ background-position:-59px -56px }

li#navPromo a 					{ background-position:-143px 0; width:111px; left:143px }
li#navPromo a:hover				{ background-position:-143px -28px }
body#pagePromo li#navPromo a 	{ background-position:-143px -56px }

li#navEvent a 					{ background-position:-254px 0; width:72px; left:254px }
li#navEvent a:hover				{ background-position:-254px -28px }
body#pageEvent li#navEvent a 	{ background-position:-254px -56px }

li#navAbout a 					{ background-position:-326px 0; width:86px; left:326px }
li#navAbout a:hover				{ background-position:-326px -28px }
body#pageAbout li#navAbout a 	{ background-position:-326px -56px }

li#navClear a 					{ background-position:-412px 0; width:101px; left:412px }
li#navClear a:hover				{ background-position:-412px -28px }
body#pageClear li#navClear a 	{ background-position:-412px -56px }

li#navLink a 					{ background-position:-513px 0; width:55px; left:513px}
li#navLink a:hover				{ background-position:-513px -28px }
body#pageLink li#navLink a 		{ background-position:-513px -56px }

/*
measurements for the navigation menu [id = nav] image replacement:
	distance (in pixels) from the top to the...
		initial state = 0
		rollover state = 28
		selected state = 56
	distance (in pixels) from the far left to the...
		home button = 0
		supplies button = 59
		promotions = 143
		events = 254
		about us = 326
		clearance = 412
		links = 513
	width (in pixels) of the...
		home button = 59
		supplies button = 84
		promotions button = 111
		events button = 72
		about us button = 86
		clearance = 101
		links = 55
end measurements
*/
/* main navigation style ends here */

/* this is a common property for all lists...well at least the minor navigation menus...on the site: stick this as a class for ul
   .navlist usually paired with div id="navcat" */
.navlist {
text-transform:uppercase;
padding:0px;
margin:0px;
}

/* left menu style starts here */
#navcat ul { 
list-style-type: none;
text-align: left; 
}
#navcat ul li a {
padding-left: 12px;
text-align: left;
text-decoration: none;
color: #330066;
}
#navcat a:hover { 
background: url("bulleta.png") left center no-repeat;
color: #996699;
}

/* footer navigation style starts here */
.pipewrap {
font-size:.8em;
display:inline;
text-align: center;
width: 850px;
}
.pipelist {
margin: 0 auto 1em;
overflow: hidden;
width: 350px;
}
.pipelist ul {
margin: 0;
padding: 0;
}
.pipelist li {
border-left: 1px solid #996699;
float: left;
line-height: 1.2em;
margin: 0 .5em 0 -.5em;
padding: 0 .5em 0 .5em;
white-space: nowrap;
}
.pipelist a {
list-style-type: none;
text-decoration: none;
color:#996699;
text-transform:uppercase;
}
.pipelist a:hover {
color:#330066;
} 
/* End of Menu Navigation */

/* General Formatting Starts Here -------------------------------------------------------- */

body{
color:#330066;
}

/* styling hyperlinks: important that the order should go link-visited-hover...in that order! */
/* generic content links */
.genlink:link, .genlink:visited{
text-decoration:none;
color:#0000ff;
border-bottom:1px dotted #0000ff;
}
.genlink:hover, .genlink:active{
color:#ff0000;
border-bottom-color:#ff0000;
}
/* anchor links ...used with "back to top" type of anchors */
.ankorlink:link, .ankorlink:visited{
text-decoration:none;
color:#ff0000;
font-size:.70em;
font:Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
.ankorlink:hover, .ankorlink:active{
border-bottom:1px solid #ff0000;
}

/* generic lists */
li.genlist {
list-style-type:square;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 40px;
}

/* box1 */
.box1{
border:0px;
padding:0px;
}
.box1head{
font-size:1em;
text-transform: uppercase;
color:#ffffff;
background:#330066 url("box1corner.jpg") left top no-repeat;
padding-left:10px;
text-align:center;
}
.box1body{
font-size:.90em;
color:#330066;
background:#ffffff url("box1fade.jpg") left top repeat-x;
padding:5px 10px 5px 10px;
margin:0px 0px 0px 0px 0px;
}

/* box for images */
.box2{
border:1px solid #330066;
padding:0px;
margin:0px;
}
.box4image{
text-align:center;
padding:5px 10px 5px 10px;
margin:0px 0px 0px 0px;
}

/* box for text */
.box3{
text-align:center;
padding:5px 5px 5px 5px;
margin:0px;

}
#box4txt{
background:#ffffff url("box1fade.jpg") left top repeat-x;
width:425px;
text-align:justify;
padding:5px 10px 5px 10px;
margin-right:auto;
margin-left:auto;
}
/* midcolumn splash */
.midcolsplash{
padding:0px 0px 0px 20px;
}

/* text formatting */
.boldly{
color:#ff9933;
font-weight:bold;
text-transform:uppercase;
}
.dropcap {
float:left;
margin:1px;
padding:1px;
background-color:#cc99cc;
color:#ffffff;
line-height:1em;
font-size:3.3em;
font-weight:bold;
}
.box4txt{
text-align:justify;
padding:10px 10px 5px 10px;
margin:0px 0px 0px 0px;
}
/* paragraph headers */
.pheader{
font-style:italic;
font-weight:bold;
font-size:1em;
}
/* formatting for product items */
div.producbox {
width:550px;
margin:0px;
padding:0px;
}
div.producitem {
float:left;
text-align:justify;
padding:5px 10px 0px 10px;
border-top:1px solid #330066;
width:500px;
}
.producname {
background:#cc99cc;
font-size:1.2em;
text-transform:uppercase;
font-weight:bold;
padding-left:2px;
padding-right:2px;
}
div.producitem img.produc {
float:right;
height:138px;
width:146px;
padding:3px;
margin:5px;
border:1px solid #cc99cc;
}
div.producbuy {
float:left;
text-align:justify;
padding:0px 10px 0px 10px;
width:300px;
font-weight:bold;
color:#330066;
}

/* call-out box */
.calloutcontain {
	width:400px;
	padding:0px 0px 0px 40px;
}
.calloutBox {
  background-color: #cc99cc;
  color: #330066;
  width: 375px;
}
.portrait {
  border-bottom: 10px solid #FFF;
  border-left: none;
  border-right: none;
  border-top: 10px solid #FFF;
  margin: 0 30px;
}
.portrait p {
  margin: 0 -20px;
  padding: 1em;
  background-color: #FFF;
  color: #330066;
  font-style: italic;
  text-align: center;
  font-size:.9em;
}
.portrait p.calloutcite{
font-style:normal;
color:#cc99cc;
font-size:.8em;
text-align:right;
}

/* format for addy */
.addy{
padding:5px 0px 5px 5px;
}
.addy p{
text-align:left;
}

/* format for horizontal rule */
hr {
border: 0;
color: #cc99cc;
background-color: #cc99cc;
height: 1px;
width: 90%;
}

/* format contact form */
#contform {
padding:10px;
}
#contform input{
color:#330066;
background: #ffccff;
border: 1px solid #330066;
}
#contform textarea{
color:#330066;
background: #ffccff;
border: 1px solid #330066;
}
#contform fieldset{
border: 1px solid #330066;
width: 100%;
padding:0px;
}
#contform legend{
text-transform:uppercase;
color: #ffffff;
background: #cc99cc;
border: 1px solid #330066;
margin-left:1em;
padding: 2px 6px;
}
#contform fieldset ul{
padding: 1em 1em 0 1em; 
list-style: none;
}
#contform fieldset li {  
padding-bottom: 1em;
} 
#contform label {  
display: block;
}
#contform label em {  
display: block;  
color: #ff0000;  
font-size: 65%;  
font-style: normal;  
text-transform: uppercase;
}
#contform p{
text-transform:uppercase;
font-size:1em;
color:#ff0000;
text-align:center;
}