/* 
   Design215.com CSS/110 stylesheet, v01.20.06,
   for cophase.org v09.18.06
   
   Container layout of each page:
   ----------------------------------------------------------------------------- 
   Containers are basically boxes that contain content. Text within a container
   will flow inside it. Each container can be positioned RELATIVELY inside its
   parent container or it can be positioned ABSOLUTELY to the page itself. Each
   container can have width, height, padding, and borders. It can be transparent, 
   have a background image, or both. 
   
   The diagram below shows the basic containers of the template and how they are
   arranged inside of each other. Further down the page are more comments and 
   suggestions about how to arrange containers and columns on your pages.
   
   
   body
     #menu1
     #menu2
     #menu3
     #container
       #pagehead
         .navbar
         .navlinks
         .navlinks2
       #pagebody
         #titlebar
         #contentbg
           #contentbox
             #contenthead
             .L_xxlarge (or other column classes)
             .minheight
             .R_xxsmall (or other column classes)
             .xclearline
           #endcap
         #footer
      
   


   Fonts
   ----------------------------------------------------------------------------- 
   Define all fonts for the entire site in this section. 
*/

body,table td,.counter,div.dropx a {
  font-family:verdana,helvetica,sans-serif; font-size:10px; color:#59734F;
}
p,dl,ul,pre.p2,.xword,.xtitle {
  font-family:verdana,helvetica,sans-serif; font-size:10px; color:#59734F;
}
h2,h3,div.obox h1,#footer a.w3,.xbig {
  font-family:verdana,helvetica,sans-serif; font-size:12px; font-weight:bold; color:#3B642B;
}
h1 {
  font-family:arial,helvetica,sans-serif; font-size:16px; font-weight:bold; color:#3B642B;
}
pre,code,div.xbox3,.ckBox,.boxBlur,.boxFocus,.formula {
  font-family:courier new,courier,monospace; font-size:12px; color:#006000;
}
#footer p,#footer p.xnav {
  font-family:arial,helvetica,sans-serif; font-size:10px; color:#666666;
}
.fbutton {
  font-family:arial,helvetica,sans-serif; font-size:11px; font-weight:bold;
}


/* 
   Type Selectors
   ----------------------------------------------------------------------------- 
   Define the DEFAULTS for HTML elements in this section. 
*/

body {
  text-align:center; margin:0; padding:0;
  color:#59734F; background:#F4F4F0;
}

a:link,
a:visited {text-decoration:underline; font-weight:bold; color:#3B642B;}
a:hover {text-decoration:none; font-weight:bold; color:#000000;}

acronym {
  font-weight:bold; color:#888888;
  border-bottom:dashed 1px #000000; cursor:help; 
}
form {
  margin:0; padding:2px 0 0 12px;
}
h1 {
  margin:4px 4px 0 12px; padding:0; letter-spacing:2px;
}
h2 {
  margin:2px 2px 2px 12px; padding:0; letter-spacing:1px;
}
h3 {
  position:relative; text-align:right;
  margin:-12px 4px 0 0; padding:0;
}
img {
  margin:0; padding:0; border:0;
}
p {
  line-height:130%;
  margin:2px 0 2px 0; padding:0;  /* default is no left margin */
}
pre {
  margin:0; padding:0;
}
table {
  margin:2px 6px 2px 12px; padding:0;
}
table td {
  line-height:130%;
}

/* this tag is used to hide text that should be visible when no stylesheet is available */
tt {display:none;} 

ul {
  list-style:none;
}

form table { /* no left margin for tables inside forms */
  margin:2px 6px 2px 0; padding:0;
}


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

/* text menu links */
a.a1 {
  font-size:11px; margin:0; padding:0;
}
a.a1:link,
a.a1:visited {text-decoration:none; font-weight:bold; color:#0047EA;}  
a.a1:hover {text-decoration:underline; font-weight:bold; color:#000000;}

/* Style for form "buttons" like "New", "Save", "Delete", etc */
a.btn {
  line-height:20px; font-weight:bold;
  margin:0 1px 0 0; padding:2px 4px 2px 4px; background:#ffffff;
  border:1px solid #000000;
}
a.btn:link,
a.btn:visited {text-decoration:none; font-weight:bold; color:#0000aa;}
a.btn:hover   {
  text-decoration:none; font-weight:bold; color:#ffffff; background:#000099;
  border:1px solid #000000;
}

/* default stylesheet link icons */
a.style_normal,a.style_mobile,a.style_print,a.style_none {
  margin:0; padding:2px 0 2px 18px; line-height:16px;
  background:transparent url(images/style_normal.gif) no-repeat;
}
a.style_mobile {
  background:transparent url(images/style_mobile.gif) no-repeat;
}
a.style_print {
  background:transparent url(images/style_print.gif) no-repeat;
}
.navlinks2 a.style_print:hover {text-decoration:none;}

a.style_none {
  background:transparent url(images/style_none.gif) no-repeat;
}

/* footer links */
#footer a:link,
#footer a:visited {text-decoration:none; color:#888888;}
#footer a:hover {text-decoration:underline; color:#000000;}
  
/* W3C validation links */
#footer a.w3:link,
#footer a.w3:visited {text-decoration:none; color:#aaaaaa;}
#footer a.w3:hover {text-decoration:none; color:#000000;}

br.clr {
  clear:both;
}
  
code.bx {  /* outlined code like an input box */
  border:1px solid #999999; background:#eeeeee;
  padding:1px;
}
code.t2 {  /* indented block of example code */
  display:block;
  margin:4px 0 2px 8px; padding:0;
}     

/* Separators to clear column floats */
div.xclear {
  clear:right; height:1px; line-height:1px; 
  margin:0; padding:0;
}
div.xclearline { /* content under columns */
  position:relative; clear:both; width:520px; 
  margin:0; padding:0;
}


/* Sets the minimum height of the page content, or can be a column divider */
div.minheight {
  position:relative; float:right; text-align:right;
  width:5px; height:500px;
}

div.xline { /* accent line */
  height:1px; line-height:1px;
  margin:3px; padding:0 0 3px 0;
  border-top:solid 1px #aaaaaa;
}
div.xbox1 { /* forms boxes */
  width:90%; padding:4px 8px 4px 8px; border:solid 1px #aaaaaa;
  background:#ffffff url(images/pencil01.jpg) right top no-repeat;
}
div.xbox2 { /* outline box */
  width:90%;
  margin:0 0 0 12px; padding:8px 2px 8px 2px; 
  border:solid 1px #aaaaaa; background:#ffffff;
}
div.gadvert { /* Google ads */
  margin:0 0 0 12px;
}
div.gsearch { /* Google search box */
  position:absolute; width:500px; left:250px; top:20px;
}
  
dl.alist {
  margin:0; padding:4px 0 0 0;
}
dl.alist dt {
  font-size:12px; color:#000099; line-height:150%;
  margin:0; padding:0 0 0 12px;
}
dl.alist dd {
  line-height:120%;
  margin:0; padding:0 0 16px 20px;
}
dl.t2 {  /* lists used inside table td's */
  margin:0; padding:0;
}
dl.t2 dt {margin:0; padding:0;}
dl.t2 dd {margin:0; padding:4px 0 2px 8px;}
  
dl.links {
  margin:0; padding:4px 0 0 0;
}
dl.links dt {
  line-height:150%;
  margin:0; padding:0 4px 0 20px;
}
dl.links dd {
  line-height:120%;
  margin:0; padding:0 10px 4px 28px;
}
  
h1.m1 {
  margin:2px 2px 0 12px;
}

/* replace h1 with images */
h1.xx1,h1.xx2,h1.xx3,h1.xx4,h1.xx5,h1.xx6 {
  width:470px; height:30px; 
}
h1.xx1 span,h1.xx2 span,h1.xx3 span,h1.xx4 span,h1.xx5 span,h1.xx6 span {
  display:none;  /* hide h1 text */
}
h1.xx1 {
  background:transparent url(images/h1_welcome.gif) right top no-repeat;
}
h1.xx2 {
  background:transparent url(images/h1_about.gif) right top no-repeat;
}
h1.xx3 {
  background:transparent url(images/h1_work.gif) right top no-repeat;
}
h1.xx4 {
  background:transparent url(images/h1_links.gif) right top no-repeat;
}
h1.xx5 {
  background:transparent url(images/h1_contact.gif) right top no-repeat;
}
h1.xx6 {
  background:transparent url(images/h1_archive.gif) right top no-repeat;
}

img.xpic {
  margin:1px 3px 3px 1px; padding:0;
  border:solid 1px #888888;
}
img.xleft {  /* left aligned image */
  float:left; margin:2px 10px 2px 0;
}
img.xright {  /* right aligned image */
  float:right; margin:2px 0 2px 10px;
}
img.dleft {  /* left aligned image for use with ul.dlist */
  float:left; margin:2px 10px 2px 12px;
  border:1px solid #666666;
}

label.noshow,
span.noshow {display:none;}

p.p1 { /* normal line height for narrow columns */
  margin:2px 6px 2px 12px; padding:0;
}
p.p2,p.p3 { /* normal right margin */
  line-height:140%;
  margin:4px 10px 0 12px; padding:0;
}
p.n1 { /* justified column like a newspaper */
  font-size:10px;
  margin:4px 2px 0 12px; padding:0; text-align:justify;
}
p.n2 { /* right column with vertical dashed line */
  font-size:10px;
  margin:0; padding:4px 2px 0 12px; border-left:1px dashed #aaaaaa;
}
p.r1 { /* used for the last updated date on links.php */
  text-align:right;
  font-size:10px; line-height:normal;
  margin:-16px 12px 0 0; padding:0;
}
p.r2 {
  text-align:right;
  line-height:140%;
  margin:4px 20px 0 12px; padding:0;
}
#pagehead p {
  display:inline;
  text-align:left;
}
#footer p {
  position:relative; width:540px;
  text-align:center; margin:0 auto 0 auto; padding:0;
}
#footer p.xnav {
  position:relative; width:540px;
  text-align:center; margin:0 auto 0 auto; padding:12px 0 0 0;
  color:#aaaaaa;
}
  
pre.p2 {
  line-height:150%;
  margin:4px 4px 0 12px; padding:0;
}

table.t1 { /* no left margin */
  margin:2px 6px 2px 0; padding:0;
}
table.gsearch { /* Google Search box */
  width:480px;
  border:0; margin:0; padding:0;
}
table.gsearch table {
  margin:0; padding:0;
}
  
ul.alist {
  margin:4px 0 0 12px; padding:0;
}
ul.alist li {
  margin:2px 0 6px 0; padding:1px 0 0 14px; width:90%;
  background:transparent url(images/bullet.gif) 3px 0 no-repeat;
}
  
ul.blist {
  margin:4px 0 0 0; padding:0;
}
ul.blist li {
  margin:2px 0 2px 0; padding:1px 0 0 12px; width:98%;
  background:transparent url(images/bullet.gif) 0 2px no-repeat;
}
  
/* left aligned image with bullet list on the right */
ul.dlist {
  margin:4px 0 0 0; padding:0;
}
ul.dlist li {
  margin:2px 0 2px 0; padding:1px 0 0 12px; width:250px;
  background:transparent url(images/bullet.gif) 0 2px no-repeat;
}
#pagehead ul {
  display:none;
}

/* Form fields */
.ckBox { /* checkboxes */
  margin:1px; padding:0;
}
.boxBlur {
  border:1px solid #aaaaaa; color:#000000; background:#eeeeee;
  margin:0 0 2px 0; padding:1px;
}
.boxFocus {
  border:1px solid #aaaaaa; color:#000000; background:#ffffcc;
  margin:0 0 2px 0; padding:1px;
}
.fbutton {
  border:1px solid #666666; color:#0047EA; background:#eeeeee;
  margin:0; padding:0;
}
  
/* Misc Classes */

.border1 {  /* used for images instead of border="1" */
  border:1px solid #666666;
}

.counter {color:#aaaaaa;}

.dash2 {
  position:relative; display:block; color:#3B642B;
  margin:0 10px 4px 12px; padding:0 0 2px 0;
  border-bottom:1px solid #B2D3A5;
}
.dash3 {  /* p2 paragraph separator, extra right margin */
  position:relative; display:block; line-height:4px;
  margin:0 80px 4px 20px; padding:0;
  border-bottom:1px solid #DADACC;
}
.dash4 {  /* p3 paragraph separator */
  position:relative; display:block; line-height:4px;
  margin:0 10px 4px 12px; padding:0;
  border-bottom:1px solid #DADACC;
}
.gdivider { /* amy's grass divider */
  position:relative; display:block;
  margin:20px 0 20px 0; padding:0;
  background:transparent url(images/details/divider.jpg) center center no-repeat;
}  
.hdate { /* dates under H2 headings (articles, etc) */
  position:relative; display:block; color:#000099;
  margin:0 10px 4px 12px; padding:0 0 2px 0;
}
.sm {position:relative; top:-4px; font-size:9px; font-weight:normal;} /* service mark (sm) */
.super {position:relative; top:-4px; font-size:10px;} /* superscript */

.xbig {  
  font-size:18px; color:#000099;
}
.xdash {border:1px dashed #000000;} 

.xline {
  position:relative; display:block; line-height:4px;
  margin:0 2px 8px 12px; padding:0;
  border-bottom:1px solid #888888;
}
.xred {color:#ff0000;} /* form errors */
.xword {font-weight:bold; color:#dddddd;}


/* 
   Div's and "Containers" for this layout
   -----------------------------------------------------------------------------
   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. Refer to the layout diagram at the top of the
   stylesheet to see how the div's are organized. 
   
   One reason for multiple nested div's is for consistency in different browsers. 
   This is called the "box model" and it can be annoying. If you set a div to width:100px;
   and then give it padding:5px; it will be 110px wide in one browser
   and 100px wide in another. Some browsers add padding to the outside and others 
   add it to the inside. The same applies to margins and borders. It messes things up 
   if you need pieces or backgrounds to match up next to each other with no gaps.
   
   The solution is to have one div inside another. You set the width on the outer div
   and you set the padding or border on the inner one. The inner one also needs to have 
   position:relative; so it will fill the div that its inside of. 
   
*/

#container {
  position:relative; width:700px;
  text-align:center; margin:0 auto 0 auto; padding:0;
}
  /* Page Header, full width of container */
  #pagehead {
    position:relative; height:230px;
    text-align:center; margin:0; padding:0;
    background:transparent url(images/header.gif) 152px 0px no-repeat;
  }
    #pagehead div.navbar {  /* width and height necessary for image replacement */
      position:absolute; top:50px; left:294px; width:280px; height:80px;
      text-align:left; margin:0; padding:0;
    }
    #pagehead div.navbar img {
      margin:0; padding:0; width:280px; height:80px;
    }
  /* DIVs for navigation links */
  div.navlinks {
    position:absolute; top:170px; left:210px; width:450px; height:30px;
    text-align:left; margin:0; padding:0;
  }
  div.navlinks2 {
    display:none;
  }

  /* Page body, full width of container */
  #pagebody {
    position:relative;
    text-align:left; margin:0; padding:0;
    background:transparent url(images/bodybg01.gif) 152px 0px repeat-y;
  }
    /* Titlebar, content above content box */
    #titlebar {
      position:relative;
      text-align:left; margin:0; padding:0; line-height:1px; /* removes 2px space under leaf.jpg */
    }
    
    /* Outer content box, defines outer width of content (use width:??px ), NO MARGINS */
    #contentbg {
      position:relative; width:700px;
      text-align:left; margin:0; padding:0;
    }
      /* Inner content box for MARGINS and a second background (do NOT define a width) */
      #contentbox {
        position:relative; line-height:normal;
        text-align:left; margin:0 20px 0 4px; padding:0;
      }
        /* Content above columns */
        #contenthead {
          position:relative; margin:0; padding:0;
        }
            
          /* For this layout, Total width must be less than or = 500px */
          
          /* 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;
          }
          
          /* 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;
          }
          
          /* Column width combinations:  xxs+xxl, xs+xl, xs+xs+xs, s+l, full */
          div.L_xxsmall,div.R_xxsmall {width:145px;}
          div.L_xsmall,div.R_xsmall {width:145px;}
          div.L_small,div.R_small {width:145px;}
          div.L_large,div.R_large {width:500px;}
          div.L_xlarge,div.R_xlarge {width:500px;}
          div.L_xxlarge,div.R_xxlarge {width:500px;}
          div.L_full {width:500px;}
          
          /* floating sidebar */
          div.L_sidebar {
            position:relative; float:left; 
            width:170px; margin:0; padding:0;
            background:transparent url(images/sidebarbg.gif) repeat-y;
          }
          div.L_sidebar h1 {
            width:170px; height:50px;
            margin:0; padding:0;
            background:transparent url(images/sidebarhead.gif) no-repeat;
          }
          div.sidebar_footer {
            width:170px; height:50px;
            margin:0; padding:0;
            background:transparent url(images/sidebarfoot.gif) no-repeat;
          }
          
          
          /* 
             Exceptions: 
             sometimes you'll have a page where you something tweaked 
          */
          #pag_sitemap div.L_xxsmall {width:200px;}
          
          
      /* Bottom of content box, no bottom margin */
      #endcap {
        position:relative; width:700px; height:62px;
        clear:both; margin:0;
        background:transparent url(images/endcap.gif) 152px 0px repeat-y;
      }

    /* Footer */
    #footer {
      position:relative;
      margin:0 0 0 150px; padding:0; text-align:center; 
      background:#F4F4F0;
    }


/* gallery page, work.php, fixes "updates" box being bumped down */
div#xpic {  
  position:relative; width:498px; overflow:hidden;
}

/* 
   Replace, Remove or Resize images 
   -----------------------------------------------------------------------------
   Here you can do things like change the default images to text for the menu 
   icons or swap out different images to match a different background, etc. 
  
*/

.rp1 b,.rp2 b,.rp3 b,.rp4 b,.rp5 b {display:none;}
.rp1 img,.rp2 img,.rp3 img,.rp4 img,.rp5 img {width:86px; height:26px;}

.rp1 { /* home */
  position:absolute; top:0px; left:0px; width:88px; height:26px;
}
.rp2 { /* about */
  position:absolute; top:0px; left:88px; width:88px; height:26px;
}
.rp3 { /* work */
  position:absolute; top:0px; left:176px; width:88px; height:26px;
}
.rp4 { /* links */
  position:absolute; top:0px; left:264px; width:88px; height:26px;
}
.rp5 { /* contact */
  position:absolute; top:0px; left:352px; width:88px; height:26px;
}

.rp50 { /* small footer logo */
  position:absolute;
  width:50px; height:25px;
  background:transparent url(images/design215_50d2.gif) no-repeat;
}
.rp50 b {display:none;}