/* Demo external CSS sheet. */
/* Oh yeah, this is how you add a comment. */


/* 
    Set a generic font for the entire document. 
*/
body
{
	font-family: Arial, Helvetica, sans-serif;
	color: navy;
}

/* 
    Multiple simple selector forms: apply same format to all
    paragraphs, unordered lists, and ordered lists. 
*/
p, ul, ol
{
	width: 80%;
	text-align: left;
	font-weight: normal;
	font-size: 10pt;
	background-color: white;
}

hr.black50
{
    color:black; 
    background-color:orange;
    text-align:left; 
    width:70%; 
    margin-left:0px;
    height:3px;
}

/*
   The pre tag is used for preformatted text
   and can be used to embed spaces in text easier
   than the non-breaking space ( ).
*/
pre
{
	font-family: Arial, Helvetica, sans-serif;
	color:navy;
	font-size:10pt;
}

/*
    Class selector: Special formatting for bold paragraphs only.
    In the html simply add class="bold" to your <p> tag, as
    in <p class="bold">Bold stuff</p>
*/    
p.bold 
{
     font-weight: bold;
}

/*
   Generic selector: Special formatting for any type of tag.  In the 
   html simply add class="really-big" to the tag, as in 
   <p class="really-big">Big</p> or <h5 class="really-big">Big H</h5>
*/   
.really-big
{
      font-size: 24pt;
}

/*
   This is an id selector, which will apply only to the index.
   It should be used ONE TIME ONLY in your html!  In the html simply add
   id="index", as in <div id="index">Stuff</div>
*/
ul#index
{
	color: red;
	width: 80%;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	font-weight: normal;
	font-size: 10pt;
	background-color: white;
}

/*
   This is another id selector, which will apply only to a special paragraph.
   It should be used ONE TIME ONLY in your html!  In the html simply add
   id="odd-paragraph", as in <p id="odd-paragraph">Halloween</p>
*/
p#orange-paragraph
{
	color: orange;
    font-size: 12pt;
	font-weight: bold;
    background-color: black;
    display:inline;  /* makes background only the width of the text */
}

/*
   text-transform is a quick way to modify the capitalization of your text.
   other options include lowercase or capitalize, which caps each word.
*/
#title
{
     text-transform: uppercase;
}

/*
  This just adds basic styles to the input and textarea form fields.
*/  
input, textarea 
{ 
  width:200px; 
  color: #333; 
  border:1px solid blue; 
  padding:3px; 
  background-color: gray; 
  margin-bottom:1em;
  display:block;
}

input.name
{
    margin-left:4.5em;
}

textarea
{
    margin-left:5.8em;   
}

/* 
  This changes how fields look when the user clicks on an input field. 
  It makes use of the focus property.  
*/
input:focus, textarea:focus
{ 
  border:1px solid red; 
  background:yellow; 
}

/* 
  This changes how fields look when the user hovers over an input field. 
  It makes use of the hover property.  
*/
input:hover, textarea:hover
{ 
  border:1px solid blue; 
  background:orange; 
}

/*
  The next few are used simply to play with the cursor.
  Here they are applied to the anchor tags, but other tags 
  can be used as well.
*/  
a.wait
{
    cursor: wait;
}

a.help
{
    cursor: help;
}

a.crosshair
{
     cursor: crosshair;
}