/*
CSS for Burnie Rotary website
*/

/*
NEXT  SECTION  DEALS  WITH  FORMATTING  OF  BODY 
 &  NAVIGATION  ("Sidebar") ELEMENTS
*/

body {
   font-family: Verdana, Helvetica, Arial, sans-serif;
   background-color: #e2edff;
   font-size: 100%; 
   line-height: 100%;
   padding: 0;
   margin: 0;
}

h1, h2, {
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

h1 {
   font-size: x-large;
   color: #003399;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
   padding-left: 4em;
   margin: 0;
   background-color: #FFCC00;
}

h2 {
   color: #003399;
   font-size: 130%;
   font-weight: normal;
   padding-top: 15px;
}

li { 
   font-size: small;
   list-style-type: none;
}

p {
    font-size: 0.9em;
    line-height: 1.2; 
   color: navy;
} 

#tagline p {
   font-style: normal;
   font-family: Georgia, Times, serif;
   background-color: white;
   border-top: 3px solid #003399;
   border-bottom: 3px solid #003399;
   padding-top: .2em;
   padding-bottom: .2em;
   padding-left: .8em;
   margin: 0;
}

em {
    text-transform: uppercase;
    text-decoration: underline;
} 

a {
  font-weight: bold;
}

a:link {
   color: black;
}

a:visited {
   color: navy;
}
 
a:hover {
   text-decoration: none;
   color: red;
   background-color: #FFCC00;
}

a:active {
   colour: aqua;
   background-color: #FFCC00;
} 

.fun {
   color: #ff6633;
   font-size: large;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-weight: normal;
   font-style: italic;
}

#navigation  {
   width: 128px;
   height: 110px;
   background-color: #ffcc00;   
}

h2, ul {
   margin-top: 15px;
}

#sidebar {
   position: fixed;   
   top: 1px;   
   left: 1px;
   width: 150px;
   height: 400px;
   overflow: scroll;
   z-index: 2;
}

/* 
SECTION  DEALS  WITH  POSITIONING.  IT  USES  ABSOLUTE  
POSTIONING  - FIXED  x  AND  y  COORDINATES  MEASURED  
FROM  THE  TOP-LEFT  CORNER  OF  THE  BROWSER'S  CONTENT  
DISPLAY 
*/

#navigation, #rotarylinks, #bodycontent, #header  {
   position: absolute;
}

#bodycontent {
   top: 55px;
   left: 170px;
   z-index: 0;
}

#navigation {
   top: 160px;
   left: 2px;
}

#rotarylinks {
   top: 290px;
   left: 0px;
   border-width: 1px;
   border-style: solid;
   border-color: #003399;
   padding: 0.2em;
   width: 125px;
   color: #003399;
   background-color: #ffcc00;
}  

#header {
    left: 150px;
    right: 3px;    
    border-top: 3px solid #7da5d8;
    z-index: 1;
} 

@media screen{
  body>div#header{
   position: fixed;
  }

}
 * html body{
  overflow:hidden;
 } 

.empadding {
    border-width: 5px;
    border-style: solid;
    border-color: black;
    padding: 0.5em;
    font-size: small;
    font-weight: bold;
    background-color:  #FCAFF4;
    }

/* 
SECTION  DEALS  WITH  IMAGE (PHOTO and  PDF)  ITEMS
*/

.galleryphoto p {
     font-size: 65%;
     font-weight: bold;
     margin-top: 0;
     width: 430px;
     line-height: 1.4 em;
     padding-bottom: 20 px;
     border-bottom: 1px solid navy;
     margin-bottom: 10px;
}

.photocredit {
     font-weight: normal;
     color: gray;
}

/*
SECTION  DEALS  WITH  TABLE  DESIGNS
*/
    
table.events {
   border-collapse: collapse;
}

table.events th, table.events td { 
   padding: 4px;
   border-right: 1px solid #000066;
}

table.events caption {
    color: #000066;
    font-size: small;
    text-align: center;
    padding-bottom: 5px;
    font-weight: bold;
}

table.events th {
   font-size: x-small;
   text-align: left;
   background: #241374;
   color: #ffffff;
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 2px;
   padding-right: 2px;
}

table.events td {
   font-size: small;
   color: navy;
   background: #ededed url(Images/td.jpg) repeat-x top;
}

table.links {
   border-collapse: collapse;
   left: 1px;
   width: 125px;
}

table.links th { 
   padding: 1px;
   border: 1px solid #000066;
}

table.links caption {
    color: red;
    font-size: small;
    text-align: center;
    padding-bottom: 5px;
    font-weight: bold;
}

table.links td {
   padding: 1px;
   border: 1px;
   border-style: dotted;
   border-color: #000066;
   font-size: small;
   text-align: center;
   color: red;
   background: #ffff00;
}

table.thumbnail th {
   font-size: x-small;
   text-align: center;
   background: #241374;
   color: #ffffff;
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 2px;
   padding-right: 2px;   border: 1px;
   border-style: dotted;
   border-color: #000066;
   font-size: small;
   text-align: center;
   color: red;
   background: #ffff00;
}

table.thumbnail {
   border-collapse: collapse;
}

table.thumbnail th, table.thumbnail td { 
   padding: 2px;
   border-right: 1px solid #000066;
}

table.thumbnail caption {
    color: #000066;
    font-size: small;
    text-align: center;
    padding-bottom: 5px;
    font-weight: bold;
}

table.thumbnail td {
   width: 300px;   
   font-size: small;
   text-align: center;
   color: gray;
   background: #e2edff;
}