/* --------
   
   Document: legacy.css
   Comment: styles from the previous design
   Author: University of Washington Bothell
   Date: Aug. 2012 
   
   Table of Content: 
   	1. Right Column
   	2. Content
   	3. Forms
   	4. Overwrite styles for legacy.css

/*---------------------------------------------------------


/* ==================================================================================================== */
/* ========================================== Resources Block ========================================= */

#resources {

/* content in this section is almost always in a Box. CSS is in section below. */

}


/* ====================================================================================================*/
/* ============================================== Boxes ===============================================*/

/* ============ Letter ============ 
Used to highlight letters from the director, professor, etc.
Should only be used in #content.

HTML:
 <div class="letter">
  <p>...</p>   
  <p>...</p>   
 </div>
*/
.letter{
	background: #ffffff url('/uwbothell/media/templateimages/boxes/letterBackground.png') bottom right no-repeat;
	border-left: 1px solid #cccccc;
	border-top: 1px solid #cccccc;
	padding:16px;
	margin-bottom:1.5em;
}
.letter p{
	font-style:italic;
}

/* ============ Quotation ============ 
Used for pull quotes.
Can be used in #content and #resources
HTML:
 <div class="quotation">
  <q>Therefore, I shall resign the Presidency effective at noon tomorrow.</q>
  <cite>Richard M. Nixon </cite>
 </div><!--end .quotation -->
*/



.specialLink{ /*span */
	display:block;
	padding:.5em 0;
	margin:.5em 0;
	background:url('/uwbothell/media/templateimages/boxes/specialLinkBackground.jpg') left no-repeat;
}
.specialLink a{ /*span */
	padding-left:10px;
	color:#39275b;
}

.focusBox, .alertBox, .relatedLinksBox, .focusbox{
	width:184px;
	padding:0 0 20px 0; /* 20px = 12px bottom shadow + 8px extra*/
}
.focusBox h3, .alertBox h3, .relatedLinksBox h3, .focusbox h3{
	margin:0 0 8px 0;
	padding:18px 12px 8px 12px; /* padding:18px 16px 8px 8px;*/
	text-align:center;
}

.focusBox h4, .focusBox h5{
	padding-left: 5px;
}
 
.focusBox p, .alertBox p, .relatedLinksBox p, .focusbox p{
	margin:0 8px 0 8px; /* margin:0 12px 0 4px; */
	padding-bottom:.5em;
}

div.focusBox ul li {
	list-style-type:disc;
	margin-left:10px;
}

/* When a box is in the #content block */

#content .focusBox, #content .alertBox, #content .relatedLinksBox{ float:left; margin-right:16px; }


#content .focusbox h3{ background: #39275b  url('/uwbothell/media/templateimages/boxes/focusBoxHeaderBackground-purple-content.png') left top no-repeat; }
/*#content .alertBox{ background:  transparent url(/uwbothell/media/templateimages/boxes/alertBoxBodyBackground.png) left bottom  no-repeat; }*/
	
/*Hot fix!

#content .alertBox{ background:  transparent url(/uwbothell/media/templateimages/boxes/focusBoxBodyBackground.png) left bottom  no-repeat; } 

End Hot fix*/


#content .relatedLinksBox{ background:  transparent url('/uwbothell/media/templateimages/boxes/relatedLinksBodyBackground.png') left bottom no-repeat; }
#content .relatedLinksBox h3{ background: #39275b url('/uwbothell/media/templateimages/boxes/relatedLinksHeaderBackground-content.png') left top no-repeat; }

/* When a box is in the #resources block */
#resources .focusBox, #resources .alertBox, #resources .relatedLinksBox{ }


#resources .alertBox{ background:  transparent url('/uwbothell/media/templateimages/boxes/focusBoxBodyBackground.png') left bottom  no-repeat; }
#resources .alertBox h3{ background: #dd0000 url('/uwbothell/media/templateimages/boxes/ResourcesAlertBoxHeaderBackground.png') left top no-repeat; }

#resources .relatedLinksBox{ background:  transparent url('/uwbothell/media/templateimages/boxes/relatedLinksBodyBackground.png') left bottom no-repeat; }
#resources .relatedLinksBox h3{ background: #39275b url('/uwbothell/media/templateimages/boxes/relatedLinksHeaderBackground-col5.png') left top no-repeat; }


/* Dual Columns */

.columnWrapper{
	overflow: hidden; 
	width: 560px; /* 3 columns */
}
.leftColumn, .rightColumn{
	position:relative; 
	float:left; 
	width:272px;
}
.rightColumn{
	left:16px; /* adds 16px margin to left column */
}


/* ------------------------------------------------------- Legacy -----------------------------------------------------------------*/

/* images */
div.left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
div.right { float: right; margin: 1.5em 0 1.5em 1.5em; }


/* Curriculum Charts
Yearly Curriculum chart, divided by quarter

CMS feautes like =heading and =paragraph cannot be used inside the curriculum chart
div.curriculumchart4, h4, divv (quarter box), dl, dl>dd are required elements. 

Example HTML:
<div class="curriculumchart4">
<h4>Required Courses</h4>
<div>
<h5>Autumn 2006</h5>
<dl>
<dd><strong>CSS 301</strong> Technical Writing for Computing Professionals (5)</dd>
<dd><strong>CSS 342</strong> Mathematical Principles of Computing (5)</dd>
</dl>
</div>
 
<div>
<h5>Winter 2007</h5>
<dl>
<dd><strong>CSS 161</strong> Fundamentals of Computing (5)</dd>
<dd><strong>CSS 343</strong> Data Structures and Algorithms (5)</dd>
</dl>

</div>
 
<div>
<h5>Spring 2007</h5>
<dl>
<dd><strong>CSS 162</strong> Programming Methodology (5)</dd>
<dd><strong>CSS 301</strong> Technical Writing for Computing Professionals (5)</dd>
</dl>
</div>
 
<div>
<h5>Summer 2007</h5>
<dl>
<dd><strong>CSS 497</strong> Cooperative Education (5)</dd>
</dl>
</div>
</div>
*/

div.curriculumchart4{
	margin-left: 30px; 
	clear: right
}
div.curriculumchart4 h4{ /* Year title*/
	clear: right; 
	float: left; /*must be removed for IE6 & IE7*/
	padding-left: 0;
	width: 80%; 
}
div.curriculumchart4 div{ /* Quarter box*/
	padding: 0px 4px; 
	width: 20%; 
	float: left;
}
div.curriculumchart4 h5{ /* Quarter title*/
	padding: 0px 0px 10px 0;
}
div.curriculumchart4 dl{ /* List of Courses*/
	padding: 0px; 
	font-size: 85%
}
div.curriculumchart4 dl dd{ /* Course */
	padding-bottom: 10px;
}
div.curriculumchart4 div.note{ /* Quarter box*/
	font-size: 85%;
	width: 80%; 
	float: left;
	font-style:italic;
}



table{
	/*background:url(/images/tablebg.png) top right repeat-x;*/
	border-left: 0px solid #999999;
	border-spacing:0px 0px;
	margin:0 0 2em 0; 
	font-size: 100%;
	font-size: 0.75em;
}
table caption{
	text-align:left;
	background:transparent;
}
table thead th{ /* goes along the top row of table*/
	background:#333333;
	color: #ffffff; font-size: 100%; font-weight:normal;
	border-bottom: 1px solid #999999; 
	padding:5px 5px 5px 5px;
	margin:0;
	text-align: center; 
	
}
table thead tr th:first-child, #page table thead tr th.corner{ /* goes along the top row of table*/
	/*background: url(/images/table-firstth.png) top left no-repeat;*/
}
table thead th .subtitle, #page table tbody th .subtitle{ /* smaller text below major heading */
	font-size: 90%;
}
table thead th a{ 
	color: #333333; 
}
table tbody th{ /* goes along the side of table*/
	background: #dddddd;
	border-right: 1px solid #999999; border-bottom: 1px solid #999999; border-left: 1px solid #999999;
	padding:2px;
	padding-right: 5px;
	text-align: center; 
	color: #333333; font-size: 100%; font-weight:normal;
}
table tbody th a{ 
	color: #39275b; 
}
table tbody tr td { /* White background, used for most table cells */
	background: #ffffff ;
	border: 1px solid #999999; border-top:0; border-left:0;
	padding: 2px;
	color: #333333; font-size: 90%; 
	text-align:center;
}
table tbody tr td.disabled{ /* Grey background, used for cells with disabled options and/or buttons */
	background: #cccccc;
	color: #666666;
	border: 1px solid #999999; border-top:0; border-left:0;
	padding: 2px;
	color: #333333; font-size: 100%; 
}

table.nolines, #page table.nolines thead th, #page table.nolines tbody th, #page table.nolines tbody td{
	border: 0;
}



/* ==================================================================================================== */
/* ============================================ Features ============================================== */

/* ============ Randomly Rotate Divs ============ */
/*Used for the rotating pictures feature on the alumni/alumniprofiles page. */

#randomlyRotateDivsContainer h2, #randomlyRotateDivsContainer h3, #randomlyRotateDivsContainer p{ 
	clear: none !important; /* This removes the default clear style. */
} 

#randomlyRotateDivsContainer .rotateDivs img{
	margin: auto auto auto -5px;
}
#randomlyRotateDivsContainer .rotateDivs h3{
	font-size:1.2em
}


#alumni-profiles h2, #alumni-profiles h3, #alumni-profiles p{
	clear: none !important; /*this is to move the picture to the right side without the h2, h3, and p clearing to the next line */
}



/*--------------------20 years ---------------------*/
#navigation ul{ 
	margin: 0 0 1.5em 1.5em; 
}


/*--------------------Google Directions ------------*/
div#googleDirections table tbody tr td{
	border-style: hidden;
	border: none;
}

/*--------------------Google Maps ------------------*/
#content #googleMapContainer img{
background:none;
}
#googleMapContainer{
width:500px;
height:500px;
}
/*Dev testing*/


#map-container {
background:none;
margin:20px auto;
padding-top:0;
width:600px;
}

	a.clicker {
	float:left;
	margin-bottom:0;
	margin-right:4px;
	padding:0;
	}

	#map {
	clear:both;
	margin:0 auto 0 0;
	}
	
	#map table tbody tr td {
		border:none;

	}

	
.hidden {
	display:none;
}

div.map-con {
background:none repeat scroll 0 0 transparent;
margin-bottom:10px;
padding:20px 0;
}

div.map-con div {
	width:560px;
	moz-corner-radius:5px;
}

div.map-con div td span {
	text-align:left;
}

div.map-con input {
	width:400px;
	padding:2px;
	margin:10px;
}

div.map-con input.btn-submit {
background:none repeat scroll 0 0 #93B1CC;
color:#FFFFFF;
display:block;
font-size:14px;
margin:0 0 5px 90px;
padding:3px;
width:120px;
}

div.map-con label {
display:inline-block;
font-size:14px;
width:70px;
}

#content div.map-con ul {
	list-style-type:none;
	padding-bottom:0;
	margin-bottom:0;
}

/*************************** NEW CODE ****************************/

div.map-con2 {
	float:left;
	width: 560px;
}

div.map-con2 h3 {
	background:none repeat scroll 0 0 #f1f1f1;
	clear:both;
	color:#666666;
	line-height: 1.6em;
	margin-top:10px;
	padding: 5px;
	width: 540px !important;
}

#content div.map-con2 a img {
	margin:20px 0 10px 0px;
	float:left;
}

#content div.map-con2 img {
	border:none;
}

div.map-con2 p.intro {
	border-right:1px solid #D2D2D2;
	float:left;
	margin:20px 10px 0 25px;
	padding-right:20px;
	width:160px;
}

div.map-con2 p.desc {
	margin:20px 25px 20px 25px;
	float:right;
	width:320px;
}

 .bold-text {
	font-size:1.2em;
	text-transform:uppercase;
	font-weight:bold;
}


#content div.map-con2 ul {
	float:left;
	list-style-type:none;
	margin:20px 0 0 15px;
}

#content span.link-btn {
	display:block;
	width:133px;
	background:#93b1cc;
	margin:10px 0 0 0em;
	border:1px solid #999;
	-moz-border-radius:3px;
	-webkit-border-radius: 3px;
	border-radius:3px;
	padding:3px 0;
}

#content a.arrow-right {
	background:  url('/uwbothell/media/templateimages/base/arrow-right.png') no-repeat scroll right center transparent;
	color:#FFFFFF;
	font-size:15px;
	padding:3px 33px 3px 15px;
	text-align:center;
	text-decoration:none;
}

#content span.link-btn:hover {
	background:#165788;
}

table.new-table {
	border-left:1px solid #d2d2d2;
	width:580px;
}

 #content table.new-table thead th {
	border-left:none;
	border-bottom:1px solid #D2D2D2;
	border-top:1px solid #d2d2d2;
	margin:4px;
	background:#333333;
	width:300px;
	height:60px;
	border-right:1px solid #d2d2d2;
	font-weight:bold;
	text-align:left;
	padding-left:15px;
}

table.new-table tbody tr.odd td {
	background:#f7fbff;
}

table.new-table tbody tr td {
	width:300px;

	border-right:1px solid #d2d2d2;
	border-bottom:1px solid #d2d2d2;
	text-align:left;
	padding:15px 10px 10px 15px;
	font-size:12px;
}

table.no-borders tr td {
	border:none;
}

/*div.map-con3 {
	width:550px;
	border-top:2px solid #93b1cc;
	padding:20px 0;
	margin-bottom:20px;
	clear:both;
}

div.map-con3 h3, div.map-con3 p {
	float:left;
}

#content div.map-con3 img {
	float:right;
	border:none;
}

div.map-con3 p {
	width:200px;
	margin-left:10px;
}

div.map-con3 h3 {
	width:165px;
}*/

div.map-con3 h3.alert, div.map-con2 h3.alert {
	float:none;
	display:block;
	width:550px;
	background:#eef705;
	margin-bottom:10px;
	color:#39275b;
}

/*used for googleMaps table on nursing/education */
table.new-table tbody.h3_pointer tr td h3{
	cursor:pointer;
}
table.new-table tbody.h3_pointer tr td div.collegeStudents ul li{
	cursor:pointer;
}

/*End dev testing*/



/* Azadeh A. styles from V1*/


#content img.alignright{
float: right;
	margin: 3px 0 5px 15px;
}
#content img.alignleft{
float: left;
	margin: 3px 15px 5px 0px;
}
img.noborder{
	border: 0px !important;
	padding: 0px !important;
	margin: 0 !important;

}

hr.divider{
	border: 0;
	background: url('/components/general/images/content-divider.jpg') no-repeat;
	height: 6px;
	margin-top: 20px;
	margin-bottom: 35px;
}

h3.highlight{
	color: #d09800;
	background: #fff;
	font-size: 14px;
	line-height: 19px;
}

.pdf-icon-med, .xls-icon-med{
	padding-left: 40px;	
	padding-top: 0;
	padding-bottom: 20px;
}
.pdf-icon-med{
	background: url('/uwbothell/media/templateimages/base/pdf-icon-sm.png') no-repeat 4px 4px;
}
.xls-icon-med{
	background: url('/uwbothell/media/templateimages/base/xls-icon-sm.gif') no-repeat 4px 4px;
}

.note{
	font-size: 11px;
	line-height: 16px;
	font-style: italic;
}
.addthis_toolbox{
	margin-top: 30px;
	margin-bottom: 20px;
}

blockquote.quote{
background: url('/uwbothell/media/templateimages/base/quote1.gif') no-repeat top left;
margin: 15px 0;
padding: 20px;
font-weight: normal;
font-style: normal;
font-size: 12px;
line-height: 19px;
color: #707070;
}
blockquote span.quote-name, blockquote cite{
	display: block;
	font-size: 11px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #727272;
	background: url('/uwbothell/media/templateimages/base/quote2.gif') no-repeat top right;


}
.facts-quote{
	padding-top: 25px;
}
.facts-quote img{
	margin: 15px 0px 0px !important;
}
.facts-pdf a, .focusBox-pdf a{
	display: block;
}
.facts-interest{
float: left;
margin-right: 20px;
width: 40%;
}
.facts-interest .inner{
	padding: 20px;
	border: 1px solid #dddddd;
	background: #f1f1f1;

border-top: 0;
}
.facts-interest h3{
	background: #493868;
	padding: 15px;
	text-align: center;
	color: #fff !important;
	margin-bottom: 0;
}
.facts-degrees{
	width: 50%;
	float: right;
}
.columnWrapper .c3-Col1, .columnWrapper .c3-Col2, .columnWrapper .c3-Col3{
width: 176px;
float: left;
position:relative;
	padding-right: 10px;
}

img.facts-charts{
	position: relative;
}
.facts-cities-cols{
	margin-bottom: 40px;
	background-repeat: no-repeat;
}
.facts-cities-cols h3{
	height: 55px;
	padding-left: 15px;
}
.facts-charts-cols h3{
	padding-left: 15px;
}
.facts-cities-cols ul{
	padding-left: 15px;
}

.addthis_default_style a{
	text-decoration: none !important;
}



/* ---------------------------  The Grid   -----------------------------------  */

div#content div.span_1 {
	width:174px;
	float:left;
	margin-right:9px;
}

div#content div.span_1 p, div#content div.span_1 h3, div#content div.span_1 h4 {
	padding-left:8px;
	padding-right:5px;
}

#content h2 {
	clear:both;
}

div#contentWrapper h3 {
	margin-bottom:12px;
	clear:both;
}

/* ---------------------------  Forms  -----------------------------------  */



.EditingFormControlNestedControl{
	padding-bottom:1em;
}


fieldset input[type=radio]{
	height: 1.2em;
}



fieldset p{
	text-align:left;
}
fieldset em { /* denotes required field */
	color: #aa0000;
	font-style:italic;
}

fieldset table{
	background:none;  margin:0; padding:0;/* resets styling */
	margin-bottom:1em;
}
fieldset table tbody td{
	text-align:left; /* resets styling */
	background:none; /* resets styling */
	border:none;
	padding:0;
}
fieldset table tbody td table{ /*nested tables, for radio buttons and checkboxes*/
	margin:0;
}
#content fieldset table tbody td td{
	border:none;
	padding:0;
}

fieldset table tbody td input[type=text], fieldset table tbody td input[type=password], fieldset table tbody td select{ /* inputs in 4 column tables are too wide for form */
	width:100%; 
}

fieldset.buttons{
	padding:15px 0 15px 0;
	background-color:#eeeeee;
	text-align:center;
}
fieldset input[type=submit]{
	height: 1.5em;
	font-size:120%;
	background-color:#ffffff;
	border: 1px solid #cccccc;
}

fieldset .disability{
	font-size:80%;
	font-style:italic;
	color:#666666;
}

.ErrorLabel{ /* error at top of page */
	display:block;
	padding:1em;
	background:#aa0000;
	color:#ffffff;
	border:1px solid #ccc;
	text-align:center;
	margin-bottom:2em;
}
.EditingFormErrorLabel{
	color:#aa0000;
	font-weight:bold;
	padding-bottom:1em;
}
.EditingFormControlNestedControl + .EditingFormErrorLabel{
	margin-top:-1em;
}


/* ===================== Special Styles ===================== */
/*http://www.uwb.edu/facultyandstaff/tsconstruction/timechange*/
#tsconstruct-formtable-require tbody th, #tsconstruct-formtable-exclude tbody th{
	width:120px;
}
#tsconstruct-formtable-require tbody td, #tsconstruct-formtable-exclude tbody td{
	border: 1px solid #999999; border-top:0; border-left:0; /* restores table styles */
}


.auctionitem h3{ clear: both;
}
.auctionitem img{ border: 1px solid #cccccc; padding:2px;
	margin-right: 10px;
}