/* 
/* William Paterson University 2008
/* File:		design.css
/* Programmer:	Brian Publik - Information Systems
/* Date:		11/14/08
/* Notes:		This is the css file for the design and layout of the new WPU pages
/*				**IMPORTANT - DO NOT MODIFY THIS FILE ** as it is a common file to ALL of the wpu pages.
/*				Please contact Brian Publik in Information Systems to obtain an alternate file which you may
/*				modify to make any css / design changes you wish.  
/*
/*				This file should be used as a reference when overriding styles.
/*
/*				NOTE ** This file inherits some styles from layout.css, mainly body and banner styles which
/*						shouldnt be overrided.
 */




/************************************/
/*	CSS for tag styles
/************************************/
a{ text-decoration:none; }
a:hover{ text-decoration:underline; }

*+html img{ margin-bottom:-3px; }
*html img{ margin-bottom:-3px; }

/*************************************************************************/
/*				CSS File for Page Layouts and Menus
/*************************************************************************/


/* PNG image hack */
img, div { behavior: url(/global/js/iepngfix.htc) }

/* Gives the body a little margin */
body{margin-bottom:20px;}

/* Hack for IE 6 - Lets nav menu fill to 100 % of body, this is needed plus the height:100% any div's to be liquid */
* html { height:100%; }
* body { height:100%; }

/* Add border around everything */
#navwrap{border:1px solid #000000; }
* html #navwrap{
height:auto !important;
height:480px;
}

#genBanner{}
#genBanner img{ margin-bottom:-3px;}

/*	Main content area, Everything After the Department's Banner	*/
/*
/*	Encapsulates all the columns under Dept Banner, but not Footer
*/
.mcontent{
	position:relative;			/* relative */
	min-height:500px;			/* force a min height */
	height:auto !important;
	height:500px;
	width:1000px;
	background-color:#000066;	/* Changes the bg color to the color of the navigation menu , couldnt 
								find another way to having 100% height liquid left nav in all browsers 
								mostly due to IE 6 	*/
	
	margin-top:0px;
	background: #000066 url(/global/images/common/classic_wpu/WP_logo_cms.gif) bottom left no-repeat;
}



/* Used for pages without navigation and to display messages etc*/
.bcontent{
	position:relative;			/* relative */
	min-height:500px;			/* force a min height */
	height:auto !important;
	height:500px;
	width:1000px;
	background-color:#ffffff;	/* Changes the bg color to the color of the navigation menu , couldnt 
								find another way to having 100% height liquid left nav in all browsers 
								mostly due to IE 6 	*/
	
	margin-top:0px;
	
	}



/*************************************************/
/*		 Vertical Navigation Styles				 */
/*********************************************** */



/* Vertical Menu container, positions menu */
#vertMenu {
	/*float:left;*/
	position:absolute;
	height: 400px;
	width: 170px;
	
}
*+ html #vertMenu{
margin-left:-175px;
}
* html #vertMenu{
margin-left:-175px;
}


/**** Main Menu Styles ****/
#vertMenu ul {
margin: 0;
width: 169px;
	
}
*+ html #vertMenu{
width:160px;
}
*html #vertMenu{ width:160px; }

/*Just sets the borders on the Menu item li elements, should control the height and padding etc, with a element */
#vertMenu  li{
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000099;
    margin:2px;
	list-style:none;
}
#vertMenu ul li ul li { /*positions and adds background to sub-menu */
	background-color:#1c1c78;
	padding:0;
    margin:0;
    border:none;	 	
}

*+ html #vertMenu ul ul { /*IE7 hack for position of sub-menu ul */
    margin-top:0px;	 	
}
* html #vertMenu ul ul { margin-top: 10px; }

#vertMenu  li a  {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding:3px 2px 3px 6px;							 /* Positions the text in the center of the li element*/
	text-decoration: none;
    display:block;										/* Lets A expand to fill li element, making clickable area*/
	color:#FFFFFF;
	}
	
	#vertMenu  ul li ul li a  { /*styles the sub-menu text*/
	font-size: 10px;
    color:#cc9966;
	}
	

/* Hack to fix the IE 6 problem with having the whole li element clickable*/
* html #vertMenu ul li a{
clear:both;
width:100%;
height:1%;
}
*+ html #vertMenu ul li a{
width:100%;
}
	
#vertMenu a:hover {
	background-color:#a8a8ca;		 /*Link back ground color */
	cursor:hand;
	color:#000000;	
}



/***** Sub Menu Styles *****/

/* Main Subment UL */
#vertMenu ul li ul{
border-top-style:none;		/*Get rid of the border */
padding-left:20px;			/* Moves the submenu in a bit */
padding-bottom:5px;			/* Add some padding to the bottom */
width:150px;
}

#vertMenu ul li ul li a{
padding:5px 0px 5px 6px;	/*Decreases the padding on submenu links */
}

#vertMenu ul ul ul{
width:120px;
}



/*************************************************/
/*		Content Layouts 						 */
/*********************************************** */




/* Positioning For Left Nav and One Wide Column*/
/* The center column should be have liquid height */
.column_one{
	position:relative;			/* was absolute*/
	margin-left:176px;			/* Moves the main column left */
	margin-top:0px;
	background-color:#ffffff;
	/* For liquid height */
	min-height:500px;
	height:auto !important;
	height:500px;
}




/* Used if there is more than one main content column*/
/* This ensures the two other columns contain a full white or other colored bg */
/* This also moves both columns over */
#columns{
	display:block;
	background-color:#ffffff;
	height:100%;
	margin-left:150px;
}
#columns1{
	position:relative;
        z-index:10;	
	display:block;
	background-color:#ffffff;
	height:100%;
	margin-left:175px;
}
*+html columns1{margin-left:170px;}
*html columns1{ margin-left:170px;}

/* 		Two Column Layouts		*/

/* Main Column , main content */
#twocol_first{
	position:relative;	/* was absolute */
	margin-left:0px;	/* no need for a margin left, columns css takes care of this*/
	margin-right:300px;	/* Makes sure the center column is in between outer columns*/
	max-width:500px;	/* make sure content doesnt overflow */
	/*margin-top:0px;*/
	background-color:#ffffff;
	/* Matches with the mcontent tags, */
	min-height:500px;
	height:auto !important;
	height:500px;
	padding-left: 20px;
}

/* Right Column , Secondary content  */
#twocol_sec{
position:absolute; /* Was relative outside of CMS*/
/*max-width:280px;*/
/*overflow:hidden;*/
width:280px;
margin-left:540px;
height:100%;
}



/* In case we use a footer */
.footer
{
margin-left:auto;
margin-right:auto;
margin-bottom:40px;
width:1000px;
}
#header {
	margin-left: 20px;
	padding-top: 10px;
}
#body {
	margin-left: 20px;
	margin-top: 10px;
}

#body2{
	margin-left: 20px;
	margin-top: 10px;
	width:650px;

}
#body3 {
	margin-left: 20px;
	margin-top: 10px;
}




/**********************************************************/
/*	Classic One Column , No Nav Layout                */
/**********************************************************/

#onecolbody .mcontent{
background: #FFFFFF;
}

#onecolbody .column_one{
position:relative;			/* was absolute*/
	margin-left:0px;			/* Moves the main column left */
	margin-top:0px;
	background-color:#ffffff;

	/* For liquid height */
	min-height:500px;
	height:auto !important;
	height:500px;
	width:1000px;
}

#onecolbody #body{
padding:5px;
}

#onecolbody #navwrap{
border-style:none;
}
/*

*/

#crumbtrail {position:relative; margin-bottom:4px;margin-left:-30px;  height:20px;clear:both; }
#crumbtrail ul {list-style-type:none;}
#crumbtrail ul li { background:url(/global/images/bluearrow.gif) left no-repeat; float:left; padding-left:10px; margin-right:10px; font-size:10px; }


/* Sytles to fix CMS Navigation Reorder button */
*+html .menuReorder > a{
margin-top:20px;
}
*html .menuReorder > a{
margin-top:20px;
}