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

	CSS on Sails
	Title: Website
	Author: XHTMLized
	Date: March 2008 

***********************************************************************************************

		
	1. BASE
			1.1 Reset
			1.2 Default styles
			1.3 Basic styles
	
	2. LAYOUT
			2.1 Header
			2.2 Content
			2.3 Sidebar
			2.4 Footer
		

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


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

/* 1.1	Reset
-----------------------------------------------------------------------------------------------*/	


	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	
	body {
		line-height: 1;
	}
	
	ol, ul {
		list-style: none;
	}
	
	blockquote, q {
		quotes: none;
	}
	
	blockquote:before, 
	blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	
	:focus {
		outline: 0;
	}
	
	ins {
		text-decoration: none;
	}
	
	del {
		text-decoration: line-through;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}


/* 1.2	Default styles
-----------------------------------------------------------------------------------------------*/	

	body {
		background: #fff;
		font: 62.5% Arial, Helvetica, Verdana, sans-serif;
		text-align: center;
		}

	hr { 
		display: none;
	}
			
	strong {
		font-weight: bold;
	}
			
	em {
		font-style: italic;
	}
		
	abbr, acronym {
		border-bottom: 1px dotted #999; 
		cursor: help;
	}
	
	input, textarea, select {
		font: 1.2em Arial, Helvetica, sans-serif;
	}

	a {
		color: #069;
		text-decoration: none;
	}
	
	a:hover, 
	a:active {
		color: #000;
		text-decoration: underline;
	}
	

/* 1.3	Basic styles
-----------------------------------------------------------------------------------------------*/	

	.hide {
		display: none;
	}
	

/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	
	.container {
		width: 895px;
		position: relative;
		margin: 0 auto;
		text-align: left;
	}
	
	#header {
    height: 200px;
  }
	
	/* Default (two column layout) */
	
	#content {
		width: 630px; 
		float: right;
    margin-top: 10px;
	}
		
	#sidebar {
		width: 245px;
		float: left; 
	}
	
	#footer {
		clear: both;
	}
  
 	/* Three column layout (three column layout) */
		
	body.three-column #content {
		width: 587px;
		float: left; 
	}
		
	body.three-column #main-content {
		width: 280px;
		float: right;
    border-left: 2px solid #e1e1e1;
    padding-left: 13px;
	}
		
	body.three-column #secondary-content {
		width: 280px;
		float: left; 
	}

	body.three-column #sidebar {
		width: 280px;
		float: right; 
    border-left: 2px solid #e1e1e1;
    padding-left: 13px;
    margin-top: 10px;
	}
		

/* 2.1	Header
-----------------------------------------------------------------------------------------------*/	

	#header h1, 
	#header h1 span,
	#header .logo a,
	#header .logo span {
		display: block;
		width: 895px;
		height: 130px;
		overflow: hidden;
		cursor: pointer;
	}
	
	#header h1,
	#header .logo {
		position: absolute;
		top: 0;
		left: 0;
	}
		
	#header h1 span,
	#header .logo span {	
		position: absolute; 
		top: 0;
		left: 0;
		z-index: 10;
		background: url(../images/logo.jpg) no-repeat;
	}
	
	#accessibility-links {
		position: absolute;
		left: -1000em;
		text-align: left;
	}
	
  #topnav {
    position: absolute;
    z-index: 11;
    height: 35px;
    margin-top: 123px;
    right: 0;
  }	
    #topnav ul {
      float:right;
    }
    #topnav li {
      display: inline;
      float:left;
      font-size: 1.3em;
      font-weight: bold;
      margin: 8px 0 0 0;
    }
    #topnav li a {
      padding: 0 10px 0 20px;
      background: transparent url(../images/dot_yellow_s.jpg) no-repeat -2px -6px;
      color: #666666;
      text-decoration: none;
    }
    #topnav li.about a {
      background-image: url(../images/dot_green_s.jpg);
    }
    #topnav li.contact a {
      background-image: url(../images/dot_blue_s.jpg);
    }
    
    #topnav li a:hover {
      background-position: -2px -25px;
    }

  #navigation {
    position: relative;
    width: 895px;
  }	

/* 2.2	Content
-----------------------------------------------------------------------------------------------*/	
  #content {
  }
  .entry {
    font-size: 1.2em;
    line-height: 2.0em;
  }

  .entry h2 {
    color: #003366;
    font-size: 1.5em;
    padding: 10px 0 10px 0;
  }
  .entry h2 {
    color: #003366;
    font-size: 1.3em;
    padding: 10px 0 10px 0;
  }

  .entry p {
    margin-bottom: 1.0em;
  }
  
  .entry ul {list-style: disc; margin: 0 0 0.75em 20px;}
  .entry ol {list-style: decimal; margin: 0 0 0.75em 25px;}
  
  .entry img.alignright {
    float:right;
    margin: 0 0 10px 10px;
  }
  .entry img.alignleft {
    float:left;
    margin: 0 10px 10px 0;
  }

  .entry img.aligncenter {
    display: inline;
    margin: 0 10px 10px 10px;
  }
  
/* 2.3	Sidebar
-----------------------------------------------------------------------------------------------*/	

  #sidebar {
    padding-top: 1px;
  }
  
  #sidebar li {
    border-bottom: 1px solid #DDD;
    font-size: 1.25em;
    font-weight: bold;
  }
  #sidebar li a {
    padding-left: 20px;
    background: transparent url(../images/dot_blue_s.jpg) no-repeat -3px 0px;
    color: #333;
    text-decoration: none;
    height: 26px;
    line-height: 26px;
    display: block;
  }
  #sidebar li a:hover {
    background-position: -3px -20px;
    color: #000;
  }
  
  #sidebar ul.eco-printshield li a {
    background-image: url(../images/dot_pink_s.jpg);
  }
  #sidebar ul.printshield li a {
    background-image: url(../images/dot_green_s.jpg);
  }
  #sidebar ul.embelishing li a {
    background-image: url(../images/dot_blue_s.jpg);
  }
  #sidebar ul.stretch li a {
    background-image: url(../images/dot_yellow_s.jpg);
  }

  #sidebar ul li.subtitle a {
    background-image: none;
    padding-left: 7px;
    text-transform: uppercase;
    color: #666;
  }
  
  
  
/* 2.4	Footer
-----------------------------------------------------------------------------------------------*/	
  #footer {
    padding-top: 40px;
    text-align: center;
    font-size: 1.2em;
    letter-spacing: 1px;
  }


/* 2.5	Navigation
-----------------------------------------------------------------------------------------------*/	
	#nav {width: 895px; margin:0; font-size: 1.6em; font-weight: bold; 
      padding:0; position: absolute; top: 158px; left:0; border-top: 1px solid #CCC; text-align: center;}
		#nav ul { overflow:hidden; display:block; border-bottom: 1px solid #CCC; 
        margin:0 auto; text-align: left; padding-left: 15px;  height: 30px;}
    #nav ul ul {border:0; padding-left: 0px; height: auto;}
		#nav li{float:left;display:block;}
			#nav li a {display:block;text-decoration:none;text-align:left;line-height:30px;letter-spacing:0px;
            color:#333333;
            padding: 0 10px 0 25px; margin-right: 10px;
            background: transparent url(../images/dot_green.png) no-repeat 0px 1px;
      }				
			#nav li a span{ display:block;padding:5px 13px;color:#666; font-weight:bold; position:relative; }
			#nav li a:hover span,
			#nav li a:hover,
			#nav li.active a,
			#nav li.active a span { color: #333333; background-position: 0 -29px;}
      #nav li li a:hover {background-position: 0 -1px;}
			#nav li.active a:hover{ margin-left:0px;;}
			#nav li.active a:hover span{ margin:0 }
			#nav li a:hover{ margin-left: 0;background-color: #F5F5EB }				
			#nav li.active{ margin-left:0}
			#nav li a:hover span{margin-left: 0px }
			#nav li ul li:hover, #nav li.sfhover ul li.sfhover {background:#F5F5EB;}

		#nav li ul { /* second-level lists */
			position: absolute;	z-index: 100;	background: #CCCC99;	width: 160px;
			left: -999em; /* using left instead of display to hide menus because display: */
			top: 30px; clear:both;
		}
    
    
    #nav li.eco-printshield {width: 270px;}
    #nav li.eco-printshield ul, #nav li.eco-printshield ul a {width: 260px;}
    #nav li.eco-printshield li a {background-image: url(../images/dot_pink_s.png)}
    #nav li.eco-printshield a {background-image: url(../images/dot_pink.jpg)}
    #nav li.printshield {width: 250px;}
    #nav li.printshield ul, #nav li.printshield ul a {width: 240px;}
    #nav li.printshield li a {background-image: url(../images/dot_green_s.png)}
    #nav li.printshield a {background-image: url(../images/dot_green.jpg)}
    #nav li.embelishing {width: 180px;}
    #nav li.embelishing ul, #nav li.embelishing ul a {width: 170px;}
    #nav li.embelishing li a {background-image: url(../images/dot_blue_s.png)}
    #nav li.embelishing a {background-image: url(../images/dot_blue.jpg)}
    #nav li.stretch {width: 180px;}
    #nav li.stretch ul, #nav li.stretch ul a {width: 170px;}
    #nav li.stretch li a {background-image: url(../images/dot_yellow_s.png)}
    #nav li.stretch a {background-image: url(../images/dot_yellow.jpg)}



		#nav li ul li { /* all list items */
			padding-right: 0px;
			/*width: 120px; /* width needed or else Opera goes nuts */
		}

		#nav li ul:hover { /* second-level lists */
			position: absolute; 
			left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
		}
		#nav li ul a { /* second-level lists */
			display: block;	overflow: hidden;
      line-height: 26px;	height: 26px;	padding: 0 5px 0 25px; text-align: left;
			text-decoration: none; color:#333;
      font-size: 12px; 
      font-weight: bold;	
      background-position: 0 -1px;
		}

		#nav li ul a:hover { /* second-level lists */
			display: block;	text-align: left;	text-decoration: none; color: #000;	margin:0;	
      background-color:#CC9966;

    }
    /* third-and-above-level lists */
  	#nav li ul ul { 
				margin: 0 0 0 0px;
			}
		#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, 
		#nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul { left: -999em; } 

		#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, 
		#nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul { left: auto; } 

    #nav li li.subtitle a {text-transform: uppercase; background-image: none; font-weight: bold; padding-left: 10px;
      font-size: 14px; color: #000;
    )