/* layoutstyles.css */

/* Universal style rule */
*{
/* Block all browser default margins and padding */
  margin:0;
  padding:0;

  /* Temporary borders */
/* border:dashed 1px #f00; */
}

body{
background: #000;   /* url(images/friendsbackgrd1.jpg) box-bluepurpc.jpg */ 
font-family: Arial, Helvetica, sans-serif;
}


a{
	color: #fff;
	text-decoration: none;
}

a:link{
	color: #fff;
	text-decoration: none;
}

a:visited{
	color: #fff;
	text-decoration: none;
}

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

#wrapper{
  width:60em;
/*  background-color: #ccc; */
/* Put 20px margin above the wrapper */
/* Set right and left to auto for centering */
/* margin: top right bottom left */
   margin: 20px auto 0 auto;
   position: relative;
  }
#wrapper h1{
color:#fff;
letter-spacing:0.08em;
font-family:Tahoma,Geneva,sans-serif;
font-size:3em;
}

#branding{
 width:60em;
/* background:#090f98 url(images/bluebox10.jpg) repeat-x center; */
background-color:#000;
position:absolute;
top:3em;
height:17.5em;
}

#branding h1, h2, h6{
color:#b99cff;
letter-spacing:0.08em;
font-style:normal;
font-family:"Comic Sans MS","Comic Sans MS", cursive;
}



/* Style for Navbar  */

#navbar{
 width:60em;
background-color:#090f98;
position:absolute;
top:3em;  /* 20.5 */
/* border-top:solid 1px #000;      to draw line above nav bar  */

}


/* Navbar division */
#navbar{
 /* Left margin must match leftcolumn width */  /* This is the empty space next to the blanks */
  margin-left:0em;
  background:#000 repeat-x center;       /* #090f98 url(images/bluebox10.jpg) for the navbar you do see outside of links. see the same applied below for the links boxes can be the same */
  height:1.6em;   /*  so the height will be the same no matter what browser used. also to match height of font below, .8X2  */


}

/* Remove bullets from ul in the navbar */
#navbar ul{
  list-style-type:none;
}

/* List items in the navbar */
#navbar li{
 float:left; 
 /* Required for drop-down menus */
position:relative;

}

/* Applies to navbar links, unvisited and visited */
#navbar a,
#navbar a:link,
#navbar a:visited{
  text-decoration:none;
  font-family:Verdana, Geneva, Arial, Sans-Serif;
  font-size:80%;
  color:#ff0;  /* 090f98; */
  /* background-color:#aaa;  */
 background:#000; /* url(images/bluebox10.jpg) repeat-x center; */
  display:block; /* hyperlinks are inline elements so need to convert to block to be able to apply a width and height */
  height:2em;
  width:6em;
  /* border-right:solid 1px #ddd; */  /* the vertical line separators */
 text-align:center;
line-height:2em;
 outline-style:none; /* just in case you see a dotted line in firefox. this is to remove it  */
}

/* Navbar hover, active links and current page links  */
#navbar a:hover,
#navbar a:active
#navbar li.selected a:link,
#navbar li.selected a:visited{
 /* background-color:#000; */
  background:#ddd;  /* url(images/navhover.jpg) repeat-x center; */
  color:#80c;
}

/* Drop-down menu styles */

#navbar li ul{
  position:absolute;
  z-index:100;
 visibility:hidden;
}

/* Make drop-down visible on navbar hover */
#navbar li:hover ul,
#navbar li a:hover ul{ /* IE6 hack */
  visibility:visible;
  top:1.6em; /* to make IE6 happy  */
  left:0;   /* to make IE6 happy  */

}

/* Applies to links on the drop-down menu */
#navbar li:hover ul li a,
#navbar li a:hover ul li a{ /* IE6 hack */
  background:#ccc; /* Removes background image */
  color:#000;
  text-align:left;
  display:block;
  width:10em;
  padding:0 0 0 1em;
  height:auto;
}

/* Hover on drop-down menu links */
#navbar li:hover ul li a:hover, #navbar li a:hover ul li a:hover{ /* IE6 hack */
  background: #aaa; 
  color:#000;
}

/* IE6 hack applies to its table drop-down */
#navbar table {
  margin:-1px; 
  border-collapse:collapse; 
  position:absolute;
  top:0.5em;
  left:0;
  z-index:100;
}


/* End Style for Navbar */




/* Style for main content column */
#content{
 /* the width is 23em */
 background-color: #000;
 text-align:center; 
  position:absolute;
   top:5em; 
   left:15.5em;
   right:15.5em; /*same as rightcolumn width */

/* border: 1px solid #0c0; */
height:45em; 
  /*overflow:auto; */
}

#content h1{
font-style: normal;

font-weight: bold;
font-size:1em;
}

#content h2{
font-family:"Comic Sans MS","Comic Sans MS", cursive;
color: #ccc;
font-style: normal;
font-weight: normal;
font-size:.75em;
text-align: left;
}

#content h3{
font-family:"Comic Sans MS","Comic Sans MS", cursive;
color: #000;
font-style: normal;
font-weight: normal;
font-size:.5em;
text-align: left;
}

.homepageimg{
float: right;
margin-left: 5px;
border: 1px solid #000;
width:10em;
height:10em;
}

.friendinfop{
font-family: verdana, helvetica, sans-serif;
font-style: normal;
font-weight:normal;
font-size:.75em;
}

.letterhilite{
font-size: 1.5em;
font-weight: bold;
}

.traceyhilite{
font-size: 1em;
font-weight: bold;
}

.righthilite{
font-size: 1.5em;
font-weight: bold;
color: blue;
}

.classhelpwarning{
font-style:normal;
font-family:"Comic Sans MS","Comic Sans MS", cursive;
font-size:1em;
color: red;
}

.content{
color:#fff;
letter-spacing:0.08em;
font-family:Tahoma,Geneva,sans-serif;
font-size:0.5em;
}

#content ul{
margin-left:2em;
text-align:left;
}






textarea.rarea{ 
background-color: #ccc;
 }

#leftcolumn{
 background-color: #000;
 text-align:center; 
  position:absolute;
   top:5em; 
   left:0em; 
  width: 20em;
/*  border: 1px solid #0c0; */
 height: 45em; 
 /* overflow:auto; */
}

#leftcolumn h1{

color: #fff;  /* 030 */
letter-spacing:0.08em;
font-family:Tahoma,Geneva,sans-serif;
font-size:1em;
}

/* #leftcolumn p{width:100%;float: left;}  */

p.normal
{
  text-align:left;
  font-family: arial,helvetica;
  font-size: .8em;
  margin-left: 0.25em;
  margin-right: 0.25em;
  }

p.content
{
 text-align:center;
  font-family: arial, helvetica, sans-serif;
  font-size: .8em;
  margin-left: 0.25em;
  margin-right: 0.25em;
}

p.about
{
  text-align:justify;
  font-family: verdana, helvetica, sans-serif;
  font-size: 1.25em;
  margin-left: 1.25em;
  margin-right: 1.25em;
  color:#fff;
  }



#leftcolumn img{
float: right;
margin-left: 0.25em;
border: 1px solid #fff;
}
#rightcolumn img{
/* float: right; */
text-align: center;
margin-left: 0.25em;
border: 1px solid #339999;
}

#rightcolumn{
 background-color: #000;
 text-align:center; 
  position:absolute;
   top:5em; 
   right:0em; /*same as rightcolumn width */
  width: 15em;
/* border: 1px solid #0c0; */
height:45em; 
 /* overflow:auto; */
color:#fff;
}


#rightcolumn h1{
color:#fff;
letter-spacing:0.08em;
font-family:Tahoma,Geneva,sans-serif;
font-size:1em;
}


/* Page footer style */
#footer{
     /* clear: both; */   /* It tells an element not to float next to an item that's above or beside it  */
     text-align:center;
     width: 100%;
     background-color:#000;  /* #090f98 */
   /*  border-top: 1px solid #732654; */
     position: absolute;
     top:59em;  /* 72 */
     color:#b99cff;
      }

#footer a{
color:#b99cff;
}
/* Generic style class for highlighting text */
.hilite{ background-color:#ffff00;
}

/* Style for tables of thumbnail images */
table.thumbs{
   background:#c082ff url(images/womanpainting2.jpg) repeat-x center;
  position:absolute;
     width: 90%;
   border-collapse: collapse;
}
/* Style for table cells that contain thumbnails */
td.thumbs{ 
   border: solid 1px #206;
     text-align: center;
 }
/* Style for thumbnail images */
img.thumbs{
    width: 80%;
   height: 80%;
   
}