@charset "utf-8";
/* Imports
-------------------------------------------------------------- */
@import url(reset.css);
@import url(forms.css);
@import url(header.css);
@import url(footer.css);
@import url(profile.css);
@import url(niftyCorners.css);

/* Elemenst, tools and wrappers
-------------------------------------------------------------- */
*,html { font: 100% "Trebuchet MS", Arial, Helvetica, Verdana; }

body {
	margin: 0px;
	padding: 0px;
	background: #FFF;
	color: #666;
	width: 100%;
	height: 100%;
	text-align: center;
	font: 85% "Trebuchet MS", Arial, Helvetica, Verdana;
}


hr {
	background-color: #ccc;
	color:#ccc;
	border:0;
	height: 1px;
}

td { vertical-align: top; }

strong{ font-weight: bold; }

small { font-size: 0.85em; }

em { font-style: italic; }

img { border: none; }

a:focus, 
a:hover { text-decoration: none;}

a { color: #666; text-decoration: underline; }

blockquote { margin: 1.5em; color: #666; font-style: italic; }

.strongbox {
	margin: 0 0 1.4em 0;
	font-style: normal;
	font-size: 1.4em;
}

strong { font-weight: bold; }

em,dfn { font-style: italic; }

dfn { font-weight: bold; }

sup, sub { line-height: 0; }

abbr, 
acronym { border-bottom: 1px dotted #666; }

address { margin: 0 0 1.5em; font-style: italic; }

del { color: #666; }

pre,code { margin: 1.5em 0; white-space: pre; }

pre,code,tt {
	font: 1em 'andale mono', 'lucida console', monospace;
	line-height: 1.5;
}

 
.wrapper {
	margin: 0px auto 0px auto;
	width: 968px;
	height: auto;
	text-align: left;
}

.content  ul { list-style: disc; margin-bottom: 1.1em; }

.content  ul li { margin-left: 25px; }

.content  ol {  margin-bottom: 1.1em;  list-style-type: decimal;  }
.content  ol li { margin-left: 35px; }

ul.promos, ul.promos li, ul.meetPromos, ul.meetPromos li { list-style: none; margin: 0; padding: 0; }

.content.forms ul { list-style: none; margin-bottom: 0; }

.content.forms ul li { margin-left: 0; }

.content {
	padding: 10px 7px;
	margin: 0 3px; /* Total width of content > 968px - (7px*2) = 954px */
}

.hidden { display: none !important; }

.left { float: left; }

.right { float: right; }

/* Layout classes
-------------------------------------------------------------- */
.column { float: left; margin-right: 14px; overflow: hidden; }

.nopad { margin: 0px !important; padding: 0px !important; }

.column.widest { width: 954px; }

.column.wide { width: 680px; }

.column.narrow { width: 514px; }

.column.wider { width: 731px; }

.column.slim { width: 254px; }

.column.slimer { width: 203px; }

.slimUnit { margin-bottom: 30px; }
.slimUnit img {display: block;}
#photoHelp 
{
	float: left;
	width: 320px;
}

.slimUnit blockquote {
	color: #D90733;
	background: url(../images/site_wide/red_quotemark.gif) no-repeat top left;
	padding: 0 0 0 35px;
	margin: 0;
	font-size: 2em;
	line-height: 1.2em;
}

.slimUnit.usefullinks { background: #D90733; color: #fff; overflow: hidden; }

.slimUnit.usefullinks h3 {
	font-size: 1.1em;
	font-weight: bold;
	padding: 10px;
	background: #970524;
}

.slimUnit.usefullinks p { padding: 0 10px; line-height: 0.9em; font-size: 0.9em; }

.slimUnit.usefullinks a { color: #fff; }

/* Typography
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 { font-weight: normal; }

h1 {
	font-size: 2.5em;
	line-height: 1.3em;
	margin-bottom: 0.5em;
	font-weight: bold;
}

h2 {
	font-size: 2.3em;
	margin-bottom: 0.75em;
	line-height: 1em;
	font-weight: bold;
}

h3 { font-size: 1.4em; line-height: 1; margin-bottom: 1em; }

h4 {
	font-size: 1.2em;
	line-height: 1;
	margin-bottom: 1em;
}

h5 {
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 1em;
}

h6 { font-size: 1em; font-weight: bold; }

p { margin: 0 0 1.1em; }

p.last { margin-bottom: 0; }

.title, .title a { color: #D90733; }

h2.title {
	font-size: 3.25em;
	font-weight: normal;
	border-bottom: 1px solid #ccc;
	margin-bottom: 0.2em;
	padding-bottom: 0.25em;
}

h2.title .subtitle { color: #666; font-size: 0.5em; }

.blogs h2.title { border-bottom: 1px solid #D90733; }

.blogs h2.title .subtitle { color: #666; font-size: 0.7em; }

.blogs .blogUnit h3.title { font-size: 1.7em; margin-bottom: 0.3em; }

.wmmUnit h3.title .subtitle { color: #666; }

.wmmUnit, .blogUnit{ margin: 1em 0 0 0; }

.wmmUnit.main h3 { margin-bottom: 0; font-size: 1.5em; }

.wmmUnit h4{ color: #666; font-size: 1.1em; font-weight: normal; }

.wmmUnit p.readMore{ text-align: right; padding-bottom: 0; margin-bottom: 0; }

.wmmUnit.zebra1, .blogUnit.zebra1, .searchUnit.zebra1 { background: #F0F3DD; }

.wmmUnit.zebra1 td, .wmmUnit.zebra2 td, .blogUnit.zebra1 { padding: 7px; }

.searchUnit{width: 940px;}

.searchUnit.zebra1, .searchUnit.zebra2 { padding: 5px;}

.subhead { font-size: 1.2em; }

.rednote { color: #CC0033; font-size: 0.9em; }

/* Misc classes
-------------------------------------------------------------- */
.headImage { margin-bottom: 5px; }

.highlightBox { background: #f0f3de; padding: 10px; }

.highlightBox.positional { font-size: 1.2em; }

.byline { margin-bottom: 1.5em; }

.romFootBox { background: #ececeb; padding: 10px; margin-top: 14px; }

.romFootBox a { color: #D90733; }

.sideBoxHead1, .sideBoxHead1 a {
	padding: 10px;
	color: #CC0033;
	font-weight: bold;
	background: #ccc;
	text-decoration: none;
}
.sideBoxHead1 a:hover {text-decoration: underline;}


.sideBoxContent1 { padding: 10px; background: #ECECEB; }

.sideBoxHead2 {
	padding: 10px;
	color: #CC0033;
	font-weight: bold;
	background: #D1DB84;
}

.sideBoxContent2 { padding: 10px; background: #F0F3DD; }

.avatar {
	border: 1px solid #ccc;
}

.group {
	background: #fbfbfb;
	padding: 5px;
	margin:5px 0;
	border: 1px solid #ccc;
}

/*Blog contributors gallery*/
.blogGallery { width: 954px; margin: 0 auto 0 auto; border: none; }

.blogGallery td{ padding: 15px; width: 25%; text-align: left; }

.blogGallery td h5{ color: #db1e36; padding: 0; }

.blogGallery td h5 a{ color: #db1e36; text-decoration: none; }

.blogGallery td h5 a:hover{ text-decoration: underline; }

.blogGallery td p{ margin: 0 auto; padding: 0; text-align: left; }

.articles .icons{
	width: 46px;
	height: 44px;
	margin: 10px 10px 0 10px;
	float: left;
}

.articles .cat{ margin: 20px 0 0 0; float: left; font-size: 1.4em; }

.articles .cat a{ color: #DB1D36; text-decoration: underline; }

.articles .cat a:hover{ color: #DB1D36; text-decoration: none; }

table.gallery td {
	vertical-align: bottom;
	padding: 10px;
	text-align: center;
}

/* Buttons
---------------------------------------------------------------*/
.loginBtns li{ display: inline; }

/*Up to 9 charactors*/
.name1{ font-size: 18px; }

/*Up to 11 charactors*/
.name2{ font-size: 16px; }

/*Up to 15 charactors*/
.name3{ font-size: 14px; }

a.btn{
	padding: 4px 10px;
	color: #fff;
	margin-right: 2px;
	font-size: 0.8em;
	text-decoration: none;
	display: block;
	text-align: center;
}

/*  All buttons need to be given a width, I know it's lame but what can you do.
Even more lame is the fact you will have to also write a button class for IE6 too (located in ie.css)
because of box model conflicts.  */
a.register{ width: 4em; }

a.login{ width: 2.5em; }

a.whatsRuby{ width: 6em; }

a.greyBg{ background: #999; }

a.redBg{ background: #DB1D36; }

a.greyBg:hover, a.redBg:hover{ background: #666; color: #fff; }

a.competition { font-size: 2em; width: 9em; }

a.sendMessage { width: 7.5em; }

a.submit { width: 7em; }

a.undo { width: 4.5em; }

a.search { width: 4em; }

a.emailBg{
	width:30px;
	background: #999 url(../images/site_wide/email.gif) no-repeat center ;
}

a.emailBg:hover{
	background: #666 url(../images/site_wide/email.gif) no-repeat center ;
}

a.printBg{
	width:30px;
	background: #999 url(../images/site_wide/print.gif) no-repeat center ;
}

a.printBg:hover{
	background: #666 url(../images/site_wide/print.gif) no-repeat center ;
}

/*homepage
-------------------------------------------------------------- */
.topPad{ margin-top: 15px; }

/*Welcome box - business card and hello on homepage, connect home, learn home and Meet home
---------------------------------------------------------------*/
.welcome { width: 230px; margin: 0; float: left; }

.welcome .bottom{
	background: url(../images/site_wide/hello_btm.gif) no-repeat left;
	width: 230px;
	height: 10px;
	display: block;
	line-height: 0;
	font-size: 1px;
}

/*Business Card*/
.welcome .businessCard{
	float: right;
	width: 123px;
	height: 80px;
	text-align: center;
	display: table;
	#position: relative;
}

.welcome .businessCard .cardname{
	padding-right: 5px; /*to account for drop shadow*/
	display: table-cell;
	vertical-align: middle;
	#position: absolute;
	#top: 50%;
}

.welcome .businessCard .cardname .ieFix{ #position: relative; #top: -50%; #left: -50%; }

/*Business card backgrounds*/
.welcome .card1{
	background: url(../images/site_wide/busCards/bg_busCard.jpg) no-repeat;
	color: #fff;
}

.welcome .card2{
	background: url(../images/site_wide/busCards/bg_busCard_grn.jpg) no-repeat;
	color: #000;
}

.welcome .card3{
	background: url(../images/site_wide/busCards/bg_busCard_blue.jpg) no-repeat;
	color: #000;
}

.welcome .card4{
	background: url(../images/site_wide/busCards/bg_busCard_ylw.jpg) no-repeat;
	color: #000;
}

.welcome .card5{
	background: url(../images/site_wide/busCards/bg_busCard_gry.jpg) no-repeat;
	color: #000;
}

.welcome .middle{
	border-left: 2px solid #999;
	border-right: 2px solid #999;
	padding: 0 10px;
	width: 206px;
	border-bottom: 1px solid #fff;
	height: 215px;
}

.welcome .middle .hello{
	float: left;
	padding-top: 22px;
	font-size: 2.2em;
	text-align: right;
	color: #d90733;
	height: 58px;
}

.welcome .bcStrap{ font-size: 9px; }

/*Welcome Copy*/
.welcome .middle p{ font-size: 0.9em; }

.welcome .top{
	background: url(../images/site_wide/hello_top.gif) no-repeat left;
	width: 230px;
	height: 10px;
	line-height: 0;
	font-size: 1px;
}

/*Flash hero holder - hero content for other home areas*/
.flashHero{
	float: right;
	text-align: center;
	width: 703px;
	height: 235px;
}

.flashHero .meetHero{
	background: #F0F3DD url(../images/site_wide/meet_bg.gif) no-repeat left top;
	}
	
.flashHero .meetText{
	padding: 15px 5px 5px 20px;
	text-align:left;
	width:450px
}

.flashHero .meetHero td{
	width:50%;
}

.flashHero .meetHero h2{
	color:#D90733;
	font-size:1.8em;
}

.flashHero .meetSearch{
	width: 703px;
	height: 40px;
	background: #D1DB84 url(../images/site_wide/meet_search.gif) no-repeat;
	text-align: left;
	margin-bottom: 0px;
}

.flashHero .meetSearch h3{
	color: #D90733;
	margin-bottom: 13px;
	padding: 10px 5px 0 10px;
	font-size: 1.3em;
	float: left;
}

.flashHero .meetSearch .formSearch{ margin: 8px 10px 0 0; }

/*Ticker - home page only
-------------------------------------------------------------*/
.ticker{ margin: 15px 0 15px 0; overflow: hidden; }

.ticker .left{
	background: url(../images/site_wide/ticker_lt.gif) no-repeat;
	width: 8px;
	height: 40px;
}

.ticker .right{
	background: url(../images/site_wide/ticker_rt.gif) no-repeat;
	width: 9px;
	height: 40px;
	float: right;
}

.ticker .middle{
	width: 931px;
	height: 15px;
	border-top: 2px solid #d90733;
	border-bottom: 2px solid #d90733;
	padding: 10px 0;
	color: #000;
	overflow: hidden;
	text-transform: uppercase;
	text-align: left;
	float: left;
}

.ticker li{
	background: url(../images/site_wide/greyBullet.gif) center left no-repeat;
	padding: 0 1em 0 2em;
	color: #666;
	font-size: 1.0em;
	display: inline;
}

.ticker li a{ color: #666; text-decoration: none; }

.ticker li a:hover { text-decoration: underline; }

.ticker li.tickerRed{
	background: url(../images/site_wide/redBullet.gif) center left no-repeat;
}

.ticker li.tickerRed a{ color: #c31f41; }

.ticker ul{ overflow: hidden; width: 9999px; }

/* liScroll style declarations */

.tickercontainer { /* the outer div with the black border */
width: 924px;
height: 27px; 
margin: 0; 
padding: 0
overflow: hidden; 
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 0px;
top: 0px;
width: 924px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 5px;
list-style-type: none;
margin: 0;
padding: 0;

}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
}
ul.newsticker a {
white-space: nowrap;
padding: 0 0 0 20px;

margin: 0 50px 0 0;
} 
ul.newsticker span {
margin: 0 10px 0 0;
} 

/*Promo Boxes - on all homes
---------------------------------------------*/
ul.promos li { width: 225px; margin-right: 14px; float: left; }

ul.promos #one{ width: 230px; }

ul.promos li h3{
	color: #fff;
	font-size: 1.4em;
	padding: 6px 10px 5px 10px;
	margin: 0px;
	background: #666;
}

#latestticker2
{
	background-color: Red;
	position: relative;
	left: 400px;
}

ul.promos li h3 a{ text-decoration: none; color: #fff; }

ul.promos li h3 a:hover{ text-decoration: underline; }

ul.promos li div{ padding: 10px; }

ul.promos li div a{ text-decoration: underline; }

ul.promos li div a:hover{ text-decoration: none; }

ul.promos li .lGrn{ background: #F0F3DD; }

ul.promos li .lGrn a{ color: #666; }

ul.promos li .rubyRed{
	background: #CB2034 url(../images/site_wide/promo_red.gif);
	color: #fff;
}

ul.promos li .rubyRed a{ color: #fff; }

ul.promos li .rubyGrn{
	background: #D1DB84 url(../images/site_wide/promo_grn.gif);
	color: #000;
}

ul.promos li .rubyGrn a{ color: #000; }

ul.promos li .lGry{ background: #ECECEB; color: #666; }

ul.promos li .lGry h3{ background: none; font-size: 1.0em; color: #666;}

ul.promos li .lGry a{
	color: #fff;
	text-decoration: none;
	width: 4em;
	float: right;
}

/*Meet promos
-------------------------------------------------------------- */
ul.meetPromos li { width: 466px; margin-right: 14px; float: left; }

ul.meetPromos li h3{
	color: #D90733;
	font-size: 1.4em;
	padding: 6px 10px 5px 10px;
	margin: 0px;
	background: #ECECEB;
}

ul.meetPromos li h3 a{ text-decoration: none; color: #D90733; }

ul.meetPromos li h3 a:hover{ text-decoration: underline; }

ul.meetPromos li div{
	padding: 0;
	border-left: 2px solid #ECECEB;
	border-right: 2px solid #ECECEB;
	border-bottom: 2px solid #ECECEB;
	color: #666;
	height: 111px;
	overflow: hidden;
	background: #fff;
}

ul.meetPromos li div img{ padding: 0 10px 0 0; float: left; }

ul.meetPromos li div p{ padding-top: 10px; }

ul.meetPromos li div a{ text-decoration: underline; }

/* Pagination
-------------------------------------------------------------- */
.paginate {
	font-size: 12px;
	padding: 20px 0;
	margin-left: auto;
	margin-right: auto;
}

.paginate a, .pageList .this-page {
	padding: 2px 6px;
	border: solid 1px #ddd;
	background: #eeeeee;
	text-decoration: none;
}

.paginate a:visited {
	padding: 2px 6px;
	border: solid 1px #ddd;
	background: #fff;
	text-decoration: none;
}

.paginate .Prev {
	margin-right: 20px;
	padding: 2px 6px;
	border: solid 2px #ddd;
	background: #fff;
}

.paginate .break {
	padding: 2px 6px;
	border: none;
	background: #fff;
	text-decoration: none;
}

.paginate .Next {
	margin-left: 20px;
	padding: 2px 6px;
	border: solid 2px #ddd;
	background: #fff;
}

.paginate .this-page {
	padding: 2px 6px;
	border-color: #999;
	font-weight: bold;
	font-size: 13px;
	vertical-align: top;
	background: #fff;
	color: #D90733;
}

.paginate a:hover {
	color: #fff;
	background: #D90733;
	border-color: #ccc;
	text-decoration: none;
}



/* ----- Site Map ----- */

.sitemaplevel1 a
{
	color:#E00538;
	font-size:1.1em;
	font-weight: bold;
	text-transform: uppercase;
}
.sitemaplevel2 a
{
	color:#E00538;
	font-size:1.0em;
	font-weight: bold;
}
.sitemaplevel3 a
{
	color:#666666;
	font-size:0.9em;
	 	 	 
}

/* -----FORUM STYLES ---------*/
table.forumtable,
table.categoryHeader {
	border-collapse: collapse;
	border-spacing: 0;
}
table.forumtable td, 
table.forumtable th {font-size: 100%;}
table.forumtable td a,
table.categoryHeader td a,
div.links a {color: #666;}
table.forumtable td a:hover,
table.categoryHeader td a:hover,
div.links a:hover {text-decoration: none;}
table.forumtable th 
{
	background-color: #CB2034;
	color: #fff;
	padding: 4px;
	font-weight: bold;
	font-size: 105%;
	border: 1px solid #fff;
}
td.greybg br,
td.forumgreybg br {display: none;}
table.forumtable td table.forumtable-inner {width: 836px;}
table.forumtable td table.forumtable-inner td.forumgreybg br {display: block;}
table.categoryHeader td 
{
	padding: 4px;
	background-color: #D1DB84;
	border: 1px solid #fff;
	color: #EA275D;
}
div.forumbox {border: 1px solid #fff; border-top: 0;}
div.forumbox table.forumtable {border-bottom: 1px solid #fff;}
div.forumbox table.forumtable td,
td.greybg {
	padding: 4px 2px;
	background: #eee;
}
td.forumgreybg {
	padding: 4px 2px;
	background: #eee;
}
table.forumtable td.border-r {border-right: 1px solid #fff;}

table.addpost td {padding: 4px 20px 4px 4px;}
table.addpost textarea {font-family: "Trebuchet MS"; font-size: 12px;}

div.links 
{
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
	padding: 7px 12px;
	margin: 20px 0;
	background-color: #f4f4f4;
}

h1.header 
{
	font-size: 2em; 
	padding: 10px 0 0; 
	color: #db1e36;
}
h2.header 
{
	font-size: 1.4em;  
	color: #666;
	margin-bottom: 20px;
}


/*.forum tr{
	border-top: 1px solid white;
	font-size: 100%;	
}*/
#forumuserinfoStatus{
	background-color: Silver;
	width: 30%;
	float: right;
	text-align: right;
	padding: 4px 0 4px 0;	
}
#forumNav{
	background-color: Gray;
	width: 65%;
	float: left;
	padding: 4px 0 4px 0;	
}


th.comment {
	background-color: #DB1D36;
	padding: 5px;
	color: #fff;
}

td.comment {
	background-color: #eee;
	padding:5px;
}

/* Forms
-------------------------------------------------------------- */
/* Clearing floats without extra markup
	Keep this at the bottom of the stylesheet!!!
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] tester*/
.clear { display: inline-block; }

   
.clear:after, .container:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

* html .clear { height: 1%; height: auto; }

.clear { display: block; }