/***************/
/* main layout */
/***************/
body { margin: 0; padding: 0; margin-top: 15px; }

#bodyWrapper { width: 884px; margin: auto; }

/* specific link colours for this site */
a:link 	  { color: #538a98; text-decoration: none;}
a:visited { color: #538a98; text-decoration: none;}
a:hover   { color: #538a98; text-decoration: underline;}
a:active  { color: #538a98; text-decoration: underline;}

table { border:1px solid #666666; margin: 7px; }

/*******************/
/* header elements */
/*******************/
#header { margin-bottom: 17px; }

#header #logo { float: left; }
#header #ad   { float: right; margin-top: 18px; }

#nav { margin-bottom: 16px; }

#nav ul#mainNav      { list-style: none; margin: 0; padding: 0; background: #2f2f2f url(../images/nav_bg.gif) repeat-x left top; height: 33px; }
#nav ul#mainNav li   { float: left; margin: 0; padding: 0; }
#nav ul#mainNav li a {
	display: block;
	text-decoration: none;
	color: #fff;
	font-size: 1.273em;
}

#nav #navAccordian { background: #3d6a6e url(../images/accordian_bg.jpg) repeat-x left top; color: #fff; }
#nav #navAccordian a { color: #fff; }
#nav #navAccordian .accordian .accordianInner { padding: 20px 12px 14px; }

#nav ul#categoryNav,
#nav ul#investmentNav      { list-style: none; margin: 0; padding: 0; }
#nav ul#categoryNav   li   { float: left; width: 23%; margin: 0; margin-right: 1.9%; padding: 0; }
#nav ul#investmentNav li   { float: left; width: 12.2%; margin: 0; margin-right: 1.8%; padding: 0; height: 17px; }
#nav ul#categoryNav   li a,
#nav ul#investmentNav li a {  }

ul.nav    { list-style: none; margin: 0; padding: 0; }
ul.nav li { display: inline; margin-right: 10px; }


/********************/
/* content elements */
/********************/
#mainContainer {  }

/* div on the left on home page */
#sidebar     { float: left; width: 273px; margin-right: 26px; }

/* the div that fits between sidebar and featuredbar */
#mainArea    { float: left; width: 401px; margin-right: 26px; }

/* the div that fits left of featuredbar when no sidebar present */
#mainContent { float: left; width: 700px; margin-right: 26px; }

/* div on right on most pages */
#featuredBar { float: left; width: 158px; }

#franchiseCategory { margin-top: 20px; }


.borderBox { border: 1px solid #666; padding: 13px 12px 0 12px; margin-bottom: 22px; }
.borderBox a:link,
.borderBox a:visited { text-decoration: underline; }
.borderBox a:hover,
.borderBox a:active  { color: #000; text-decoration: underline; }


.franchiseImage {
	padding: 1px;
	width: 156px;
	height: 89px;
	margin-bottom: 10px;
}

#mainArea .franchiseImage { float: left; margin: 0 15px 5px 0; }
#franchiseCategory .franchiseImage {  }

.home #franchiseCaseStudyAll,
.home #franchiseCaseStudySome { text-align: justify; }


/* franchise category view */
.franchise {
	float: left;
	width: 184px;
	margin-right: 20px;
	margin-bottom: 20px;
	height: 260px;
	border: 1px solid #538a98;
	padding: 10px;
}


#franchiseMain    { float: left; width: 506px; }
#franchiseSidebar { float: right; width: 344px; }



hr {
  margin: 18px 0;
  border-bottom: solid #b70062 1px;
  height: 1px;
  border-top: none;
  border-left: none;
  border-right: none;
}





/*********/
/* items */
/*********/
.item              { margin-bottom: 10px; }
.item .itemHeader  {  }
.item .itemTitle   { font-weight: bold; }
.item .itemDate    { font-style: italic; }
.item .itemContent {  }
.item .itemImage   { float: left; margin-right: 5px; margin-bottom: 5px; }
.item .itemMore    {  }

#itemBack          {  }

/*******************/
/* footer elements */
/*******************/
#need-help { margin-top: 43px; }
#footer    { margin-top: 10px; border-top: 8px solid #4a7f84; padding-top: 6px; }
#footer a  { text-decoration: none; } /* for the clevercherry.com link */


/***********************/
/* general form styles */
/***********************/
#contactform	{ float: left; }  /* the contact form itself */
#contact		{ float: right; } /* contact info or whatever on right */

.required { color: #f00; }

/* all form elements are contained within a formrow div, with a label and
 *  then the element, this is the best way (but still not good) to emulate
 *  a table */
div.formrow {
  clear: both;
  text-align: left;
  margin-bottom: 10px;
}

div.formrow label {
  float: left;
  text-align: right;
  margin-right: 10px;
  width: 150px; /* default width for a default form, add new form ids and override */
}
div.formrow.indent { margin-left: 160px; } /* label width + label margin-right, override as above */

#franchiseForm div.formrow {  }
#franchiseForm div.formrow label  { float: none; display: block; margin-right: 0; width: auto; text-align: left; }
#franchiseForm div.formrow.indent { margin-left: 0; }

/* message and error boxes, not just useful in contact form */
div.box { border: 1px solid #080; color: #080; padding: 3px 5px; margin-bottom: 15px; float: left; } /* you may need to clearfix this */
div.box.nomargin { margin-bottom: 0; } /* if before something with a margin-top */
div.box.error { border-color: #f00; color: #f00; } /* error box in red */