/* A container should group all your columns. */
.container {width: 959px;margin: 0 auto;}

/* Use this class on any div.span / container to see the grid. */
.showgrid { background: url(../v02/css/src/grid.png); }

/* Body margin for a sensile default look. */
body {margin:0;}


/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14 {float:left;margin-right: 7px;}

/* The last column in a row needs this class. */
div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1  { width: 62px;}
.span-2  { width: 131px;}
.span-3  { width: 200px;}
.span-4  { width: 269px;}
.span-5  { width: 338px;}
.span-6  { width: 407px;}
.span-7  { width: 476px;}
.span-8  { width: 545px;}
.span-9  {
	width: 614px;
}
.span-10 { width: 683px;}
.span-11 { margin-top: 125px;margin-right: 0px;margin-bottom: 0px;margin-left: 380px;}
.span-12 { width: 821px;}
.span-13 { width: 890px;}
.span-14, div.span-14 { width: 959px; margin: 0; }

/* STATIC IDs */

#header 			{ width: 959px; height:145px; background: url(../images/header.png); float:left; margin:0;}
#branding-14 		{ width: 959px; background: #81d047;  margin: 0; padding: 0;}
#supergraphic-3  	{ width: 207px; height:145px; background: url(../images/supergraphic02.jpg);  margin: 0; padding: 0; }
#title-11 			{ width: 752px; background: #81d047;  margin: 0; padding: 0;}
#6-spans  			{ width: 407px; background: #81d047;  margin: 0; padding: 0;}
#footer				{ width: 949px; margin: 0; background: #55a51c; float:left; padding:7px;} 
#rightcol			{
	width: 338px;
	margin: 0;
	padding-top: 0px;
	padding-right: 7px;
	padding-bottom: 0px;
	padding-left: 7px;
}

.content			{ float:left; width: 614px; margin: 0px 7px 0px 0px;} 
.rightcol			{ float:left; width:338px; margin: 0; padding:0;}
.contact_widget 	{ float:left; margin: .5em 31px; width:264px; background: #ffb70f; padding:7px 7px 0 7px;}
.color_widget		{ float:left; margin:7px 31px 0px 31px; width:269px; background: #FFF; padding:0 10px 0 10px;}
.color_widget strong {
	font-weight: bold;
	color: #000;
}

.aboutus_widget		{ float:left; margin:0px; width:248px; background: #55a51c; padding:0;}
.catalog_widget		{ float:left; margin:0px; width:248px; background: #7c9595; padding:0; }


/*image tags*/

img.main { border:0; hspace:10px;}
img.padright {padding-right:10px;}

/* Sub navigation */

ul.subnav {margin: 0; padding: 0; list-style:none; }
ul.li {float:left; margin:5px;}
ul.subnav a {display:inline-block float: left; padding:10; background-color:#81d047;}
ul.subnav a:link {background-color:#ffb70f}      /* unvisited link */
ul.subnav a:visited {color:#00FF00}  /* visited link */
ul.subnav a:hover {color:#ffb70f}  /* mouse over link */
ul.subnav a:active {color:#0000FF}  /* selected link */


/* LISTS */

ul {   margin: 0; padding: 0; list-style:none; }
ul li {float:left; line-height: 1.65em}
ul .first a {background: none;}
ul a {display:block; float:left; padding: 0 .5em; line-height: 1.7em; text-decoration:none; background:url(../images/mainNavBorder.gif) repeat-y left top; background-color:#81d047;}
ul a:link {font-family:"Trebuchet MS", Verdana, sans-serif; color:#FFF}
ul a:visited { font-family:"Trebuchet MS", Verdana, sans-serif; color:#FFF;}
ul a:hover {display:block; padding: 0 .5em; line-height: 1.7em; background: #ffb70f none; text-decoration:none; color:#000000;}
ul a:active {font-family:"Trebuchet MS", Verdana, sans-serif;}

/* Border on right hand side of a column. */
div.border {
  padding-right:2.5px;
  margin-right:3.5px;
  border-right: 1px solid #eee;
}

div.leftborder {
  padding-left:2.5px;
  margin-left:3.5px;
}

/* Border with more whitespace, spans one column. */
div.colborder {
  padding-right:61.5px;
  margin-right:58.5px;
  border-right: 1px solid #eee;
}

/* Misc classes and elements
-------------------------------------------------------------- */
/* Use a .box to create a padded box inside a column.  */ 
.box { padding: 1.5em; margin-bottom: 1.5em; background: #E5ECF9; }

/* Use this to create a horizontal ruler across a column. */
hr { background: #ddd; color: #ddd;clear: both; float: none; width: 100%; height: .1em;margin: 0em 0em 2em 0em;border: none; }
hr.space {background: #fff;color: #fff;}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
    content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }
.aboutBreedContent {
	width: 959px;
}