/* 
   Stylesheet for Thea's Project, v11.04.2008

   
   Container layout of each page, 
     a visual representation of how the div's are arranged:
   
   # = id
   . = class

   body
     #container
       #pagehead
         .navbar
         .navlinks
       #pagebody
         .L_xxlarge (or other column classes)
         .R_xxsmall (or other column classes)
         .xclearline
     #footer
      
*/

/* sets the overall background color, font color, and font size */
body {
  text-align:center; margin:0; padding:0;
  color:#cccccc; background:#153154;
  font-family:arial,helvetica,sans-serif; font-size:10px;
}

/* default fonts */
p,dl,ul,ol {
  font-family:arial,helvetica,sans-serif; font-size:12px; color:#000000;
}
p.header {
  font-family:arial,helvetica,sans-serif; font-size:12px; color:#dddddd;
}
h2 {
  font-family:arial,helvetica,sans-serif; font-size:14px; font-weight:bold; color:#76a0d6;
}
h1 {
  font-family:arial,helvetica,sans-serif; font-size:18px; font-weight:bold; color:#000000;
}
h1.title {
  font-family:arial,helvetica,sans-serif; font-size:26px; font-weight:bold; color:#F7DF59;
}
#footer p,#footer p.xnav {
  font-family:arial,helvetica,sans-serif; font-size:10px; color:#666666;
}
div.navlinks div p {
  font-family:arial,helvetica,sans-serif; font-size:12px; color:#999999;
}

/* default style for links in the content */
a:link,
a:visited {text-decoration:underline; font-weight:bold; color:#000099;}
a:hover {text-decoration:underline; font-weight:bold; color:#0000ff;}


/* other default settings for various html tags */
blockquote {
  margin:0; padding:6px 20px 0 24px;
  line-height:130%;
}
h1 {
  margin:0; padding:0;
}
h2 {
  margin:0; padding:0;
}
img {
  margin:0; padding:0; border:0;
}
p {
  line-height:140%;
  margin:2px 0 2px 0; padding:0;
}
 

/* 
   Class and ID Selectors
   ----------------------------------------------------------------------------- 
   Define styles for all elements except the layout containers 
*/

/* menu links in the header */
a.a1 {
  font-size:12px; margin:0; padding:0 2px 0 2px;
}
a.a1:link,
a.a1:visited {text-decoration:none; font-weight:bold; color:#4386CE;}  
a.a1:hover {text-decoration:none; font-weight:bold; color:#65AFFF;}


a.a2 {
  font-size:14px; margin:0; padding:0 2px 0 2px;
}
a.a2:link,
a.a2:visited {text-decoration:none; font-weight:bold; color:#990000;}  
a.a2:hover {text-decoration:none; font-weight:bold; color:#FF0000;}

/* footer links */
#footer a:link,
#footer a:visited {text-decoration:none; color:#888888;}
#footer a:hover {text-decoration:none; color:#65AFFF;}
  

/* Separator to clear column floats (a "trick" for browser compatibility) */
div.xclearline {
  position:relative; clear:both; width:620px; 
  margin:0; padding:0;
}

/* custom styles for images, for example, use: class="xpic" in the img tag */
img.xpic { /* border around the image */
  margin:1px 3px 3px 1px; padding:2px;
  border:solid 1px #65AFFF;
}
img.xleft {  /* left aligned image */
  float:left; margin:2px 10px 2px 0; padding: 3px;
  border: 1px solid #dcdcdc;
}
img.xright {  /* right aligned image */
  float:right; margin:2px 0 2px 10px;
}

/* footer and header text positioning */
#pagehead p {
  display:inline;
  text-align:left;
}
#footer div p { /* copyright info */
  text-align:right; margin:0; padding:10px 4px 0 0;
}
#footer div div { /* footer links */
  position:absolute; top:10px; width:500px;
  text-align:left; margin:0; padding:0 0 0 4px;
  color:#444444;
}
  

/* 
   Containers for this layout (div's)
   -----------------------------------------------------------------------------
   For this site, #container needs a fixed width so all of the backgrounds and other
   divs inside it line up. Otherwise there are some 1px rounding issues depending on the 
   size of the browser window.
*/
#container {
  position:relative;
  text-align:center; margin:0; padding:4px 0 0 0;
}
  /* Page Header */
  #pagehead {
    position:relative; width:780px; height:160px;
    text-align:center; margin:0 auto 0 auto; padding:0;
    background:#71a8d3 url(aral05.jpg) top left no-repeat;
  }
    #pagehead div.navbar {
      position:absolute; top:20px; left:12px; width:400px; height:40px;
      text-align:left; margin:0; padding:0;
    }
  /* Menu links */
  div.navlinks {
    position:absolute; top:126px; left:12px; width:600px; height:18px;
    text-align:left; margin:0; padding:0 4px 0 4px;
    background:#000000;
  }
    div.navlinks div {
      margin:0; padding:0;
    }

  /* Page Content */
  #pagebody {
    position:relative; width:780px;
    text-align:left; margin:0 auto 0 auto; padding:4px 0 0 0;
    background:#dcdcdc;
  }
          /* Columns, Total width must be <= 750px */
          
          /* LEFT columns */
          div.L_xxsmall,
          div.L_xsmall,
          div.L_small,
          div.L_large,
          div.L_xlarge,
          div.L_xxlarge,
          div.L_full {
            position:relative; float:left; margin:0; padding:0 0 0 10px;
          }
          
          /* RIGHT columns */
          div.R_xxsmall,
          div.R_xsmall,
          div.R_small,
          div.R_large,
          div.R_xlarge,
          div.R_xxlarge {
            position:relative; float:right; margin:0; padding:0 10px 0 0;
          }
          
          /* Column width combinations:  xxs+xxl, xs+xl, xs+xs+xs, s+l, full */
          div.L_xxsmall,div.R_xxsmall {width:170px;}
          div.L_xsmall,div.R_xsmall {width:250px;}
          div.L_small,div.R_small {width:300px;}
          div.L_large,div.R_large {width:450px;}
          div.L_xlarge,div.R_xlarge {width:460px;}
          div.L_xxlarge,div.R_xxlarge {width:580px;}
          div.L_full {width:800px;}
          
    /* Footer */
    #footer {
      position:relative; height:30px;
      margin:0; padding:0; text-align:center; 
    }
      #footer div {
        position:relative; width:780px;
        margin:0 auto 0 auto; padding:0;
      }