Printable Version of Topic

body { background: url('http://www..png') repeat-x;}
#header { width: 825px; min-height: 30px; margin: 0 auto; }
#navigation { width: 825px; height: 37px; margin: 0 auto; position: relative; top: 0px; background: #7D8768;}
#navigation ul { margin: 0; padding: 0; list-style-type: none; }
#navigation ul li { display: inline; margin-right: 0; }
#navigation ul li a { color: #213D30; background: #7D8768; text-decoration: none; margin: 0 auto; padding: 10px 10px 6px 10px; position: relative; top: 12px; text-transform: uppercase; font-weight: bold; font-size: 16px; }
#navigation ul li.current_page_item a, #navigation ul li a:hover { color: #E6C583; }
#container { overflow: auto; width: 900px; margin: 0 auto; padding: 10px; }
#container h1 {color: #8AA37B; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
#content { width: 600px; min-height: 401px; margin: 0 auto; overflow: auto; background: url('http://www..png'); position: relative; top: 5px;}
#rooms {width: 900px; overflow: auto; background: url('http://www..png')}
#homepic { width: 600px; min-height: 401px; margin: 0 auto; overflow: auto; background: url('http://www..png'); position: relative; top: 5px;}
#contact { width: 800px; overflow: auto; color: #330000;}
#map { width: 800px; height: 600px;}
#photo { width: 600px; overflow: auto;}
#contentleft { width: 450px; float: left; margin-right: 20px; padding: 20px; }
#contentleft h1 {color: #8AA37B; }
#sidebar { width: 250px; float: left; padding: 20px; }
.sidebar-element { overflow: auto; margin-top: 15px; }
#sidebar h3 {color: #8AA37B;  padding: 7px 10px; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
#footer {width: 800px; margin: 0 auto; text-align: center; }
#footer ul {margin: 0 auto; padding: 0; list-style-type: none; }
#footer ul li {display: inline; margin-right: 5px; }
#footer ul li a {color: #FF7777; text-transform: uppercase; text-decoration: none; }
#footer ul li a:hover { text-decoration: underline; }
#bedandbreakfast {width: 800px; margin: 0 auto; padding: 0; }
#bedandbreakfast a { margin: 0 25px 0 25px; }

#roomsidebar { width: 800px; overflow: auto;  }
#containerleft { width: 250px; float: left; }
#sidebar-rooms { width: 800px; overflow: auto; }
#roomsidebar h3 {}
.hidden, .alt { display: none; }

#powers { width: 900px; }
#besty { width: 900px; }
#humpries {width: 900px; }
#vance { width: 900px; }

body{
  margin: 0; padding: 0; border: 0; overflow: hidden; height: 100%;  max-height: 100%;  
  font: normal 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
  background: #CCFFCC;
}

#framecontentTop{
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  height: 172px;
  overflow: hidden;
  background-color: #CCFFCC;
  color: black;
}

#framecontentBottom{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 44px;
  overflow: hidden;
  background-color: #CCFFCC;
  color: black;
}

#framecontentLeft{
  position: absolute;
  top: 172px;
  left: 0;
  width: 220px;
  bottom: 44;
  overflow: auto;
  background-color: #CCFFCC;
  color: black;
}

#maincontent{
  position: fixed;
  top: 172px; /*Set top value to HeightOfTopFrameDiv*/
  left: 220;
  right: 0;
  bottom: 44px; /*Set bottom value to HeightOfBottomFrameDiv*/
  overflow: auto;
  background-color: #E7FFE7;
}

#leftmaincontent{
  position: fixed;
  top: 172px; /*Set top value to HeightOfTopFrameDiv*/
  left: 220;
  width: 220;
  bottom: 44px; /*Set bottom value to HeightOfBottomFrameDiv*/
  overflow: auto;
  background-color: #E7FFE7;
}

#rightmaincontent{
  position: fixed;
  top: 172px; /*Set top value to HeightOfTopFrameDiv*/
  left: 440;
  right: 0;
  bottom: 44px; /*Set bottom value to HeightOfBottomFrameDiv*/
  overflow: auto;
  background-color: #E7FFE7;
}

.Sig{
  position: absolute;
  top: 5px;
  right: 5px;
  font: normal 12px Arial;
}

.CR{
  position: absolute;
  bottom: 5px;
  right: 5px;
  font: normal 12px Arial;
}

.PP{
  position: absolute;
  top: 5px;
  left: 5px;
  font: normal 12px Arial;
}

.PRR{
  position: absolute;
  bottom: 5px;
  left: 5px;
  font: normal 12px Arial;
}

#linksTop {
    position: absolute;
    bottom: 0px;
    left: 220px;
    width: 802px;
    height: 25px;
    font: bold 16px Arial;
    z-index: 2;
}

#linksTop ul{
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
}

#linksTop ul li{
    display: inline;
}

#linksTop ul li a {
    float: left;
    text-align: center;
    text-decoration: none;
    padding: 3px 15px;
    color: #CCFFCC;
}

#linksTop ul li a:hover, #linksTop  ul li .current{
    color: #CCFFCC !important;
    background: url(images/hBar4.jpg);
    background-size: 1px 25px;
    background-repeat: repeat-x;
    padding-top: 4px;
}

#linksTop ul li a img {
    height: 0;
    width: 0;
    border-width: 0;
}

#linksTop ul li a:hover img, #linksTop ul li .current img{
    position: absolute;
    top: -147px;
    left: 0px;
    height: 147px;
    width: 802px;
}

#linksTop ul li a:hover img{
    z-index: 100;
}

#linksTop ul li .current img{
    z-index: 1;
}

#Logo img{
    position: absolute;
    top: 1px;
    left: 1px;
    height: 170px;
    width: 213px;
    border-wideth: 0;
    z-index: 100;
}

#lBar img {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 25px;
    width: 100%;
}

#tBar img {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 1px;
    width: 100%;
    border-width: 0;
    z-index: 1;
}

#rBar img {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 1px;
    border-width: 0;
    z-index: 1;
}

ul.linksSide{
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  overflow: auto;
  background: #CCFFCC; /* background of menu */
  margin: 0;
  padding: 0;
  padding-top: 0px; /* top padding */
  padding-bottom: 7px;
  list-style-type: none;
}

ul.linksSide li{
  text-align: right; /* right align menu links */
}

ul.linksSide li a{
  position: relative;
  display: inline-block;
  text-indent: 30px;
  overflow: hidden;
  background: url(images/vBar1.jpg);
  background-size: 100% 1px;
  background-repeat: repeat-y;
  font: bold 16px Germand;
  text-decoration: none;
  padding: 5px;
  margin-top: 7px; /* spacing between links */
  color: #BBFFBB;
  -moz-box-shadow: inset -7px 0 0px rgba(114,114,114, 0.8); /* inner right shadow added to each link */
  -webkit-box-shadow: inset -7px 0 0px rgba(114,114,114, 0.8);
  box-shadow: inset -7px 0 0px rgba(114,114,114, 0.8);
  -moz-transition: all 0.3s ease-in-out; /* CSS3 transition of hover properties */
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

ul.linksSide li a:hover, ul.linksSide li .current{
  padding-right: 30px; /* add right padding to expand link horizontally to the left */
  -moz-box-shadow: inset -0px 0 0px rgba(114,114,114, 0.8); /* contract inner right shadow */
  -webkit-box-shadow: inset -0x 0 0px rgba(114,114,114, 0.8);
  box-shadow: inset -0px 0 0px rgba(114,114,114, 0.8);    
}

ul.linksSub{
  position: relative;
  overflow: auto;
  margin: 0;
  padding: 10;
  padding-top: 0px; /* top padding */
  padding-bottom: 0px;
  list-style-type: none;
}

ul.linksSub li{
  text-align: center; /* right align menu links */
  font: bold 16px Germand;
}

ul.linksSub li a{
  position: relative;
  display: block;
  overflow: hidden;
  background: #CCFFCC;
  font: normal 14px Germand;
  text-decoration: none;
  padding: 2px;
  margin-top: 2px; /* spacing between links */
  color: #003300;
}

ul.linksSub li a:hover, ul.linksSub li .current{
  background: #003300;
  color: #CCFFCC;
}

<!--Force IE6 into quirks mode with this comment tag-->
<head>
<title>CCGH</title>
<link rel="stylesheet" type="text/css" href="../CCGH.css" />
</head>
<body>
<div id="framecontentTop">
  <div id="linksTop">
    <ul>
      <li><a href="../Hospital/MissionStatement.html" class="current">Coal County General Hospital<img src="../images/hospital.jpg" width="802" height="147" border="0"></a></li>
      <li><a href="../Manor/MissionStatement.html">Ruth Hurley Manor<img src="../images/manor.jpg" width="802" height="147" border="0"></a></li>
      <li><a href="../HHH/MissionStatement.html">TenderCare Home Health & Hospice<img src="../images/tendercare.jpg" width="802" height="147" border="0"></a></li>
    </ul>
  </div>
  <div id="lBAR"><img src="../images/hbar3.jpg"></div>    
  <div id="Logo"><img src="../images/Logo7smt.gif"></div>
</div>

<div id="framecontentLeft">
  <div id="rBAR"><img src="../images/bar.gif"></div>
  <ul class="linksSide">
    <li><a href="MissionStatement.html" class="current">Mission Statement </a></li>
    <li><a href="About.html">About Us </a></li>
    <li><a href="EmpDir.html">Employee Directory </a></li>
    <li><a href="MedServ.html">Medical Services </a></li>
    <li><a href="ComProg.html">Community Programs </a></li>
    <li><a href="News.html">News </a></li>
    <li><a href="CarOp.html">Career Opportunities </a></li>
    <li><a href="Contact.html">Contact Us </a></li>
  </ul>
</div>

<div id="maincontent">
  <table border=0 width=100% height=100%>
    <tr>
      <td>
        <center>
          <h1>This area will contain the Hospital's Mission Statement</h1>
        </center>        
      </td>
    </tr>
  </table>
</div>

<div id="framecontentBottom">
  <div id="tBAR"><img src="../images/bar.gif"></div>
  <div class="Sig">
    Web site created by Matt Balliett: <a href="mailto:smballiett@gmail.com">smballiett@gmail.com</a>
  </div>
  <div class="CR">
    Code for CSS frames and buttons found <a href="http://www.dynamicdrive.com/style/">here</a>
    Copyright 2006 <a href="http://www.dynamicdrive.com">Dynamic Drive</a>
    Read <a href="http://www.dynamicdrive.com/style/csslibrary/tos/">Usage Terms here</a>
  </div>
  <div class="PP">
    <a href="PP.html">Privacy Policy</a>
  </div>
  <div class="PRR">
    <a href="PRR.html">Patient Rights and Responsibilities</a>
  </div>
</div>
</body>
</html>