div.layoutWideWrapleft, div.layoutWideWrapright, div.layoutCompDetail, div.layoutCompIndex {
    margin-bottom:10px;
}

.singleWrap {
	margin-bottom:10px;
}

div.layoutWideTop {
	height:3px;
	font-size: 1px;
	line-height: 1px;
}

div.layoutWideBottom { 
	height:3px;
	font-size: 1px;
	line-height: 1px;
}


.singleWrap div.layoutWideTop   { background:url(/images/layoutWideTop.gif) top left transparent no-repeat; }
.singleWrap div.layoutWideBottom{ background:url(../images/layoutWideBottom.gif) top right transparent no-repeat;  }
div.layoutWideWrapleft div.layoutWideTop   { background:url(../images/layoutWideLeftTop.gif) top left transparent no-repeat;  }
div.layoutWideWrapleft div.layoutWideBottom{ background:url(../images/layoutWideLeftBottom.gif) top left transparent no-repeat;  }
div.layoutWideWrapright div.layoutWideTop   { background:url(../images/layoutWideRightTop.gif) top left transparent no-repeat;  }
div.layoutWideWrapright div.layoutWideBottom{ background:url(../images/layoutWideRightBottom.gif) top left transparent no-repeat; }
div.layoutCompDetail div.layoutWideTop   { background:url(../images/layoutCompDetailTop.gif) top left transparent no-repeat;  }
div.layoutCompDetail div.layoutWideBottom{ background:url(../images/layoutCompDetailBottom.gif) top left transparent no-repeat; }
div.layoutCompIndex div.layoutWideTop   { background:url(../images/layoutCompIndexTop.gif) top left transparent no-repeat;  }
div.layoutCompIndex div.layoutWideBottom{ background:url(../images/layoutCompIndexBottom.gif) top left transparent no-repeat; clear: both; }


/* BREADCRUMBS */

div#breadCrumbs div.layoutWidesingle div.col1 {
  background-image:none;
	padding: 2px 5px 2px 5px;
}
div#breadCrumbs div.layoutWidesingle div.col1 div.inner1 {
	width: 778px;
}


/* ----------------- NEW LAYOUT ----------------- */
/*   1 Column, FULL WIDTH
     Used on Home page and results page and Being a Writer section     */

div.layoutWidesingle {
	background-color: #f2efe6;
	padding-top: 2px;
	background:url(../images/cockie.gif) bottom right no-repeat #f2efe6;
}

div.layoutWidesingle div.col1 {
	padding: 0px 5px 5px 5px;
  
}

div.layoutWidesingle div.col1 div.inner1 {
	width: 545px;
	float: left;
}

div#beingWriter {
	padding: 20px;
}

div.layoutWidesingle div.col1 div.inner2 {
	width: 228px;
	margin-left: 5px;
	float: left;
}


/* ----------------- NEW LAYOUT ----------------- */
/*   2 main columns, WIDE LEFT
     Used on Product page        */

div.layoutWideleft {
	background: url(../images/layout2Bg.gif) top left transparent repeat-y;
	
}

/* left col - outer */
div.layoutWideleft div.col1 {
	width: 540px; /* Actual = 550 */
	padding: 2px 5px 5px 5px;
	float: left;
}

/* right col - outer */
div.layoutWideleft div.col2 {
	width: 218px; /* Actual = 228 */
	padding: 2px 5px 5px 5px;
	float: right;
	
	
}

/* left col - inner left  */
div.layoutWideleft div.col1 div.inner1 {
	float: left;
	width: 310px;
}

/* left col - inner right */
div.layoutWideleft div.col1 div.inner2 {
	float: left;
	width: 225px;
	margin-left: 5px;
}

/* right col - inner */
div.layoutWideleft div.col2 div.inner3 {
	/* No use for this here, just added for consistency */
}


/* ----------------- NEW LAYOUT ----------------- */
/*   2 main columns, WIDE LEFT
     Used on Competitions page        */

div.layoutWideleft_Comp {
	background: url(../images/layoutCompIndexBg.gif) top left transparent repeat-y;
	float: left;
}

/* left col - outer */
div.layoutWideleft_Comp div.col1 {
	width: 526px; /* Actual = 542 */
	padding: 7px 5px 5px 11px;
	float: left;
}

/* right col - outer */
div.layoutWideleft_Comp div.col2 {
	width: 227px; /* Actual = 237 */
	padding: 2px 5px 5px 14px;
	float: right;
	
	
}

/* left col - inner left  */
div.layoutWideleft_Comp div.col1 div.inner1 {
	float: left;
	width: 250px;
}

/* left col - inner right */
div.layoutWideleft_Comp div.col1 div.inner2 {
	float: left;
	width: 250px;
	margin-left: 27px;
}

div.layoutWideleft_Comp div.col1 div.inner1 img, div.layoutWideleft_Comp div.col1 div.inner2 img {
	float: right;
	display: block;
	margin: 0 0 30px 10px;
}

/* right col - inner */
div.layoutWideleft_Comp div.col2 div.inner3 {
	margin-left: 1px;
}


/* ----------------- NEW LAYOUT ----------------- */
/*   2 main columns, WIDE LEFT
     Used on Competitions Detail page        */

div.layoutWideleft_CompDetail {
	background: url(../images/layoutCompDetailBg.gif) top left transparent repeat-y;
	overflow: hidden;
}

/* left col - outer */
div.layoutWideleft_CompDetail div.col1 {
	width: 416px; /* Actual = 439 */
	padding: 7px 10px 5px 13px;
	float: left;
}

/* right col - outer */
div.layoutWideleft_CompDetail div.col2 {
	width: 323px; /* Actual = 343 */
	padding: 7px 5px 5px 15px;
	float: right;
}

/* left col - inner left  */
div.layoutWideleft_CompDetail div.col1 div.inner1 {
	float: left;
	width: 250px;
}

/* left col - inner right */
div.layoutWideleft_CompDetail div.col1 div.inner2 {
	float: left;
	width: 250px;
	margin-left: 27px;
}

/* right col - inner */
div.layoutWideleft_CompDetail div.col2 div.inner3 {
	margin-left: 5px;
}



/* ----------------- NEW LAYOUT ----------------- */
/*   2 main columns, WIDE RIGHT
     Used on section homepages ie 'Our Books'
	  and main category homepages ie 'Linguistics'      */

div.layoutWideright {
	background: url(../images/layout3Bg.gif) top left transparent repeat-y;
	min-height: 300px;
	_height: 300px;
}

/* left col - outer */
div.layoutWideright div.col1 {
	width: 300px; /* Actual = 310 */
	padding: 2px 5px 5px 5px;
	float: left;
	
}

/* right col - outer */
div.layoutWideright div.col2 {
	width: 458px; /* Actual = 468 */
	padding: 2px 0px 5px 0px;
	float: left;
	margin-left: 15px;
	background:url(../images/cockie.gif) bottom right no-repeat #f2efe6;
}

/* left col - inner */
div.layoutWideright div.col1 div.inner1 {
	/* No use for this here, just added for consistency */
}
div.layoutWideright div.col2 div.inner1 {
	/* No use for this here, just added for consistency */
}

/* right col - inner left */
div.layoutWideright div.col2 div.inner2 {
	float: left;
	width: 226px;
	
}

/* right col - inner right */
div.layoutWideright div.col2 div.inner3 {
	float: left;
	width: 226px;
	margin-left: 5px;
}


/* JUST FOR DEMO STYLES */
div.headerModNarrow h3, div.headerModWide h3 {margin:0; }
div.headerModTopNarrow { background:url(../images/narrowHeadTop.gif) top left no-repeat; height:3px;font-size: 1px; line-height: 1px; }
div.headerModTopWide { background:url(../images/wideHeaderTop.gif) top left no-repeat; height:3px;font-size: 1px; line-height: 1px; }
div.headerModNarrow { background:url(../images/narrowHeadBottom.gif) bottom left no-repeat;}
div.headerModWide { background:url(../images/wideHeaderBottom.gif) bottom left no-repeat;  }

div.layoutWideleft  div.headerModTopNarrow { background-image:url(../images/narrowHeadTopTCLeft.gif); }
div.layoutWideleft  div.headerModTopWide   { background-image:url(../images/wideHeaderTop.gif); }
div.layoutWideleft  div.headerModNarrow    { background-image:url(../images/narrowHeadTCRight.gif); }
div.layoutWideleft  div.headerModWide      { background-image:url(../images/wideHeaderTop.gif); }

div.layoutWideright .col1 .inner1 div.headerModTopNarrow { background-image:url(../images/narrowHeadTopTCRight.gif); }
div.layoutWideright .col1 .inner1 div.headerModNarrow    { background-image:url(../images/narrowHeadTCRight.gif); }
/*div.layoutWide.right div.headerModTopWide   { background-image:url(../images/wideHeaderTop.gif); }
div.layoutWide.right div.headerModWide      { background-image:url(../images/wideHeaderTop.gif); }
*/
div.layoutWidesingle div.col1 div.inner2 div.headerModTopNarrow { background-image:url(../images/narrowHeadTop228.gif);/*228;*/ }
div.layoutWidesingle div.col1 div.inner2 div.headerModNarrow { background-image:url(../images/narrowHeadBottom228.gif);/*228;*/ }

div.layoutWideright div.col2 div.inner2 div.headerModTopNarrow,
div.layoutWideright div.col2 div.inner3 div.headerModTopNarrow { background-image:url(../images/narrowHeadTop226.gif);/*226;*/}
div.layoutWideright div.col2 div.inner2 div.headerModNarrow,
div.layoutWideright div.col2 div.inner3 div.headerModNarrow { background-image:url(../images/narrowHeadBottom226.gif);/*226;*/}
div.layoutWideleft div.col1 div.inner2 div.headerModTopNarrow { background-image:url(../images/narrowHeadTop225.gif);/*225*/ }
div.layoutWideleft div.col1 div.inner2 div.headerModNarrow { background-image:url(../images/narrowHeadBottom225.gif);/*225*/ }
div.layoutWideleft div.col1 div.inner1 div.headerModTopNarrow { background-image:url(../images/narrowHeadTop306.gif);/*306*/ }
div.layoutWideleft div.col1 div.inner1 div.headerModNarrow { background-image:url(../images/narrowHeadBottom306.gif);/*306*/ }
div.layoutWideleft div.col2 div.inner3 div.headerModTopNarrow { background-image:url(../images/narrowHeadTop218.gif);/*306*/ }
div.layoutWideleft div.col2 div.inner3 div.headerModNarrow { background-image:url(../images/narrowHeadBottom218.gif);/*306*/ }
#sideBar.contact div.headerModTopNarrow { background-image:url(../images/narrowHeadTop218.gif);/*306*/ }
#sideBar.contact div.headerModNarrow { background-image:url(../images/narrowHeadBottom218.gif);/*306*/ }

div.headerModNarrow, div.headerModWide {
	padding: 2px 5px 5px 8px;
}

.layoutWideright div.col2 .headerModTopWide {background-image:url(../images/wideHeaderTop458.gif); }
.layoutWideright div.col2 .headerModWide {padding-left:0px;background-image:url(../images/wideHeaderBottom458.gif);z-index:1; }



/* this isnt neccessarily needed, it's just
to add the extra 5px padding to the content
that is not boxed in. I imagine this will be
added to the invidual content elements */
div.text {
	padding-left: 5px;
	padding-bottom: 5px;
}

