/* CSS Document */
/* Escherized design, copyright 2007 Michael J. Cripps, Ph.D. - http://michaeljcripps.com
CSS for The Teaching of Writing - a practicum (Fall 2007), York College, CUNY.
Escherized adds a new CSS to others previously written for my course websites.

Feel free to use this CSS as a source for ideas about CSS-based designs, but please do not simply lift this CSS without some attribution.
Navigation and header graphic images built using Samurai truetype font. Background image courtesy of http://squidfingers.com - again. Thanks, man!  Special thanks to http://www.solardreamstudios.com and
to http://themaninblue.com this go 'round. I really learned something about IE hacks and sticking a footer to the foot of a document in CSS by mining their footerStickALT
tutorials. I'm also borrowing heavily from Paul O'Brien (http://www.pmob.co.uk/) to get the image rollovers to work with pure CSS, while preserving the option of text-nav with the html (yup,
I still owe a debt to Dave Shea for sub-text-with-image trick. */ 


/*basic elements*/

html { height: 100%;
}

body {
	font-family: Verdana, Arial, helvetica, sans-serif;
	font-size: 8pt;
	font-color: #531b1b;
	height: 100%;
	background-image:  url(images/escherized/bg_texture.gif);
	text-align: center;
	margin: 0;
	padding: 0;
	height: 100%;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #531b1b;
}


h1 {font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12pt;
	color: 531b1b; }

h2 {font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: #531b1b; }
	
a {
	color: #531b1b;;
	text-decoration: underline;
}

a:hover {color: #531b1b;;
text-decoration: underline;
}

/*end basic tags 
*/




#container {
	width: 760px;
	min-height: 100%;  /* for modern browsers */
	height: auto !important; /*for modern browsers */
	height: 100%; /* for IE */
	margin: 5px auto 0 auto;
	text-align: left;
	position: relative; 
}


#introductory {
width: 350px;
min-height: 100px; /* for modern browsers */
height: auto !important; /* for modern browsers */
height: 100px; /* for IE */
/*float: left; */
padding: 0 0 0 0;
margin: 35px 0 0 0;
background: url(images/escherized/header.gif) no-repeat; 
/*position: absolute;
z-index:0; */
}

#main {
	width: 540px;
	min-height: 600px;
	height: auto;
	padding: 5px 2px 5px 2px;
	margin: 10px 0 15px 10px;
	float: right;
	/*background: #ffffff;
	filter: alpha(opacity=90);

-moz-opacity: .9;
-khtml-opacity: .9; */
	
	/*position: absolute;
	z-index: 1;
	border-bottom-style: none; */
}

 * html #main /* for IE */
{
height: 600px;
}

#close {
width: 570px;
min-height: 50px;
height: 50px;
margin: auto auto 0 210px;
bottom: 0 !important;
bottom: -1px; /* for IE*/
padding: 2px;
position: absolute
/*position: relative; */
text-align: center;
  }

#navigation {
width: 175px;
height: 300px;
margin: 100px 0 10px 0;
padding: 0;
float: left;
border-right: 1px solid #531b1b;
}

* html #navigation {
	width: 175px; 
	w\idth: 175px;
}

#styles {
width: 130px;
height: 100px;
margin: 400px 35px 0 0;
position: absolute;
background-color: #ffffff;
}

/*end container elements 
*/

/*navigation elements 
Using CSS to control rollover effects on main navigation. Thanks to Eric Meyer's article at O'Reilly's (http://www.oreillynet.com/pub/a/javascript/2001/03/23/rollovers.html) and, especially, to Paul O'Brien (http://www.pmob.co.uk/).
*/

ul,li{
margin:0;
padding:0;
list-style:none;
}

/*main nav */
.schedule, .assignments, .blog, .students, .resources, .wiki, .contacts {
float:left;
position:relative;
font-family: verdana, arial, helvetica, sans-serif;
width: 150px;
height: 50px;
margin:0 0 0 25px; 
padding: 0; 
border:none;
}
.schedule  {background-image: url(images/escherized/schedule.gif);}
.assignments  {background-image: url(images/escherized/assignments.gif);}
.blog  {background-image: url(images/escherized/blog.gif);}
.students  {background-image: url(images/escherized/students.gif);}
.resources {background-image: url(images/escherized/resources.gif);}
.wiki {background-image: url(images/escherized/wiki.gif);}
.contacts {background-image: url(images/escherized/contacts.gif);}

.schedule a {background-image: url(images/escherized/schedule.gif);
}
.assignments a {background-image: url(images/escherized/assignments.gif);}
.blog a {background-image: url(images/escherized/blog.gif);}
.students a {background-image: url(images/escherized/students.gif);}
.resources a {background-image: url(images/escherized/resources.gif);}
.wiki a {background-image: url(images/escherized/wiki.gif);}
.contacts a {background-image: url(images/escherized/contacts.gif);}

.schedule a:hover {background-image: url(images/escherized/schedule_over.gif);
}
.assignments a:hover {background-image: url(images/escherized/assignments_over.gif);}
.blog a:hover {background-image: url(images/escherized/blog_over.gif);}
.students a:hover {background-image: url(images/escherized/students_over.gif);}
.resources a:hover {background-image: url(images/escherized/resources_over.gif);}
.wiki a:hover {background-image: url(images/escherized/wiki_over.gif);}
.contacts a:hover {background-image: url(images/escherized/contacts_over.gif);}


/*css switcher nav*/
/*.cloisonne, .html {
float:left;
position:relative;
font-family: verdana, arial, helvetica, sans-serif;
width: 130px;
height: 25px;
margin:0; 
padding: 0; 
border:none;
}
.cloisonne  {background-image: url(images/cloisonne/over_cloisonne.gif);}
.html {background-image: url(images/cloisonne/over_html.gif);}

.cloisonne a {background-image: url(images/cloisonne/cloisonne.gif);}
.html a {background-image: url(images/cloisonne/html.gif);}

.cloisonne a:hover, .html a:hover{background:transparent}

*/

/*styling the text navigation here. Span used here to hide text nav in html courtesy of Dave Shea and http://csszengarden.com.
*/
.schedule a, .assignments a, .blog a, .students a, .resources a, .wiki a, .contacts a {
display:block;
font-size: 10pt;
width: 150px;
height: 50px;
margin: 0;
padding: 0;
color: black; text-decoration: none; 
position:absolute;
margin:0;
cursor:hand;
}


.schedule span, .assignments span, .blog span, .students span, .resources span, .wiki span, .contacts span, .cloisonne span, .html span {display:none}


/*end navigation elements 
*/

/*some basic tags, redefined*/
h1 span {display: none;}
h2 span {display: none;}

#close p {
font: small-caps 8pt verdana, arial, helvetica, sans-serif;
}
#close a {color: #531b1b; text-decoration: none;}

#close a:hover { text-decoration: underline;}

/*specialty styles 
*/

.bold {font-weight: bold;}

.center {
margin-top: 70px;
text-align: center;}

/*end specialty styles 
*/