/*
	Designer: Khaled Elfarra
	Date: 08/23/2009
	Site: www.khaledelfarra.com
*/

/******************************************************************************
===============================  =====================================
******************************************************************************/
body
{
	background: #000 url(../../images/background.jpg) no-repeat center top;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFF;
	font-size: 12px;
}

h1
{
	font-size: 18px;
	color: #949494;
	text-transform: capitalize;
}

h2
{
	font-size: 14px;
	color: #FFF;
	margin: 10px 0 5px;
}
h3
{
	font-size: 12px;
	color: #FFF;
}

h4
{
	font-size: 16px;
	color: #999;
	text-transform: capitalize;
	margin: 10px 0 10px;
	font-style: italic;
}

hr
{
	width: 620px;
	height: 1px;
	color:#666;
	margin: 20px 0;
}

.hr2
{
	width: 620px;
	height: 1px;
	margin: 5px 0;
}

p
{
	font-size:14px;	
}

.floatleft
{
	float: left;	
}

.floatright
{
	float: right;	
}

.corner
{
	-moz-border-radius-topleft: 10px; 
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topright: 10px; 
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-bottomleft: 10px; 
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px; 
	-webkit-border-bottom-right-radius: 10px;	
}

.aligncenter
{
	text-align: center;
	
}

.main-container
{
	width: 960px;
	height: auto;
	margin: 0px auto;
}

.banner
{
	width: 960px;
	height: 175px;
	float: left;
}

/******************************************************************************
============================ Site Navigation ==================================
******************************************************************************/
.menu
{
	width: 960px;
	height:100px;
	float: left;
	text-indent: -999999px;
}
.menu ul
{
	width: auto;
	height: 98px;
	display: block;
	list-style: none;	
}
.menu ul li
{
	width: 142px;
	height: 53px;
	float: left;
	margin-left: 15px;
	margin-top: 25px;
}
.menu a
{
	width: 142px;
	height: 53px;
	float: left
}
.menu span.hover
{
	width: 142px;
	height: 53px;
	float: left;
}

/*************** Navigation Background and rollover effect *******************/
.menu ul li.home {
	background: url(../../images/nav_home.png) no-repeat center top;}
	.menu ul li.home span.hover {
		background: url(../../images/nav_home_over.png) no-repeat center top;}
	
.menu ul li.overview {
	background: url(../../images/nav_overview.png) no-repeat center top;}
	.menu ul li.overview span.hover {
		background: url(../../images/nav_overview_over.png) no-repeat center top;}
	
.menu ul li.members {
	background: url(../../images/nav_members.png) no-repeat center top;}
	.menu ul li.members span.hover {
		background: url(../../images/nav_members_over.png) no-repeat center top;}
		
.menu ul li.multimedia {
	background: url(../../images/nav_multimedia.png) no-repeat center top;}
	.menu ul li.multimedia span.hover {
		background: url(../../images/nav_multimedia_over.png) no-repeat center top;}
		
.menu ul li.resources {
	background: url(../../images/nav_resources.png) no-repeat center top;}
	.menu ul li.resources span.hover {
		background: url(../../images/nav_resources_over.png) no-repeat center top;}
		
.menu ul li.contactus {
	background: url(../../images/nav_contactus.png) no-repeat center top;}
	.menu ul li.contactus span.hover {
		background: url(../../images/nav_contactus_over.png) no-repeat center top;}
		
/******************************************************************************
=============================== Content =======================================
******************************************************************************/
.content
{
	width: 900px;
	height:398px;
	float: left;
	margin: 21px 10px;
	padding: 21px 20px;
	clear: both;
}
/******************************************************************************
============================ Left Content =====================================
******************************************************************************/
.content .left
{
	width: 220px;
	height: auto;
	float: left;
	margin-right: 20px;
}

/************************** Side Navigation **********************************/
.left .panel
{
	width: 181px;
	height: auto;
	float: left;
	padding: 20px;
	margin-bottom: 20px;
	background: url(../../images/content_bg.png) repeat left top;
}

.side-nav ul
{
	width: 171px;
	height: auto;
	float: left;
	margin: 10px;
	list-style: none;
	font-size: 14px;
}
.side-nav ul li
{
	width: 100%;
	float: left;
}

.side-nav ul li a
{
	width: 100%;
	height: auto;
	float: left;
	padding: 0 0 10px 20px;
	display: block;
	text-transform: capitalize;
	background: url(../../images/shapes_arrow_white.png) no-repeat left 3px;
}

.side-nav .inner-nav li a
{
	width: 141px;
	float: left;
	font-size: 12px;
	padding-bottom: 5px;
	background: url(../../images/shapes_bullet_white.png) no-repeat left 3px;
}

.side-nav .hasChild a
{
	padding-bottom: 0px;
}


.side-nav ul li.home a:hover {
	color: #e60d0d;
	background-image: url(../../images/shapes_arrow_red.png);}
	
.side-nav ul li.overview a:hover {
	color: #e5790d;
	background-image: url(../../images/shapes_arrow_orange.png);}
		.side-nav ul li.overview .inner-nav a:hover {
			background-image: url(../../images/shapes_bullet_orange.png);}
	
.side-nav ul li.members a:hover {
	color: #e6e70d;
	background-image: url(../../images/shapes_arrow_yellow.png);}
	
.side-nav ul li.multimedia a:hover {
	color: #78e40d;
	background-image: url(../../images/shapes_arrow_green.png);}
		.side-nav ul li.multimedia .inner-nav a:hover {
				background-image: url(../../images/shapes_bullet_green.png);}
	
.side-nav ul li.resources a:hover {
	color: #0de579;
	background-image: url(../../images/shapes_arrow_teal.png);}
		.side-nav ul li.resources .inner-nav a:hover {
				background-image: url(../../images/shapes_bullet_teal.png);}
	
.side-nav ul li.contactus a:hover {
	color: #0de4e5;
	background-image: url(../../images/shapes_arrow_blue.png);}

/*************************** Club Calendar ************************************/

.calendar a
{
	font-size: 18px;
	color: #949494;
	text-transform: capitalize;
	font-style: italic;
	float: left;
	width: 181px;
	height: 98px;
	display: block;
	background: url(../../images/calendar.png) no-repeat right top;
}


/******************************************************************************
============================ Right Content ====================================
******************************************************************************/
.content .right
{
	width: 660px;
	height: auto;
	float: right;
}

.right .post
{
	width: 620px;
	height: auto;
	float: right;
	padding: 20px;
	margin-bottom: 20px;
	background: url(../../images/content_bg.png) repeat left top;
}

.right .post h1 a
{
	color: #949494;
	
}

.post h3
{
	margin-bottom: 20px;
	font-style: italic;
}

.post .addComment
{
	width: 620px;
	float: left;
	margin-top: 20px;
	color: #FFF;
}
.post .addComment a
{
	background: #333;
	display: block;
	padding: 5px;	
	border:#666 1px solid;
	float: left;
	margin-right: 20px;
}

.post .addComment a:hover
{
	background: #999;	
	border:#FFF 1px solid;
	color: #FFF;
}

.post ul
{
	width: 600px;
	height: auto;
	float: left;
	margin-left: 20px;
}
.post ul li
{
	margin-bottom: 5px;	
}

.post p {
	margin-bottom: 10px;
}

.post strong {
	font-weight: bold;
}
/******************************************************************************
================================== Footer =====================================
******************************************************************************/
.footer
{
	width: 940px;
	height: 140px;
	float: left;
	background: url(../../images/content_bg.png) repeat left top;
	clear: both;
}

.footer a
{
	width: 100px;
	height: 140px;
	margin: 0 10px;
	float: left;
	display: block;
	text-indent: -99999px;
}

.footer span.hover
{
	width: 100px;
	height: 140px;
	float: left;
	background: url(../../images/footer_hover.png) no-repeat left top;
}

.footer a.login {
	margin-left: 20px;
	background: url(../../images/footer_login.png) no-repeat left top;}
	
.footer a.ittf {
	background: url(../../images/footer_ittf.png) no-repeat left top;}
	
.footer a.rulogo {
	width: 360px;
	margin: 0 40px;
	background: url(../../images/footer_rutgerslogo.png) no-repeat left top;}
	
.footer a.sitemap {
	background: url(../../images/footer_sitemap.png) no-repeat left top;}
	
.footer a.contactus {
	margin-right: 20px;
	background: url(../../images/footer_contactus.png) no-repeat left top;}

.copyRight
{
	width: 940px;
	float: left;
	margin-top: 10px;
	font-size: 12px;
}

.copyRight a
{
	color: #999;
}



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


.nextprevious
{
	width: 620px;
	padding: 0 20px 20px;
	float: left;
}

/******************************************************************************
============================= Commenting ======================================
******************************************************************************/
.comments
{
	width: 620px;
	float: left;
	height: auto;
	margin-top: 20px;
}

.comments ul, .comments ul li
{
	list-style: none;
	width: 620px; 
	float: left; 
	height: auto;	
}

.comments ul li
{
	margin: 10px 0px;;	
}

.gravatar img
{
	width: 60px;
	height: 60px;
	float: left;
	margin-right: 20px;
}

.comments .commentbody
{
	width: 540px;
	height: auto;
	float: left;
}



.comments .commentform .commentTextarea
{
	width: 620px;
	float: left;
	height: 200px;
}

.commentSubmitbutton
{
	width: auto;
	padding: 5px;
	float: left;
	height: auto;
	cursor: pointer;
}

/******************************************************************************
================================= Links =======================================
******************************************************************************/

.links
{
	width: 620px;
	height: auto;
	float: left;
	margin: 20px 0 0;
}
.links p
{
	margin-bottom: 5px;
}

.links .image
{
	width: 280px;
	float: left;
	clear: left;
	margin-right: 28px;
	padding: 5px;
	background-color: #333;
	border: #666 1px solid;
	text-align: center;
}

.links .image:hover
{
	background-color: #666;
	border: #999 1px solid;
}

.links .text
{
	width: 300px;
	float: left;
	clear: right;
}