/***************************************************
	REUSABLE CLASSES 
*/

/* when moving widgets around on front page this class is called as a placeholder */
.widget-placeholder {
	border: 1px dashed #fff;
	background-color: #000;
	opacity: 0.5;
	min-height:250px;
	height:250px;
	height:auto !important;
	}
	
.widget-grippie {
	cursor: move;
	}
	

/***************************************************
	COLUMNS 
	*/
/*the col class is only used on the homepage 

EDIT : The col class is now used randomly throughout 
	*/	
	
.col { 
	width:350px;
	margin:0 20px 0 0px;
	padding: 0 0 30px 0; /* for sortables: if the column is empty, give some target space to drop a group into the column */ 
	float:left;
	}

.homepage .col { 
	margin:0px 20px 0px 0px; 
	}


.three-col #col2 {
	width:500px;
	margin:0 0 0 12px;
	}
	
/*the 2 col layout is the generic content "pages" */
.two-col #col2 {
	width:720px;
	margin:0 15px 0 0;
	}
	
.three-col .top,
.two-col .top{width:100%; height:38px; padding:10px 0 0 0;}

.three-col #content .widget {padding:0; margin-bottom:0;}
.three-col #content .widget SUB {font-size:180%;}


/***************************************************
	PAGES  
	
	Pages are content created by ccsai. Not user generated.
	
	the top of pages are structured differtly then widgets because
	widgets need to be self contained. Pages do not. 
	
 */
 

#content .page {
	position:relative;
	padding:0;
	margin:0 0 15px 0;
	}
	
#content .page H3 {
	height:30px;
	line-height:30px;
	font-weight:bold;
	color:#000;
	margin:5px 0 0 0;	
	padding:0 0 0 65px;
	display:block;
	}

#content .page .rss {
	position:absolute;
	top:25px;
	right:10px;
	}
	
#content .page IMG.badge {
	position:absolute;
	left:10px;
	top:10px;
	z-index:2;
	}
	
.page .content {
	padding:20px;
	font-size:120%;
	min-height:665px;
	height:665px;
	height:auto !important;
	}
	
#content .page H3 {
	height:30px;
	line-height:30px;
	font-weight:bold;
	color:#000;
	margin:5px 0 0 0;	
	padding:0 0 0 65px;
	display:block;
	}	
	
#content .page .content H3{
	height:auto;
	font-size:150%;
	line-height:100%;
	margin:5px 0;	
	padding:0;
	font-weight:normal;
	background:none;
	color:#B3161A;
	}
	
.page  #headline{
	background:#222;
	padding: 15px 20px 20px 20px;
	margin:0;
	/*border-bottom:solid 1px #B3161A;*/
	}

.page #headline H1, 
.page #headline H2 {
	font-size:300%; margin:0; padding: 0;
	border: none;
	line-height:100%;
	font-weight:bold;
	color:#FFF;
	}
	
.page #headline DIV,
.post #headline DIV {	
	width:500px;	
	background: black;	
	}
	
.page #headline DIV img,
.post #headline DIV img {	
	margin: 0 auto;	
	}
	
/***************************************************
	c7y76
	Styles the titles on the c7y76 pages */
.page  .pagetitle-wrapper{
	background:#222;
	padding: 15px 20px 20px 20px;
	margin:0;
	/*border-bottom:solid 1px #B3161A;*/
	}
	
.page .pagetitle {
	font-size:300%; margin:0; padding: 0;
	border: none;
	line-height:100%;
	font-weight:bold;
	color:#FFF;
	}		

.page .page-content {
	padding:20px;
	font-size:120%;
	}

/***************************************************
	POST  
	
	Posts are user generated content
	
 */
 

#content .post {
	position:relative;
	padding:0;
	margin:0;
	background:url(../images/navigation/dotted-line.gif) bottom left no-repeat;
	}

#content .post .moderate_panel {
	position:absolute;
	top:18px;
	right:30px;
}

#content .post .moderate_panel A{
	background: url(../images/usernav-light.gif) 0 0 repeat-x;

	text-decoration: none;
	color: #333333;
	font-weight: normal;
	height: 20px;
	line-height: 20px;
	display: block;
	padding: 0 3px;
	border: 1px solid #ffffff;
	float:right;
	margin: 0 0 0 5px;	
	}

#content .post .moderate_panel A:HOVER {
	background: url(../images/usernav-light.gif) 0 -30px repeat-x;
	color: #000000;
	border-left: 1px solid #ebe7ca;
	border-top: 1px solid #ebe7ca;
	border-right: 1px solid #ebe7ca;
	}
	
	
	
	
	

#content .post IMG.badge {
	position:absolute;
	left:10px;
	top:3px;
	z-index:2;
	}
	
.post .content {
	padding:20px;
	font-size:120%;
	}
	
#content .post H3 {
	height:30px;
	line-height:30px;
	font-weight:bold;
	color:#000;
	margin:5px 0 0 0;	
	padding:0 0 0 65px;
	display:block;
	}	
	
#content .post .content H3{
	height:auto;
	font-size:150%;
	line-height:100%;
	margin:5px 0;	
	padding:0;
	font-weight:normal;
	background:none;
	color:#B3161A;
	}
	
.post  #headline{
	background:#222;
	padding:0px;
	margin:0;
	border-bottom:solid 1px #B3161A;
	}
.post #headline IMG {
	display:block;
	}

.post #headline H1, 
.post #headline H2 {
	font-size:240%;margin:0;
	border:none;
	padding:20px 20px;
	line-height:100%;
	font-weight:bold;
	color:#FFF;
	}

/***************************************************
	HOMEPAGE » WIDGETS » BASICS
	*/
	
#content .widget {
	position:relative;
	padding:10px 0 0 0;
	margin:0 0 15px 0;
	}

/* set specific width on homepage only */
.homepage #content .widget {
	width: 350px;
	}

#content .widget H3 {
	height:30px;
	line-height:30px;
	font-weight:bold;
	color:#000;
	margin:5px 0 0 0;
	padding:0 0 0 65px;
	}
.homepage #content .widget H3 {	
	 color:#FFF
	 }
#content .widget .rss {
	position:absolute;
	top:25px;
	right:10px;
	/*display: none;*/
	}
	
#content .widget UL {
	margin:0;
	padding:0;
	list-style:none;
	}
	
#content .widget LI {
	background:url(../images/widgets/article-bkg.png) bottom left repeat-x;
	padding:20px 15px 20px 15px;
	position:relative;
	margin:0;
	list-style:none;

}
	
 #content .widget P {
	margin:0 0 10px 66px;
	}
	
#content .widget H4 {
	font-size:130%;
	color:#000;
	font-weight:bold;
	margin:0;
	padding:0;
	}
#content .widget H4 A{	
	color:#000;
	text-decoration:none;
}
#content .widget H4 A:HOVER {
	color:#F76C4C;
	}
#content .widget SMALL {
	color:#f16040;
	font-weight:bold;
	font-size:80%;
	margin:0;
	display:block;
	padding:0;
	}
	
#content .widget IMG.badge {
	position:absolute;
	left:10px;
	top:4px;
	z-index:2;
	}
	
#content .widget LI IMG {
	float:left;
	clear:left;
	border:solid 3px #6f6f6f;
	margin:0 10px 10px 0;
	
	}
	
#content .widget LI P {	
	line-height:130%;
	}
	
#content .widget SUB {
	font-size:130%;
	font-weight:bold;
	position:absolute;
	bottom:10px;
	right:15px;
	line-height:100%
	}
	

.three-col #content .widget LI {
	padding-right:90px;	
	}
	
.three-col #content .widget {padding:0; margin-bottom:0;}
.three-col #content .widget SUB {font-size:300%; bottom:30px;}

/**************************************************************************************************
	WIDGET » SETUPS
	*/	
	
/***************************************************
	PROFILE » WIDGET »  PROFILE FEATURE
	
	This is the first item listed in the profile section.
	*/	
#content .widget LI.profile-feature {
	padding:0px 0px 25px 0px;
	
	}
	
#content .widget LI.profile-feature .profile-content {
	margin:0 15px;
	padding-right:90px;
	}
	
#content .widget LI.profile-feature IMG {	
	border:none;
	float:none;
	padding:0;
	margin:0 0 0px 0;
	}
	
/***************************************************
	WIDGET » SETUPS » EXPANDED
	*/		
#content .widget LI.expanded {
	padding-top:130px;
	
	}
	#content .widget LI.expanded P {
	margin:0px;
	}
	
#content .widget LI.expanded DIV {
	position:absolute;
	left:0;
	top:3px;
	overflow:hidden;
	width:350px;
	height:115px;
	border:none;
	}
#content .widget LI.expanded DIV IMG {
	border:none;
	}
/***************************************************
	WIDGET » SETUPS » CONDENSED
	*/	
#content .widget LI.condensed {
	padding:10px 15px 5px 15px;
	}
#content .widget LI.condensed P{
	margin:0 0 0 100px;
	width:190px;
	}	
#content .widget LI.condensed P A{
	font-size:100%;
	color:#000;
	text-decoration:none;
	}
#content .widget LI.condensed .view {
	display:block;	
	color:#D75436;
	text-decoration:underline;
	}
#content .widget LI.condensed SMALL {
	float:left;
	display:block;
	width:100px;
	margin:6px 0 0 0;
	}
#content .widget LI.condensed  SUB {
	font-size:130%;
	font-weight:bold;
	position:absolute;
	top:40%; /*we use 40% as the default do accomodate letter height (ie. 50%)*/
	right:15px;
	}
	
/**************************************************************************************************
	WIDGET » COLOURS
	*/


/***************************************************
	WIDGET » COLOURS » TAN
	*/

.homepage .widget.tan {background:url(../images/widgets/tan/bkg.gif) no-repeat;}
.three-col .tan .top{background:url(../images/widgets/tan/bkg-med.gif) no-repeat;}
.two-col .tan .top{background:url(../images/widgets/tan/bkg-lrg.gif) no-repeat;}
.tan .content {background:#fdf9d0;}
.widget.tan H3,.page.tan H3, .post.tan H3  {background:#e8e3b6;}
.widget.tan SUB{color:#c5c294;}


/***************************************************
	WIDGET » COLOURS » BEIGE
	*/
	
.homepage .widget.beige {background:url(../images/widgets/beige/bkg.gif) no-repeat;}
.three-col .beige .top{background:url(../images/widgets/beige/bkg-med.gif) no-repeat;}
.two-col .beige .top{background:url(../images/widgets/beige/bkg-lrg.gif) no-repeat;}
.beige .content {background:#f5f4e4;}
.beige .page-content {background:#f5f4e4;}
.widget.beige H3,.page.beige H3, .post.beige H3  {background:#f5f4e4;}
.widget.beige SUB{color:#c5c294;}

/***************************************************
	WIDGET » COLOURS » MUSTARD
	*/	
.homepage .widget.mustard {background:url(../images/widgets/mustard/bkg.gif) no-repeat;}
.three-col .mustard .top{background:url(../images/widgets/mustard/bkg-med.gif) no-repeat;}
.two-col .mustard .top{background:url(../images/widgets/mustard/bkg-lrg.gif) no-repeat;}
.mustard .content {background:#efe592;}
.widget.mustard H3,.page.mustard H3, .post.mustard H3  {background:#D75436;}
.widget.mustard SUB{color:#b4ab60;}

/***************************************************
	WIDGET » COLOURS » SQUASH
	*/	
.homepage .widget.squash {background:url(../images/widgets/squash/bkg.gif) no-repeat;}
.three-col .squash .top{background:url(../images/widgets/squash/bkg-med.gif) no-repeat;}
.two-col .squash .top{background:url(../images/widgets/squash/bkg-lrg.gif) no-repeat;}
.squash .content {background:#f2f39b;}
.widget.squash H3,.page.squash H3, .post.squash H3  {background:#e7e891;}
.widget.squash SUB{color:#a6a75c;}
	
/***************************************************
	WIDGET » COLOURS » MINT
	*/	
.homepage .widget.mint{background:url(../images/widgets/mint/bkg.gif) no-repeat;}
.three-col .mint .top{background:url(../images/widgets/mint/bkg-med.gif) no-repeat;}
.two-col .mint .top{background:url(../images/widgets/mint/bkg-lrg.gif) no-repeat;}
.mint .content {background:#cdffc3;}
.widget.mint H3,.page.mint H3, .post.mint H3  {background:#c0f6b5;}
.widget.mint SUB{color:#80ae77;}


/***************************************************
	WIDGET » COLOURS » BROWN
	*/
.homepage .widget.brown {background:url(../images/widgets/brown/bkg.gif) no-repeat;}
.three-col .brown .top{background:url(../images/widgets/brown/bkg-med.gif) no-repeat;}
.two-col .brown .top{background:url(../images/widgets/brown/bkg-lrg.gif) no-repeat;}
.brown .content {background:#fdf9d0;}
.widget.brown H3,.page.brown H3, .post.brown H3  {background:#e8e3b6;}
.widget.brown SUB{color:#dedbb6;}

/***************************************************
	WIDGET » COLOURS » SKY (blue)
	*/
.homepage .widget.sky {background:url(../images/widgets/sky/bkg.gif) no-repeat;}
.three-col .sky .top{background:url(../images/widgets/sky/bkg-med.gif) no-repeat;}
.two-col .sky .top{background:url(../images/widgets/sky/bkg-lrg.gif) no-repeat;}
.sky .content {background:#d9edfd;}
.widget.sky H3,.page.sky H3, .post.sky H3  {background:#5F96BF;}
.widget.sky SUB{color:#84a3bc;}