/*************************************************************************
 *
 *	---   Main Layout elements   ---
 *
 */

#container {
	position: relative;
	width: 760px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	margin-top: 0px;
	text-align: left;
	display: block;
	padding: 0;
}

#bodyMain, #bodyMainHome, #bodyMainFull {
	width:514px;
	float:left;	
	padding: 0px;
	display: block;
}

#bodyFull {
	width:740px;
	float:left;	
	padding: 0px;
	display: block;
}
#bodyMain {
	padding-top: 10px;
}

#bodyRight, #bodyRightHome {
	display: block;
	width:236px;
	float:left;
	margin: 0px;	
	padding: 0px 0px 0px 10px;	
}

#bodyRight {
	padding-top: 10px;	
}

#bodyRightHome {
	background:url(../images/shared/bgimg.gif) top left;	
}

/************************************************************************ 
 *
 *	--   PANELS AND BOXES  ---
 *
 *	The main content section of the design is split up into two main sections:
 *	These are bodyMain and bodyRight.
 *
 * 	Each of these sections has its own set of boxes. Boxes by default are all white
 *	in color. Boxes can have coloured panels inside them. Colour can be applied to 
 * 	panels by combining the panel style with a background style. 
 *
 *	e.g <div class="rightPanel blueBg">
 *
 */  
  
.colStretch {
	 width: 100px;
	 height: 100px;
	 background: #f0f;	
}
 
 
 /*#bodyFull*/
 
 .contentBox{
 	width: 740px; 
	border: 10px solid white;
	background: white;
	float: left;
	margin-top: 10px;
	overflow: hidden;
 }
 
 .contentPanelleft, .contentPanelRight{
	width: 340px;
	padding: 10px;
	display: block;
	float: left;
 }
 
 .contentPanelleft {
 	border-right:1px solid #ce89a0;
 }
 
 .nobrdr {
 		border: none;
 }
 
  .contentPanelRight {
 	border-left:1px solid #ce89a0;
	margin-left:-1px;
 }
 
 
 /* bodyMain */ 
.mainBox { 
	width: 494px; 
	border: 10px solid white;
	background: white;
	float: left;
	margin-top: 10px;
	overflow: hidden;
} 


.mainPanel {
	width: 474px;
	padding: 10px;
	display: block;
	float: left;
}

.mainPanelPic {
	width: 494px;
	display: block;
	float: left;
}

.mainColContainer { 
	width: 252px;
}

.mainColContainerHome {
	width: 252px;
	background:url(../images/shared/bgimg.gif) top left;
	 	
}

.mainColBox { 
	display: block;
	width: 232px; 
	border: 10px solid white;
	margin: 10px 0px 0px 0px;
	background: #fff;	
	float: left;
}

.mainColBoxWide { 
	display: block;
	width: 494px; 
	border: 10px solid white;
	margin: 10px 0px 0px 0px;
	background: #fff;	
	float: left;
}

.mainColPanel { 
	width: 212px;
	padding:10px;
}


/* bodyRight */
.rightBox,
.rightBoxHome {
	display: block;
	float: left;
	width: 216px;
	background: #FFFFFF;
	border: 10px solid #FFFFFF;
	margin: 10px 0px 0px 0px;
	padding: 0px;
}	

.rightBox {
	margin-top: 10px;	
}

.rightPanel	{
	padding: 10px;
	display: block;
} 

.rightSmallPanel	{ 
	width: 196px; 
	padding: 0px;
	display: block;
	float: left;
}

#poetPhotoContainer {
	background:#212121;
	width:180px;
}

#poetPhotoContainer IMG {
	display:block;
}

#poetPhotoContainer DIV {
	padding:3px;
	font-size:0.80em;
	color:#fff;
}

#poetPhotoContainer DIV A {
	color:#fff;
}

#poetPhotoContainer DIV.addButton {
	padding:0px 0 0 0;
	font-size:0.80em;
	color:#fff;
	background-color: #ffffff;
}
/* In various pages a box will require dotted borders.
 * This only occurs in bodyMain in a column.
 */
 
.benefactors {
	background:url(../images/panels/benefactors.gif);
	margin:0px 0px 0px 0px;
 }
 
.benefactors .benefactor {
	float:left;
	display:inline;
	margin-left:1px;
 	padding:10px;
 	width:144px;
	text-align: center;
}
.benefactors .first {
	margin-left:0;
}

.benefactors .separator {
	clear:left;
	height:1px;
	overflow:hidden;
	background:url(../images/panels/dotted.gif) top left;
}
.benefactors .toptail {
	background:white;
}
.benefactors .benefactor IMG {
	display:block;
	margin:0 auto 10px auto;
}

.dottedColBox {
	width: 250px;
	background:url(../images/panels/dotted.gif) top left;
	padding: 1px;
	margin:10px 0px 0px 0px;
	float: left;
}

.dottedRightColBox {
	width: 234px;
	background:url(../images/panels/dotted.gif) top left;
	padding: 1px;
	margin:10px 0px 0px 0px;
	float: left;
}

.dottedMainBox {
	width: 512px;
	background:url(../images/panels/dotted.gif) top left;
	margin: 10px 0px 0px 0px;
	padding: 1px;
	float: left;
}


.dottedMainBoxInner {
	width: 492px;	
}


.dottedColBoxInner {
	width: 230px;	
}

.dottedRightColBoxInner {
	width: 214px;	
}

.dottedColBoxInner, .dottedMainBoxInner, .dottedRightColBoxInner {
	padding: 10px;
	display: block;
	float: left;
	background: #fff;
}

.dottedMainBoxInner .titlewrapper{margin-left: 55px; padding-bottom:10px;}

/* Blue panels with rounded corners at the bottom */
.mainBluePanelBtCor{
	background: url(../images/panels/Cbluebottom.gif) no-repeat bottom left;
	background-color:#3cb6ef;
	border-top: 1px solid #fff;padding: 10px;
}

.rightBluePanelBtCor {
	background: url(../images/panels/Rbluebottom.gif) no-repeat bottom left;
	background-color:#3cb6ef;border-top: 1px solid #fff;
}


.titlesub {
	margin:20px 0;
	position:relative;
}

.preSearchSpacer {
	width: 236px;
	display: block;
	float: left;
	height: 10px;	
}

/************************************************************************ 
 *
 *	--   HOMEPAGE ELEMENTS  ---
 *
 *	The home page is built in differently to other pages as it has 3 columns
 *	which always align at the bottom. The following elements are only used in 
 *	the homepage.
 *
 */ 
#heroPanel {
	position: relative;
	width: 740px;
	margin: 0px;
	border: 10px solid #FFFFFF;
	background-color: #FFFFFF;
}

.usaGreyBg {
background-image:url(../images/panels/american_poets_hdr.gif);
background-position:bottom right;
background-repeat:no-repeat;
}

#containerbg {
	position: absolute;
	width:760px;
	margin-bottom: 0px;
	margin-top: 0px;
	border: 0px;
	background:url(../images/home/bg_column_stretch.gif) repeat-y;
	display: block;
}

#homenavspacer {
	background:url(../images/shared/bgimg.gif) 0px 4px;
	width: 760px;
	height: 20px;
	display: block;
	clear: left;
	margin: 0px;
	padding: 0px;
}

#homenavspacer[id] {
	background:url(../images/shared/bgimg.gif) 0px 2px;
}

#benefactorsSpacer {
	background:url(../images/shared/bgimg.gif) 0px 4px;
	width: 760px;
	height: 10px;
	display: block;
	float: left;
	margin: 0px;
	padding: 0px;
}

#benefactors {
	width: 730px;
	float: left	;
	display: block;
	margin: 0px;
	padding: 10px;
	background-color: white;
}

#benefactors ul{
	width: 730px;
	list-style: none;
	display: block;	
	float: left;
}

#benefactors ul li {
	margin: 0px;
	padding: 10px;
	float: left;
}

.historicPoetPoemsHome {
	width: 232px;
	display: block;
	background: url(../images/components/blackRedBG.gif) repeat-y top left;
}

.historicPoetPoemsHome .singlePoetPic {
	float: left;
	width: 111px;
}

.historicPoetPoemsHome .singlePoetPic li {
	width: 111px;
	overflow: hidden;
}

.historicPoetPoemsHome .singlePoetPic li a {
	display: block;
	padding: 122px 6px 10px 18px;
	background: url(../images/nav/arrows/basic_red_arrow.gif) no-repeat 8px 126px;
	color: #FFFFFF;
}

.historicPoetPoemsHome .singlePoetPic li a:hover {
	background: url(../images/nav/arrows/basic_white_arrow.gif) no-repeat 8px 126px;
}

.historicPoetPoemsHome .historicPoems {
	float: left;
	width: 107px;
	padding: 10px 4px 10px 10px;
}

.mediaplayerHome {
	width: 216px;
	position: relative;
}

.mediaplayerPanel {
	background: #333 url(../images/home/home_mediaplayer_split_bg.gif) repeat-y;
	display: block;
}

.mediaplayerPanel .blockLeft {
	float:left;
	width:88px;
	padding:10px 10px 20px 10px;
}

.mediaplayerPanel .blockRight {
	float:left;
	width:108px;
	padding-bottom:10px;
}

.mediaplayerPanel .pic {
	background:black no-repeat center center;
}

.mediaplayerPanel .pic DIV {
	background:url(../images/icons/speaker_red_right_corner.gif) no-repeat top right;
	width:108px;
	height:108px;
}

.mediaplayerPanel UL.poetList {
	margin:8px 0 0 5px;
}

.mediaplayerPanel .nextprev {
	background:#666666; 
	border-top:1px solid #858585;
	padding:0 10px;
}

.mediaplayerPanel .nextprev A {
	float:left;
	color:#fff;
}

#mediaplayerHomePoetPreviousLink {
	width:96px;
	background:url(../images/icons/dbl_chevon_left_red.gif) no-repeat left center;
	padding: 2px 0 4px 14px;
}

#mediaplayerHomePoetNextLink {
	width:72px;
	background:url(../images/icons/dbl_chevon_right_red.gif) no-repeat right center;
	text-align:right;
	padding: 2px 14px 4px 0;
}

/************************************************************************ 
 *
 *	--   TILES COMPONENTS  ---
 *
 *
 */ 
 
.marginTop {
	margin-top: 10px;	
}

.marginBottom {
	margin-bottom: 10px;	
}

.doubleMarginBottom {
	margin-bottom: 20px;	
}

.marginLeft {
	margin-left: 10px;	
}



.videoLeft {
	margin-top: 10px;
	float: left;
}

.videoRight {
	width: 240px; 
	padding: 10px;
	float: left;
}

/* searchResults */

.poetresult {
	background:#f3f3f1 no-repeat;
	width:242px;
}
.poetresult .link {
	display:block;
	position:relative;
	padding:5px 10px 0 56px;
	color:#f09;
	text-decoration: none;
	font-weight:bold;
	background: url(../images/nav/arrows/basic_red_arrow.gif) no-repeat 58px 9px;		
}
* > .poetresult > .link {
	padding-top:46px;
}
.poetresult .link .content {
	display:block;
	min-height: 41px;
}
* > .poetresult > .link > .content {
	margin-top: -41px;
}
/* for IE, not 5Mac \*/
* html .poetresult .link {
	height: 41px;
}
/* end hack */
.poetresult .link:hover {
	background-image: url(../images/nav/arrows/basic_black_arrow.gif);
	text-decoration: underline;
	color:#f09;
}
.poetresult .link .poet {
	display:block;
	position:relative;
	padding-right:13px;
	left:13px;
}
.poetresult .link .dotted {
	margin:4px 0 0 0;
	border:none;
	padding:0;
}
.poetresult .link .spacing {
	margin-top:10px;
	display:block;
	visibility:hidden;
}
.poetresult .purchase {
	position:relative;
	height:0;
	padding-left:56px;
}
.poetresult .purchase A {
	position:absolute;
	bottom:2px;
}
A.buyCD,
A.website {
	display:block;
	padding:0 10px 5px 0px;
	background: url(../images/nav/arrows/smallDownArrow.gif) no-repeat left top;
}
A.buyCD:hover,
A.website:hover {
	background-image: url(../images/nav/arrows/smallDownArrow_on.gif);
}
A.website {
	padding:0 0 0 13px;
}
A.buyCD SPAN {
	display:block;
	position:relative;
	padding-right:13px;
	font-weight:bold;
	left:13px;
}

.darkBlueBg A.website SPAN {
	font-weight:bold;
}

#AmericanPoetPodcast {
	border-top:1px solid white;
}

#AmericanPoetPodcast A.website {
	color:white;
}

#AmericanPoetPodcast.darkBlueBg {
	color:#1b59a8;
}

A.buyCD * {
	white-space:nowrap;
}
.redBg A.buyCD {
	background: url(../images/nav/arrows/smallDownArrow_yellow.gif) no-repeat left top;
	color:white;
}
.redBg A.buyCD:hover	{
	background-image: url(../images/nav/arrows/smallDownArrow_yellow_on.gif);
}

.poetboxSmall {
	background:#333 no-repeat;
}
.poetboxSmall A {
	display:block;
	color:#fff;
}
* > .poetboxSmall > A {
	padding-top:46px;
}
.poetboxSmall A SPAN {
	display:block;
	min-height:32px;
	padding:7px 0 7px 66px;
	background:url(../images/nav/arrows/basic_red_arrow.gif) no-repeat 56px 11px;		
}
* > .poetboxSmall > A > SPAN {
	margin-top:-46px;
}
/* for IE, not 5Mac \*/
* html .poetboxSmall A {
	height:46px;
}
/* end hack */
.poetboxSmall A:hover SPAN {
	background-image:url(../images/nav/arrows/basic_white_arrow.gif);
}

.poetresultsgrid .poetresult {
	float:left;
	display:inline;
	margin-bottom:10px;
}
.poetresultsgrid .first {
	clear:left;
	overflow:hidden;
	margin-right:10px;
}
.poetresultsgrid .clear {
	clear:left;
	height:10px;
	overflow:hidden;
}

/* MY ARCHIVE STYLES */
.topright {
	float:right;
	margin-top:-15px;
	
}