/*basic structure and organization for index page of SMS website */
body {
    font: 100% Verdana, Arial;
    width: 720px;
    margin: 10px 10% 0 10%;
    min-width: 720px;
    }
#content{
         position:relative;
         top:100px;}
.shiftcontainer {
                position:relative;
                left:5px;
                top:5px
                width: 720px;  
                        }
.shadowcontainer{
                 width:720px;
                 background-color: #708090;
                 border: 1px solid gray;
                 }
h1{
   margin-left: 0;
   text-align:center;
   font-weight:bolder; 
   }

/* 
site title 
*/

#title {
                       background-image:url(images/Alishan_sms.jpg) ;
                       background-repeat: no-repeat;
                       background-position:center;
                       border:1px solid gray;
                       height: 300px;
                       min-width:720px;  
                       left: -5px; /*shadow depth*/
                       top: -5px; /*shadow depth*/               
}
.intro ul {
     font: 70% Verdana;   
        }
#transbox
  {
  font-weight:bold;
  width: 160px;
  height: 75px;
  font:  80% "Lucida Sans";  
  background-color: #ffffff;
  position: relative;
  left: 76%;
  top: 70%;
  padding: 2px; 
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  }  
div.intro {
          width: 475px;
          height: 200px;
          background-color: #ffffff;
          position:absolute;
          top: 55px;
          left: 5%;
          padding: 1%;
                       /* for IE */
                        filter:alpha(opacity=60);
                          /* CSS3 standard */
                           opacity:0.6;
       }
div.intro p{
    font: 70% Verdana, "Times New Roman";
     
} 
.Introduction{
              font: 80% Verdana;
              padding: 10px; 
               }
.Introduction p:First-letter{
                         color: Blue;
                        font-size:large; 
                        font-weight:bold;
          }

          /*   NAVIGATION BAR */
          .tabs{
                position:relative;
                margin-left:0; 
                height:32px;
                width:100%;
                background-color: white; 
                }
            .tabs ul{
                     padding: 0;
                     margin: 0;
                     font: bold 60% default;
                     list-style-type: none;         
                     }
             .tabs li{
                   display: inline;
                   margin: 0;
                           }
              .tabs li a{
                       padding: 3px 7px;
                       text-decoration: none;
                       padding-right: 32px; /*extra right padding to account for curved right edge of tab image*/
                       color: blue;
                       background: transparent url(images/righttabdefault.gif) 100% 1px no-repeat; /*give illusion of shifting 1px down vertically*/
                       border-left: 1px solid #dbdbd5;
                       position: relative;
                       display: block;
                       float: left;
                       margin-left: -20px; /*shift tabs 20px to the left so they overlap*/
                       left: 20px;
                       }

                .tabs li a:visited{
                                   color: blue;
                                   }

                .tabs li a:hover{
                                  text-decoration: underline;
                                  }

                .tabs li.selected a{ /*selected tab style*/
                                    color: black;
                                    z-index: 100; /*higher z-index so selected tab is topmost*/
                                    top: 1px; /*Shift tab 1px down so the border beneath it is covered*/
                                    background: transparent url(images/righttabselected.gif) 100% 0 no-repeat;
                                    }

                .tabs li.selected a:hover{
                                             text-decoration: none;
                                             }

                                             </style>

                                             <!--[if IE]>
                                             <style type="text/css">
                .tabs{
                          height: 1%;  /*Apply Holly 3px jog hack to get IE to position bottom border correctly beneath the menu*/
                          }
                          </style>
                          <![endif]-->

                .tabs ul {
                             position:absolute;
                             padding: 0;
                             max-height:30px;
                             margin: 0 5% 0 0; 
                             font: bold 60% default;
                             list-style-type: none;
                             text-align:center;
                             }
                               /* 
                               CALENDAR 
                               */
                               #calendars{
                                          margin-top: 0;
                                          width:100%;
                                          border-color:black;
                                           }                               
                               table.cal {
                                     position: relative;
                                     margin-left: 60px;
                                   
                                     height: 400px;
                                     width: 600px;
                                     background: #DCDCDC; 
                                     font: 150% Verdana bold; 
                                     border: 5px solid #708090; 
                                    }
                               table.cal p {
                                       font: 55% time-roman bold ;
                                       color: #FFFF00;
                                       height: 80%;
                                     
                                       text-align:left;
                                       }
                               table.cal .month {
                                       text-align:center;  
                                       color: #FFFF00;
                                       font-weight:bold;
                                       } 
                                table.cal th {  
                                     text-align: center;
                                     font-weight: bold;
                                     color: white;
                                     border: 1px dotted white;
                                     background: transparent url(images/blue-glossy.gif) 100% 1px repeat;   
                                     }           
                                table.cal td {
                                      text-align: right;
                                      margin-right:  -10% ;
                                      border: 1px dotted white;
                                      vertical-align: top;
                                      }
                                .cal .wkday {
                                          color: #808080;   
                                          width:5%;
                                          }
                                .cal .fri {
                                          width:10%; 
                                         text-weight: bold;
                                         color: #FFD700;
                                         background: transparent url(images/blue-glossy.gif) 100% 1px repeat;
                                         }
                                table.cal td.wkend {
                                            color: black;
                                            width:5%; 
                                            }
                                .cal .hlday {
                                       color:red;
                                       background-color:#B0C4DE;
                                       }
                                 .cal .Events {
                                        color: #FFFF00;
                                        background-color: #191970; 
                                        width:50%;
                                        }
                                        

/* 
News & Bulletin Board 
*/
 .roweven {
       background: Gainsboro; }
 .leftcol {text-align:right; 
           font: 50%}
 .rightcol {text-align:left;
            font:50% }

#Inner{  
        width:100%;    
        }
#InTable {
         width: 90%; 
         margin-left:5%;
         margin-bottom:0;
         font-size: 90% } 
#InTable th {
         font-size: 100%;
         background-color: Midnightblue;
         color: white}
.bul{   
         width: 596px;
         margin-left:60px;
         background: #FFF8DC;       
        
  }    
.bul .bultents{
     background: transparent url(images/brcorner.gif) bottom right no-repeat;
     position: relative;
     font-size: 90%;
     left: 2px;
     top: 2px;
     padding: 1px 4px 15px 5px;
     border: 1px solid #b8b8b8;
}

h2 { 
     margin-top: 10px;
     font: 160% verdana bold;
     color: yellow;
     text-align:center; 
     background: transparent url(images/blue-glossy.gif) 100% 1px repeat;
    } 
/*
  Photo Gallery                         */

/*    
Gallery   
*/
.rightcol #photo {
        cursor: default;
        list-style: none;
        margin-right: -40px;
        
          }
#photo li {
    position: static;
    background: #eee;
    back-color: #ddd #bbb #aaa #ccc;
    border-style: solid;
    border-width: 1px;
    color: inherit;   
    float: left;
    margin: 3px;
    padding: 5px;
    z-index: 10;
}
#photo a {
     
         position:relative;
}
#photo a .prev
{
	     display: none;
}

#photo img {
         background: #fff;
         border-color: #aaa #ccc #ddd #bbb;
         border-style: solid;
         border-width: 1px;
         color: inhert;
         paddling: 2px;
         vertical-align: top;
         width: 45px;
         height: 35px; 
         
}
#photo a:hover {
         display: block;
         font-size: 100%;
         z-index: 1;
}

#photo .prev {
         dispay: block;
         border-color: #000;
         width: 480px;
         height: 360px;
         z-index: 1;
}
#photo p {
       font:50% default; 
       text-align:center;}
gallery {
         cursor: default;
         list-style: none;
}
.gallery a {
         
         position:relative;
}
.gallery a .prev
{
	     display: none;
}
.gallery a:hover .prev {
         display: block;
	     position: absolute; 
	     top: -38px;
	     left: -50px;
	     z-index: 1;
}
.gallery img {
         background: #fff;
         border-color: #aaa #ccc #ddd #bbb;
         border-style: solid;
         border-width: 1px;
         color: inhert;
         paddling: 2px;
         vertical-align: top;
         width: 135px;
         height: 100px; 
         
}
.gallery a:hover {
         display: block;
         font-size: 100%;
         z-index: 1;
}

.gallery p {
         font: 75% default;
         max-width: 140px; }
.gallery p.clss {
         font-weight:bold; 
         background: gray;
         text-align: center;
         color: DarkOrange;}
.gallery p.txt {
               font:60%  default; }
.gallery li {
    list-style: none;
    position: static;
    background: #eee;
    back-color: #ddd #bbb #aaa #ccc;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    diaplay: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    z-index: 10;
}


.gallery .prev {
         dispay: block;
         border-color: #000;
         width: 480px;
         height: 360px;
         z-index: 1;
}
/*
         footer
*/
#footer {
        clear:left;
        width: 100%;       
        padding:: 5px 0 ;
        font-size: 70%;
        text-align: right;
}
/*                                     
                                               Forms
*/
.acform{
        background-color: #DCDCDC; }
.acform p{
        width: 600px;
        clear: left;
        margin: 0;
        ffont-size: 90%;
        padding: 5px 0 8px 0;
        /*padding-left: 155px; width of left column containing the label elements*/
        border-top: 1px dashed gray;
        height: 1%;
}

.acform label{
font-weight: bold;
text-align: right;
float: left;
/*margin-left: -155px; width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.submitbutton{
              cursor:pointer;
              border:outset 1px #ccc;
              background:#999;
              color:#666;
              font-weight:bold;
              padding: 1px 2px;
              background:url(images/formbg.gif) repeat-x left top;
}
#actab  {
        background: light-gray;
        font: 70% "Arial";
         margin-top: 20px;
         text-align: center;
                                          width:99%;
                                          border-color:black;
        }
table.ACR  {
           position: relative;
          border: outset 2px solid gray;
          font: 80% "Arial";   
          text-align:  center;  
}  
table.ACR th  {
         font-weight: bold;
         background-color:  DarkBlue;
         color: yellow;               
         
}
table tr.odd {
         background: #D3D3D3;
}
table tr.even  {
    background: white;
}