html, body, p, h1, h2, h3, h4, h5, h6, dl, form, fieldset { /* remove default spacings */
	margin: 0;
	padding: 0;
	border: 0;
	 /*font-size: 12px; an attempt to even out font rendering between firefox and safari 
									by defining a fixed base font size */
}

html {
	font-family: "Lucida Sans", "Lucida Sans Regular", Verdana, Arial, sans-serif;
	font-size: 62.5%; 	/* 	reduce browser "default" of 16px to 10 (16 x 62.5% =10)
									 		to make calculations of other sizes using ems 
											easier to figure in my head without needing a calculator
									*/ 
	color: #333333;
}

body {
	font-size: 1.3em; /* 13px */
	text-align: center;
	background-image: url(grafix/bkgDkRed-330505.jpg);
	background-color: #999999;
}

h1 {
	font-size: 4.8em; /* 48 */
}

h2 {
	font-size: 3.6em; /* 36 */
}

h3 {
	font-size: 2.4em; /* 24 */
}

h4 {
	font-size: 1.6em; /* 16 */
}

h5 {
	font-size: 1.4em; /* 14 */
	margin-top: 10px;
}

h6 {
	font-size: 1.3em; /* 13 */
	font-weight: bold;
}


dt {
	margin-left: 15px;
	font-weight: bold;
	text-align: left;
}

dd {
	text-align: justify;
}

h1, h2, h3, h4, h5 {
	font-weight: bold;
	color: #000000;
}


pre {
	font-weight: bold;
	font-size: 1.1em;
}
.backToTop {
	float: right;
	font-size: .75em;
}

.shoveRight {
	float: right;
	font-size: 0.85em;
	font-weight: normal;
	padding: 2px;
	margin-top: -12px;
}

.dueDateRight {
	float: right;
	padding: 2px;
}

.calHeader {
	position: relative;
	padding: 10px;
	border: 2px  #666600 outset;
}

.prevLink {
	text-align: left;
	position: absolute;
	top: 0;
	left: 0;
	padding: 5px 10px;	
}

.nextLink {
	text-align: right;
	position: absolute;
	top: 0;
	right: 0;
	padding: 5px 10px;
}

.calMonth {
	text-align: center;
	width: 100px;
	margin: 0 auto 0 auto;
}

ol {
	list-style-type: upper-roman;
}

ol ol {
	list-style-type: upper-alpha;
}

ol ol ol {
	list-style-type: decimal;
}

ol ol ol ol {
	list-style-type: lower-alpha;
}

ol ol ol ol ol {
	list-style-type: lower-roman;
}

ol ol ol ol ol ol {
	list-style-type: lower-greek;
}

ol ol ol ol ol ol ol {
	list-style-type: decimal;
}


.subH5 {
	font-size: 0.8em;
}

hr {
	height:4px;
    width:90%;
    background:#993300;
    margin: 1px 0px 5px 0px;  
}

a {
	color: #993366;
	font-weight: bold;
}

a:hover, a:focus, a:active {
	color: #CC33CC;
	padding: 0;
}


a img {
	border: none;
	text-decoration: none;
}

blockquote { font-style: italic; }

table {
	border-collapse: collapse;
	text-align: center;
	border: solid 1px #663300;
}

table#datesofInterest {
	/*width: 100%;*/
	table-layout: fixed;
	margin: 0 auto;
}

table#datesofInterest td {
	padding: 7px;
	text-align: right;
}



th {
	font-size: 1.2em;
	font-weight: bold;
}

th.courseName {
	background-image:url(macIntro/grafix/gradientBlu2Reverse.jpg);
	padding-left: 7px;
}

th.colHeads {
	color: #663333;
	/*	border: 4px outset #006600; */
/*	background-color: #006600; */
	background-image:url(macIntro/grafix/gradientLtBluGray.jpg);
	text-align: center;
	font-weight: bold;
}

td {
	text-align: left;
/*	font-size: 0.5em; */
}

td p {
/*	font-size: 1em; */
}

ul, ol, li {
	list-style-position: outside;
	margin: 0px 0px 0px 15px;
	padding-left: 0px;
	text-align: left;
	font-style: normal;
}

ul {
	list-style-type: none;
}

.ulSquare {
	list-style-type: square;
}

.ulCircle {
	list-style-type: circle;
}

.ulDisk {
	list-style-type: disc;
}

.ulNone {
	list-style-type:none;
}

.moreInfoIcon { /* to position graphic for clickable 'more info' icon */
	vertical-align: middle; 
	border: none;
}

#wrapper {
	position: relative;
	width:800px;
	z-index:1;
	margin: 20px auto 10px auto;
	padding: 0px;
}

#tabNav {
	float: right;
	text-align: right;
	width: 25px;
}

#tabMenu {
	list-style:none;
	/*padding:10px 0 40px 25px;*/
	padding: 10px 0;
	width:20px;
/* 	background:url(grafix/bkgDkBlu.jpg); */
	float: left;
	margin-left: 0px;
}

#tabMenu ul {
	margin: 0;
	padding: 0;
}
#tabMenu li {
	display:block;
	width:25px;
	margin: 0; /* prevent any inheritance of values */
	margin-bottom: -29px; /* causes lower tabs to overlap upper tabs */
}

#tabMenu li a {
	text-decoration:none;
 	color:#fff;
 	font-size:14px; /* controls size of text on tabs */
 	line-height:14px; /* controls vertical spacing between letters on tabs */
}

#tabMenu li a em {
	display:block;
 	width: 25px; /* controls width of top bevel portion of tabs */
 	height: 29px; /*controls height of top bevel portion of tab above text */
	background:url(grafix/verticalBlu.gif) right top;
 	font-style:normal;
}

#tabMenu li a strong {
	display:block;
 	width:15px; /* controls width of tab text and bottom bevel portion of tabs */
 	/*padding:0 3px 29px 7px;*/
 	padding:0 7px 29px 3px; /* controls padding for tab text and bottom bevel portion of tabs */
 	text-align:center;
 	text-decoration:none;
 	background:url(grafix/verticalBlu.gif) right bottom; /* ?? does this display bottom bevel from background img */
 	color:#fff;
}

#tabMenu li a:hover {
	border:0;
 	position:relative;
 	z-index:100;
 	cursor:pointer;
}
#tabMenu li a:hover em {
	background-position: center top;
}

#tabMenu li a:hover strong {
	background-position: center bottom;
	color:#660;
}

#tabMenu li a.selected, #tabMenu li a:hover.selected {
	border:0;
 	position:relative;
 	cursor:default;
}

#tabMenu li a.selected em, #tabMenu li a:hover.selected em {
	background-position: left top;
}

#tabMenu li a.selected strong, #tabMenu li  a:hover.selected strong {
	background-position: left bottom;
 	color:#333;
}


#pageHeader {
	background-image: url(macIntro/grafix/bkgLtBlu.jpg);
	padding: 22px 22px 0px 0px;
}

#logoBox {
	float: left;
	width: 22%;
	padding: 5px;
}

.logo { /* to float small logo graphic */
	float: left;
	width: 22%;
	padding: 5px;
	margin-left: -20px;
}
#pageTitleBox {
	z-index:1;
	text-align: right;
	float: right;
	color: #f2f2f2;
	width: 76%;
}

#pageTitleBox h6, #pageTitleBox h5, #pageTitleBox h3, #pageTitleBox h2, #pageTitleBox h1 {
	color: #f2f2f2;
}	

#pageTitleBox h4 {
	color: #333333;
	padding: 10px 0px;
}

#pageTitleBox h5 {
	color: #f2f2f2;
}

#pageTitleBox a {
	color: #f2f2f2;
}

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

#dividerBand {
	background-image: url(macIntro/grafix/gradientDkRedGrayReverse.jpg);
	color: #663333;
	text-align: right;
	padding: 10px;
	vertical-align: middle;
	height: 25px;
}

#pageBody {
	background-color: #666666;
}

#navBar {
	/*	width: 150px; */
	text-align: left;
	font-weight: bold;
	background-image: url(macIntro/grafix/bkgMagenta.jpg);
	color: #333333;
	padding: 15px 0px 10px 20px;
	/*	width: 18%; */
	margin: -12px 0px 10px -20px;
	width: 140px;
	/*display: inline;*/
	float: left;
	position: fixed;
}

#navBar a {
	color: #CCCCCC;
	text-decoration: none;
	display: block; /* causes each link to be a block, rather than inline, so no need for br or p */
	padding: 1px;
}

#navBar a:hover, #navBar a:focus, #navBar a:active {
	/*background-color: #990033;*/
	color: #CC66CC;
	text-decoration: underline;
	padding-left: 10px;/* margin-right: 10px;
	text-align: center; */
}

#navBar a.subMenu {
	padding-left: 15px;
}

#navBar a.subMenu:hover, #navBar a.subMenu:focus, #navBar a.subMenu:active {
	/*background-color: #990033;*/
	color: #663333;
	text-decoration: underline;
	padding-left: 25px;/* margin-right: 10px;
	text-align: center; */
}

#navBar span.current {
	background: url("macIntro/grafix/selectedLinkGray.gif") 0 50% no-repeat;  /* x=0 y=50% of height */
	font-weight: bold;
	padding-left: 15px;
/*	background-color:#FFFFCC; */
 }

.textNav {
	margin: 5px 10px;
	border-top: solid 1px #333333;
	border-bottom: solid 1px #333333;
	padding: 2px;
	/*background-image: url(macIntro/grafix/bkgGrnMd.jpg);*/
	text-align: center;
	font-size: .9em;
	/*color:#333333;*/
}

.textNav a {
	color: #993366;
	background-color: transparent;
	text-decoration: none;
	padding: 1px;
}

.textNav a:hover, .textNav a:focus, .textNav a:active {
	color: #CC33CC;
	text-decoration: underline;
}

.textNavMain {
	text-align: center;
	font-size: 0.9em;
	color: #333333;
	padding: 5px;
	margin: 10px 5px;
	border-top: dotted 1px #330505;
	border-bottom: dotted 1px #330505;
	clear: both;
}


.textNavMain a {
	color: #993366;
	background-color: transparent;
	text-decoration: none;
	padding: 1px;
}

.textNavMain a:hover, .textNavMain a:focus, .textNavMain a:active {
	color: #CC33CC;
	text-decoration: underline;
}

#pageContent2col { /* for 2 col pages */
	width: 650px;
	float: right;
	padding: 15px;
	text-align: justify;
	background-image: url(grafix/bkgLSGray.jpg);
}

#pageContent3col { /* for 3 col pages like assign, and various lessons */
	width: 615px;
	float: right;
	margin: 15px;
	padding: 0px;
	text-align: justify;
}

#pageContent2col h4, #pageContent3col h4 {
	text-align: right;
	border-bottom: 3px solid #730217;
	margin-bottom: 15px;
}

#pageContent2col h5, #pageContent3col h5 {
}

#muizPic {
	float: right;
	margin-left: 15px;
}

#muizPic img {
		border: 1px solid #000;
}

#sideBar {
	float: right;
	/*	margin: 15px 615px; */ /* for fixed position on navBar and sideBar */
	margin: 10px 0px 10px 10px;
	background-image: url(macIntro/grafix/bkgBrnMd.jpg);
	padding: 5px;
	width: 170px;
	text-align: left;
}

.clearBoth {
	clear: both;
}

#pageFooter {
	color: #F2F2F2;
	font-weight: bold;
	padding: 5px;
	text-align: center;
	margin: 10px;
	font-size: 0.7em;
}

#footerCopyValidated {
	;
}

#copyright {
	;
}

.alignCenter {
	text-align: center;
}

.alignRight {
	text-align: right;
}

.imgBorderNone {
	border: 0px;
}

.newMonth {
	background-image:url(macIntro/grafix/bkgLtLtBlu.jpg);
	/*	background-color:#669933; */
	color: #663300;
	font-weight: bold;
}

.notice {
	background-image:url(macIntro/grafix/gradientBrnReverse.jpg);
	color: #663300;
	font-weight: bold;
}


/* ===== Assignments Calendar styles ====== */
/*  loaded with 2nd <link >tag */

/* filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25; */

.blinkRedBold {
	font-weight: bold;
	color: #990000;
	text-decoration: blink;
}

.romanUpper {
	list-style-type: upper-roman;
}

.romanLower {
	list-style-type: lower-roman;
}

.alphaUpper {
	list-style-type: upper-alpha;
}

.alphaLower {
	list-style-type: lower-alpha;
}

.greekLower {
	list-style-type: lower-greek;
}

.decimal {
	list-style-type: decimal;
}

.decimalLeadingZero {
	list-style-type: decimal-leading-zero;
}

.requiredField {
	font-weight: bold;
}

.requiredField:after {
	content: ' (* required)';
	color: #990000;
}
#wrapperHeader {
	text-align: center;
	font-size: 0.8em;
	margin-bottom: 10px;
	color:#F2F2F2;
}

#wrapperFooter {
	text-align: center;
	font-size: 0.8em;
	color:#CCCCCC;
	margin: 1% 0 2%;
	clear: both;
}

.alignLeft {
	text-align: left;
}

.alignRight {
	text-align: right;
}

.alignCenter {
	text-align: center;
}

.warning {
	text-align: center;
	color: #FF0033;
}

.moreInfoOpen { /* for the expand/collapse 'more info' boxes */
	margin-left: 10px;
	margin-right: 10px;
	padding: 10px;
	border: solid 1px #663300;
	background-image:url(macIntro/grafix/gradientGrnMdReverse.jpg);	
}

.moreInfoClosed {
	margin-left: 10px;
	margin-right: 10px;
}

.closeMoreInfo {
	text-align: right;
	font-size: .5em;
}

.moreInfoIcon { /* to position graphic icon for clickable expand/collapse 'more info' box */
	vertical-align: middle; 
	border: none;
}

.textNOTE {
	background-image:url(grafix/gradientWedgwdGray.jpg);
	color: #663300;
	width: 88%;
	margin: 10px auto;
	padding: 5px;
	border: dotted 1px #000000;
}



.printThis {
	background-image:url(macIntro/grafix/gradientGrnMdReverse.jpg);
	color: #663300;
	/*width: 80%;*/
	padding: 5px;
	border-top: 2px solid #000000;
	border-right: 1px dotted #000000;
	border-bottom: 2px solid #000000;
	border-left: 1px dotted #000000;
}

.radioButtonGroup {
	padding: 5px;
	border: 1px solid #663300;
	width: 400px;
	margin: 5px 25px;
}

.codeSnippet {
	background-image:url(macIntro/grafix/bkgGrnMd.jpg);
	margin: 10px 10px 10px 25px;
	padding: 5px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	line-height: normal;
	text-align: left;
}
.resources {
	;
}

.resources ol {
	color: #663333;
	font-weight: bold;
}

.resources ol li {
	color: #000000;
	font-weight: bold;
	font-size: 1.1em;
}


.resources ol li ol li {
	font-weight: normal;
	font-size: inherit;
}

.lessonRecap {
	margin: 10px auto;
	font-size: 1.1em;
	width: 550px;
}

.lessonRecap ol {
	font-weight: bold;
}

.lessonRecap ol ol {
	font-weight: normal;
}

.withUnderBar {
	width: 100%; 
	border-bottom: solid 3px #663300; 
	margin-bottom: 5px;
}

.hot {
	font-weight: bold;
	color: #990000;
}

.indent {
	margin-left: 25px;
	margin-right:15px;
}

#announcements {
	text-align: center;
}

#announcements  h1, #announcements  h2, #announcements  h3, 
#announcements  h4,  #announcements  h5, #announcements  h6 {
	text-align: center;
}

#announcements h5 {
	color:#660000;
}

#announcements p {
	margin-left: 30px;
	margin-right: 30px;
	text-align: justify;
}

#announcements .top {
	background-image: url(macIntro/grafix/gradientYlo2Reverse.jpg);
	margin-left: 15px;
	margin-right: 15px;
	text-align: justify;
	padding-right: 5px;
	padding-left: 5px;
}

/* to make a form field more noticeable when clicked in */
input:focus, textarea:focus, select:focus {
	 background-color:#FFFFCC;
	 border: outset #990000;
}

/* to style a form field text input box via the id= attribute */
input#example { font-size: 2em; }

div.firstChildExample p:first-child {
	 background-color:#999999;
	 color: #FFFFFF;
}
/*
#pageContent2col h5 + p:first-letter { font-size: 300%; font-family:"Lucida Calligraphy", Mistral, cursive; float: left; }
*/

#pageContent2col h5 + p:first-line {font-variant: small-caps; font-size: 125%; }

.infoToggle {
	border:1px dotted black;
	display:none; 
	padding:.5em;
}

.outline li {
	font-size: 1.2em;
	font-weight: bold;
	font-variant: small-caps;
}

ol.outline ol li {
	font-variant:normal;
	font-weight:normal;
	font-size: inherit;
}

.outlineAlt li {
	font-size: 1.2em;
	margin-bottom: 5px;
}

ol.outlineAlt ol li {
	font-size: inherit;
}

.lessonRecap p {
	font-size: 1em;
}

.bigger {
	font-size: 1.175em;
}

.smallCaps {
	font-variant: small-caps;
}

.cssCode {
	font-style: italic;
	font-weight: bold;
	color: #006600;
}

.resources img {
	border: none;
}

.resources img[alt|="[Screen shot"] {
	border: 2px solid black;
}

#dividerBand h4 {
	color: #CCCCCC;
	height: 25px;
}

img#logo {
}

#page {
	width: 770px;
	float: right;
	overflow: auto;
}

.course {
	border: solid 1px #000;
	background-color:#CCC;
	padding: 15px;
	margin-bottom: 20px;
}

.sectionDetails {
	margin-left: 15px;
	margin-top: 1em;
}

#classList {
	margin-bottom: 10px;
}

#validated {
	margin: 15px;
}

#pageTitleBox li {
	list-style-position: outside;
	color: #333;
	text-align: right;
	list-style-type: none;
}

span.small {
	font-size: 10pt;
}

#pageTitleBox ul {
	margin: 20px 0 70px;
	overflow: auto;
}

.lineThrough {
	text-decoration: line-through;
}

.specialNote {
	background-image: url(macIntro/grafix/gradientDkRedGrayReverse.jpg);
	background-color:#903;
	color:#000;
	margin: 25px;
	padding: 10px;
	text-align: center;
}

.specialNote h3 {
	text-align: center;
	color: #333;
}

.specialNote a:link, .specialNote a:visited {
	color: #333;	
}

.photoHeadShot {
	float: right;
	margin-left: 20px;
}

.sectionGraphic {
	float: right;
	margin-left: 20px;
}

.jumpLinks {
	margin: 10px;
	border-top: solid 1px #333333;
	border-bottom: solid 1px #333333;
	padding: 10px;
	background-color: #CCC;
	text-align: center;
	font-size: .9em;
	/*color:#333333;*/

}
.sectionDetails p {
	padding: 5px;
	margin-top: 5px;
}