/*********************************************************************************
 * layout.css
 *
 * CSS file for the PyeNet Universal website running on the SilverStripe CMS.
 *
 * Based on a combination of the original CSS files from the SilverStripe
 * tutorial and the original PyeNet Universal website.
 *
 * Copyright (c) 2007, PyeNet Universal
 *
 *   This program is free software; you can redistribute it and/or modify
 *   it under the terms of the GNU General Public License as published by
 *   the Free Software Foundation; either version 2 of the License, or
 *   (at your option) any later version.
 *
 *   This program is distributed in the hope that it will be useful,
 *   but WITHOUT ANY WARRANTY; without even the implied warranty of
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *   GNU General Public License for more details.
 *
 *   You should have received a copy of the GNU General Public License
 *   along with this program; if not, write to the Free Software
 *   Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 *
 **********************************************************************************/
/* Import whitespace resetting code */
@import url(reset.css);

/* Global Resetting */
html {  
  width: 100%;
  height: 100%;
  background: #FFFFFF;
}
body {
  width: 100%;
  height: 100%;
  font-size: 80%;
}
* {
  font-size: 1em;
  padding: 0;
  margin: 0;
  font-family:Verdana,Helvetica,sans-serif;
  list-style:none;
}
a img {
  border:0;
}
.clear {
  clear:both;
}

.fleft {
  float:left;
}

.fright {
  float:right;
}

/* Layout CSS */
#Main {
  margin:20px auto;
  width:900px;
}
#Header {
  background:url(../images/header.jpg) bottom left no-repeat;
  clear:both;
}
  #Header h1 {
    color:#fff;
    font-size:2.5em;
    font-weight:bold;
    line-height:4.5em;
    padding-left:20px;
  }

#Menu1 {
    /* This positions Nav Bar over the lower portion of the header.jpg image
       and makes it position relative so that resizing font etc. keeps the
       bar in place
    */
    position:relative;
    top:-25px;
    left:300px;
    background: #DBDDDC;
}

#Menu1 ul{
    padding: 0;
    margin: 0;
 }
  #Menu1 li {
    float: left;
    margin: 0;
    padding: 0;
    letter-spacing: 1px;
  }
    #Menu1 li a {
        float: left;
        padding: 0 12px;
        text-decoration: none;
        color: #3d4b40;
        border: none;
        }
    #Menu1 li.current a, #Menu1 li.section a {
        background:#adc9f0;
        text-decoration: none;
    }

    #Menu1 li.link:hover a {
        background: #DBDDDC;
        color : #272f28;
        text-decoration:none;
    }

#ContentContainer {
  background:#ffffff bottom left no-repeat;
  padding-top:20px;
  padding-bottom:20px;
  overflow: auto;
  width: 100%;
  float:left;

/*  border:1px solid #00ff00; /* green border for troubleshooting */
}

#Banner {
  text-align: center;
}

#Content {
  float: right; 
  margin: 0px 10px;
  width:65%;

/*  border:2px solid #ffff00; /* yellow border for troubleshooting */
}

#WideContent {
  float: left; 
  margin-left: 15px;
  width:90%;
  padding: 5px 20px 5px 20px;

/*  border:1px solid #000000; /* black border for troubleshooting */
}

#Menu2 {
  margin-left: 10px;
  width:25%;
  float:left;
  background:#f0f0f0;
  border:1px solid #ddd;
  padding:5px 5px 5px 5px;
}
  #Menu2 li {
    list-style-type:none;
    padding-left:5px;
    border:#ffffff solid 1px;
  }
  #Menu2 a {
    color:#333;
    font-weight:normal;
    font-size:1.1em;
    line-height:1.6em;
    text-decoration:none;
  }
  #Menu2 li.current a,
  #Menu2 li.section a {
    color:#0083C8;
    font-size:1.1em;
    list-style-type:none;
    padding-left:10px;
  }
  #Menu2 a:hover {
    text-decoration:underline;
  }

#Menu3 {
  margin-left: 10px;
  width: 30em;
  float:left;
  background:#ffffff;
/*  border:1px solid #ddd; */
  padding:5px 5px 5px 5px;
}
  #Menu3 li {
    list-style-type:none;
    padding-left:5px;
    background:#f0f0f0;
    border:1px solid #ddd;
    /* border:#ffffff solid 1px; */
  }
  #Menu3 a {
    color:#333;
    font-weight:normal;
    font-size:1em;
    line-height:1.6em;
    text-decoration:none;
  }
  #Menu3 a:hover {
    text-decoration:underline;
  }
  #Menu3 li.current a,
  #Menu3 li.section a {
    color:#0083C8;
    font-size:1em;
    list-style-type:none;
    padding-left:10px;
  }

div.breadcrumbs {
  margin-bottom:10px;
  font-size:1em;
  color:#666;
}
div.breadcrumbs a {
  text-decoration:none;
}

#Footer {
  background:#7DA5E0;
  clear:both;
  text-align:right;
  padding-right:20px;
  border:1px solid #ccc;
  border-top:0;
}
  #Footer span {
    color:#fff;
    font-size:1.1em;
    line-height:2em;
    font-weight:normal;
    padding-left:20px;
  }
  #Footer a {
    color:#fff;
  }
    #Footer a:hover {
      text-decoration:none;
    }

pre.objective {
  background:#fddacc;  /* red */
  border: solid 1px #FD4040;
}

pre.listing {
  background: #b7f1ed;  /* blue */
  border: solid 1px #5294D2;
}

#NewsContainer {
  background:#fff bottom left no-repeat;
  padding-top:0;
  padding-bottom:20px;
  overflow: auto;
  width: 25%;
  float: left;

/*  border:1px solid #0000ff; /* blue border for troubleshooting */
}

.NewsList,
#StaffList,
.TipsList,
#LinksList {
  background:#f0f0f0;
  float: left;
  border: 1px dotted #ccc;
  padding: 5px;
}

.TipsList,
.NewsList {
  width:90%;
}

.NewsList li,
#StaffList li,
.TipsList li,
#LinksList li {
  margin: 0;
  list-style-type: none;
}
  .NewsList li.newsDateTitle span {
    color:#666;
    line-height:2em;
  }
  .NewsList li.newsDateTitle a {
    font-size:1.3em;
    font-weight:bold;
    color:#0083C8;
    text-decoration:none;
    padding-left:20px;
    background:url(../images/treeicons/news-file.png) no-repeat left center;
  }
    .NewsList li.newsDateTitle a:hover {
      border-bottom:1px dotted #0083C8;
    }

  .NewsList li.newsSummary {
    margin-bottom:20px;
  }
    .NewsList li.newsSummary {
      font-size:1.1em;
      line-height:1.2em;
      color:#333;
    }
    .NewsList li.newsSummary a.readMoreLink {
      color:#0083C8;
      text-decoration:none;
    }
      .NewsList li.newsSummary a.readMoreLink:hover {
        border-bottom:1px dotted #0083C8;
      }

div.newsDetails {
  margin-bottom:10px;
}

div.newsDetails p {
  color:#666;
  margin:0;
  font-size:1em;
}

div.lpicNotes {
  margin-bottom:10px;
}

div.pageComments {
  background:#f0f0f0;
  border:1px dotted #ccc;
  padding:10px;
}

.TipsList li.tipsTitle {
  color:#666;
  line-height:2em;
  font-size:1.3em;
  font-weight:bold;
  color:#0083C8;
  text-decoration:none;
  padding-left:20px;
  background:url(../images/treeicons/info.png) no-repeat left center;
}

.TipsList li.tipsContents p, li.tipsContents pre {
  color:#000;
  margin:0 0 0 15px;
  font-size:1em;
  line-height:1.5em;
}

.TipsList li.tipsContents pre {
  font-family: monospace;
/*  font: 'Courier New', Courier, Fixed; */
  color:#000;
  background:#fff;
  margin:10px 0 10px 15px
}

.TipsList li.tipsDetails {
  color:#666;
  margin:0 0 10px 0;
  font-size:0.9em;
}

#StaffList .staffname { 
  clear: both;
  padding-left: 60px;
  height: 1.2em;
}

#StaffList .staffphoto {
  float: left;
  margin-left: 3px;
  margin-top: -1.2em;
}
#StaffList .staffphoto img {
  border:1px solid #AAA;
}

#StaffList .staffdescription {
  margin-left: 60px;
  margin-bottom:30px;
}

#StaffPhoto {
  float: left;
  margin-right: 10px;
}

#StaffPhoto img {
  border:1px solid #AAA;
}

#LinksList li.randomLink a {
  font-size:1.3em;
  font-weight:normal;
  color:#000000;
  text-decoration:none;
  background:#ffffff;
  padding-right:0;
border:1px #00ff00 solid;
}
#LinksList li.randomLink a:hover {
  border-bottom:1px dotted #0083C8;
}
#LinksList img {
  border:none;
  width:180px;
  height:90px;
}

.NewsList li.newsTitle, #LinksList li.linksTitle {
  font-size:1.3em;
  font-weight:bold;
  color:#0083C8;
  text-decoration:none;
  background:#ffffff;
  padding-left:25px;
  margin-bottom:5px;
}

#PageComments {
  list-style:none;
  background:#e9e9e9;
  border:1px solid #ccc;
  border-bottom:0;
  padding:0;
  margin:0;
}
  #PageComments li {
    list-style:none;
    padding:5px;
    margin:0;
    font-size:1em;
    border-bottom:1px dotted #bbb;
  }
    #PageComments li p span {
      font-style:italic;
    }
    #PageComments a.deletelink {
      font-weight:bold;
    }

#PageNumbers {
  font-weight:bold;
  color:#333;
  font-size:1.1em;
  text-align:center;
  padding:5px;
  border:1px solid #ddd;
  background:#e9e9e9;
}
#PageNumbers * {
  padding:0 5px;
  line-height:1.5em;
}
#PageNumbers a {
  color:#0083C8;
  text-decoration:none;
}
  #PageNumbers a:hover {
    text-decoration:underline;
  }

#CodeSnippet {
    font-family: monospace;
/*    font: 'Courier New', Courier, Fixed; */
    font-size: 9px;
    border: 1px solid #CBCBCB;
    color: black;
    background-color : #EEF6FF;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
    padding: 2px 2px 5px 5px;
}

/* Links */
/*
** keep the whitespace in front of the ^=, hides rule from konqueror
** this is css3, the validator doesn't like it when validating as css2
*/
a[href ^="http://"],
a[href ^="gopher://"] {
  background: url(../images/linkicons/external.png) center right no-repeat;
  padding-right: 13px;
  color: #333333;
}
a[href ^="https://"],.link-https {
  background: url(../images/linkicons/lock_icon.gif) center right no-repeat;
  padding-right: 16px;
  color: #333333;
}
a[href ^="mailto:"],.link-mailto {
  background: url(../images/linkicons/mail_icon.gif) center right no-repeat;
  padding-right: 18px;
  color: #333333;
}
a[href ^="news://"] {
  background: url(../images/linkicons/news_icon.png) center right no-repeat;
  padding-right: 18px;
  color: #333333;
}
a[href ^="ftp://"],.link-ftp {
  background: url(../images/linkicons/file_icon.gif) center right no-repeat;
  padding-right: 18px;
  color: #333333;
}
a[href ^="irc://"],.link-irc {
  background: url(../images/linkicons/discussionitem_icon.gif) center right no-repeat;
  padding-right: 18px;
  color: #333333;
}
.nolinkicon {
  background: #FFFFFF;
  color: #333333;
}
/* End Links */

/* Search and Search Results */
#SearchInputForm form {
        float:right;
        width:160px;
        margin:5px 5px 0px 5px;
}
        #SearchInputForm form * {
                display:inline !important;
        }
        #SearchInputForm form div {
        }
        #SearchInputForm form input.text {
                width:110px;
                color:#000;
                background:#f0f0f0;
                border:1px solid #aaa;
                padding:3px;
        }
        #SearchInputForm form input.action {
                font-weight:bold;
        }

.searchResults h2 {
        font-size:2.2em;
        font-weight:normal;
        color:#0083C8;
        margin-bottom:15px;
}
.searchResults p.searchQuery {
        color:#333;
        margin-bottom:10px;
}

.searchResults ul#SearchResults li {
        margin-bottom:20px;
}
        ul#SearchResults p {
                font-size:1.1em;
                font-weight:normal;
                line-height:2em;
                color:#333;
        }
        ul#SearchResults a.searchResultHeader {
                font-size:1.3em;
                font-weight:bold;
                color:#0083C8;
                text-decoration:none;
                margin:20px 0 8px 0;
                padding-left:20px;
                background:url(../images/treeicons/search-file.gif) no-repeat left center;
        }
                ul#SearchResults a {
                        text-decoration:none;
                        color:#0083C8;
                }
                ul#SearchResults a:hover {
                border-bottom:1px dotted #0083C8;
                }