/*
	design.css (extends core.css)
	contains all design specific colors, images and text formatting
	
	All style rule attributes in alpha-numeric order starting from 0-9 A-Z
	x = horizontal, y = vertical
	property: trbl, tb rl, t rl b, t r b l;
*/

/* COLORS
-----------------------------------------------------------------------------
	
	#hex color-name (desc)
	
*/

/* TABLE OF CONTENTS
-----------------------------------------------------------------------------
	
	_FORMS
	_WRAP
	_HEADER
	_MASTHEAD
	_CONTENT-WRAP
		_COLUMN
		_SIDEBAR
	_FOOTER
	
*/
html{height: 100%;}

body{
	background: #f3f6fb url(../img/site/bg-header.jpg) repeat-x 0 0;
	color: #383838;
	height: 100%;
}

a:link, 
a:visited{ color: #FF6600; }

a:hover, 
a:active{ color: #333333; }

img.left,
img.right,
img.center{
	background-color: #FFFFFF;
	border: 1px solid #999999;
	margin: 0 10px 5px;
	padding: 3px;
}

	img.left{ margin-left: 0; }
	img.right{ margin-right: 0; }
	img.center{ margin: 15px auto; }
	
	img.none{
		background-color: transparent;
		border: 0;
		padding: 0;
	}
	
p, ul, ol, dl{ margin: 15px 0; }

	p, li{ line-height: 15px; }
	
	ul, ol{ margin-left: 20px; }

/* _FORMS
----------------------------------------------------------------------------- */

.btn{ text-align: right; }

label{
	display: block;
	float:left;
	margin-bottom: 3px;
	font-size: 12px;
}
form{}

input,
textarea{
	color: #7e7e7e;
	font: 12px/12px "Arial" serif;
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	margin-bottom: 5px;
	padding: 5px 10px;
	width: 400px;
}
	input.send{
		width: 61px;
		height: 27px;
		position: absolute;
		top: 193px;
		right: 5px;
		border: none;
		padding: 0;
	}
	form p{
		width: 370px;
		float: left;}
	fieldset{
		float: left;
		width: 190px;
	}
		fieldset#fs-last_name{width: 170px;}
		fieldset#fs-email{width: 170px;}
		fieldset#fs-phone{width: 90px;}

	label.small{width: 40px;}
	label.error{color: #ff0000;}
	input.short{ 
		float: left;
		width: 150px; 
	}
	
	input.bottom{margin-bottom: 0;}
		input.first,
		input.email{margin-right: 20px;}
	input.email{width: 230px;}
	input.wide{ width: 600px; }
	
	input.shorter{
		float: left;
		width: 90px;
	}
	
	.inline input, 
	.btn input{ width: auto; }

	textarea{ 
		height: 150px;
		resize: none;
	}

	.btn input{ 
		border: 0;
		text-transform: uppercase; 
	}
	
	.inline input,
	.inline label{ float: left; }

	.inline input{ 
		background-color: transparent;
		border: 0;
		margin-right: 10px;
	}

/* _WRAP
----------------------------------------------------------------------------- */

#wrap{
	z-index: 0;
	margin: 0 auto;
	width: 820px;
	position: relative;
	min-height: 100%;
}
	* html #wrap{
		height: 100%;
	}

/* _HEADER
----------------------------------------------------------------------------- */

#header,
#masthead,
#content-wrap,
#footer{
	margin: 0 auto;
	position: relative;
	width: 820px;
}
	#header h1,
	#header h1 a:link,
	#header h1 a:visited{
		background: transparent url(../img/site/vanderbilt-logo.jpg) no-repeat 0 0;
		height: 52px;
		margin-left: -95px;
		text-indent: -1300em;
		width: 400px;
	}
		#header h1 a:link,
		#header h1 a:visited{
			display: block;
			margin: 0;
		}
	#header h2{
		color: #fdbe0f;
		font: normal 24px/30px "Georgia", serif;
		position: absolute;
		top: 8px;
		right: 0;
	}
	#header p{
		color: #ffffff;
		font: italic 11px/13px "Georgia", serif;
		margin: 0;
		position: absolute;
		top: 11px;
		right: 190px;
	}
		#header p span{font-size: 10px;}

/* _MASTHEAD (if needed)
----------------------------------------------------------------------------- */

#masthead{
	background-color: #e8ebf0;
	border: 1px solid #cacbcb;
	font-family: "Georgia", serif;
	height: 236px;
	margin-top: 30px;
	width: 820px;
}
	#masthead img{float: left;}
	#masthead div{
		position: absolute;
		top: 0;
		right: 20px;
		width: 370px;
	}
	#masthead h2{
		color: #233567;
		font-size: 16px;
		font-style: italic;
		font-weight: normal;
		margin: 10px 0 0 0;
	}
		#masthead h2 span{
			background: transparent url(../img/site/van-tran-program.jpg) no-repeat 0 0;
			display: block;
			height: 32px;
			text-indent: -1300em;
			width: 369px;
		}
		#masthead p{
			color: #505050;
			font-size: 12px;
			margin-top: 7px;
		}
			#masthead p small,
			#masthead p.small{font-size: 10px;}
			
			#masthead p.small{
				color: #ff0000;
				margin-bottom: 5px;
			}

/* _CONTENT-WRAP
----------------------------------------------------------------------------- */

#content-wrap{
	font-family: "Georgia", serif;
	padding-bottom: 80px;
}
	#content-wrap h4{
		background: transparent url(../img/site/left-arrow.jpg) no-repeat 0 0;
		height: 128px;
		position: absolute;
		text-indent: -1300em;
		top: 33px;
		width: 22px;
	}
		#content-wrap h4.next{
			background: transparent url(../img/site/right-arrow.jpg) no-repeat 0 0;
			right: -18px;
		}
		#content-wrap h4.prev{left: -20px;}
	
	ul#nav{
		background-color: #e8ebf0;
		border: 1px solid #cacbcb;
		border-bottom: none;
		height: 32px;
		margin: 30px 0 20px;
	}
		li,
		li a:link,
		li a:visited{
			border-right: 1px solid #cacbcb;
			border-bottom: 1px solid #cacbcb;
			display: block;
			float: left;
			height: 32px;
			line-height: 32px;
			text-align: center;
			width: 203px;
		}
			li#tab-1,
			li#tab-1 a:link,
			li#tab-1 a:visited{width: 160px;}
			
			li#tab-3,
			li#tab-3 a:link,
			li#tab-3 a:visited{width: 246px;}
			
			li a:link,
			li a:visited{
				border: none;
				color: #6c6e71;
				text-decoration: none;
			}
			li.last,
			li.last a:link,
			li.last a:visited{
				border-right: none;
				width: 206px;
			}
			li.current,
			li.current a:link,
			li.current a:visited{
				background-color: #f3f6fb;
				border-bottom: none;
				color: #233567;
			}

	/* _COLUMN
	------------------------------------------------------------------------- */

	
	.column,
	.column-wide{
		float: left;
		margin-bottom: 10px;
		padding-left: 20px;
		width: 246px;
	}
		.column-wide{width: 750px;}
		.column h2,
		.column-wide h2{
			font-size: 24px;
			font-weight: normal;
			line-height: 32px;
			color: #233567;
			border-right: 3px double #233567;
			margin-bottom: 20px;
			width: 256px;
		}
		#content-wrap .column p{
			font-size: 12px;
			line-height: 20px;
			margin: 0 0 10px 0;
			
		}
		.column a:link,
		.column a:visited{
			color: #233567;
		}
		.column img{
			border: 1px solid #cacbcb;
			display: block;
			padding: 1px;
			margin-bottom: 10px;
		}
			.column img.right{
				float: right;
				display: inline;
			}
	
	#content-wrap p{margin-top: 0;}
	
		#content-wrap p small{
			font-size: 9px;
			margin: 0 0 0 20px;
		}
		#content-wrap p.bottom{
			margin-top: 25px;
			font-size: 11px;
			text-align: center;
		}

/* _FOOTER
----------------------------------------------------------------------------- */

#footer-wrap{
	background: #233567 url(../img/site/bg-footer.jpg) repeat-x 0 0;
	width: 100%;
	position: relative;
	height: 80px;
	margin-top: -80px;
	z-index: 0;
}
	#footer{
		color: #f3f6fb;
		font-size: 11px;
		padding-top: 20px;
		text-align: center;
		z-index: 10;
	}
		#footer a:link,
		#footer a:visited{color: #f3f6fb;}

	/* A CSS hack that only applies to IE -- specifies a different height for the footer */

		* html #footer-wrap{
			background: #00689b url(../img/site/bg-footer.jpg) repeat-x 0 0;
			margin-top: -80px;
			z-index: 0;
		}