/*
 Willowbank Bowling Club Style Sheet  
    		
*    File			 wbbc.css
*    Developed by		 Computer Training & Business Support
*    Year		 	 2009
*	
*    Purpose	 		 This file contains the stylesheet code for the website
   
*    The following descriptors identify the classes within the Willowbank Website

*/

/******************* Page Head and banners ******************/

.titlebar
     {
      width             :100%;
      height            :12% ;
      background-color  :#00FF00 ;
      padding-top       :0.1em;
      padding-left      :0.2em;
      padding-bottom    :0.1em ;
      text-align        :left ;
  
      }

/********* Inline logo positioning *************/ 
.clublogo
    {
	 position : relative ;
	 float : left ;
	 margin-top:1.2em;
	 height:152px;
	 width :132px;
	 z-index :1;
		 
	}

.bannerlogo
     {
       position :relative ;
       margin-right :0.8em;
       height : 172px;
       width  : 570px;
       
     }

.banner
    {
    padding-top       :0.2em;
    padding-bottom    :0.2em;
    padding-left       :0.5em;
    background-color  :#66FFCC;
    width             :100%;
    text-align        :left;
    font-size         :0.9em;
    font-weight       :bold;
}
 
/********** Navigation  Section **************/

.nav 
     {
      background-color  :#00FF00;
      border            :1px solid; 
     }


.nav ul
   {
     list-style      :none ;
     margin          :0.2em;
     padding-left    :0.1em;
     padding-bottom  :0.1em;
     border-bottom   :1px; solid #711515;
     font            :bold 0.9em verdana , arial, sans-serif;
    }

.nav li
     {
     background-color :#b51032;
     color            :#ffffff;
     display          :inline;
     margin           :2px 2px 0px 2px ;
     }

.nav a 
     {
        color           :#ffffff;
        display         :inline ;
        padding-right   :0.5em;
        padding-bottom  :0.2em;
        text-decoration :none;
      }

.nav a:hover
     {
      color            :#000000;
      background-color :#00ffff ;
      padding-right   :0.5em;
      padding-bottom  :0.2em;
      text-decoration  :none ;
      }

.nav li.subnav
    {
      display:block ; 

     }

/***** end of Main Navigation ****************/
  

/******************** Main Page Content ***************************/
 
.content
     {
      padding-top    :0.5em ;
      padding-bottom :0.5em;
      padding-left   :0.3em;
      padding-right  :0.3em;
      margin-left    :2% ;
      text-align     :left;
      line-height    :140% ;
      max-width      :95%;
      
     }

.content h1
     {
      padding-bottom   :0.2em;;
      background-color :transparent ;
      }

.content h3
{
     padding-bottom:0.2em;
     margin-left:0.4em;
     

}

.content ul 
      {
        list-style      :none;
        line-height     :135% ;
        margin-bottom:0.2em;
       }

.content li
   {
     text-decoration    :none;
    }

.content p ::first-letter
    {
       font-size     :2em ;
       padding       :0.1em;
       vertical-align :middle ;
     }
.content ol
{

  line-height:160%;
  padding-left:1.0em;
  padding-right:1.0em;
  
}

/*** for IE and firefox browsers ***/

.content p > em:first-child
{
       font-size       :2em ;
       padding-right   : 0.2em;
       padding-left    :0;
       vertical-align  :middle ;
       line-height     :0.9em;
}

.quote
     {
      font-size :1.2em;
      padding-left :2.5em;
      padding-right : 2.5em;
      font-style: italic;
    }  
 
.greentick  
     {
     list-style-image: url("green_tick_small.png");
     padding-left:2.0em;;
     
     }



.greentick li
      {
        line-height :1.75em;
        padding-left :1.2em;
        
       
       }

.smilebullet
         {
          list-style-image: url("smile.jpg");
          padding-left:2.0em;
         }


.refbullet
          {
           list-style-type:decimal;
           list-style-position :outside;
          
           }

.ulistbullet
          {
           list-style-type :square ;
           line-height    :140% 
           padding-left:1.5em;
           }



/************** CSS For Garden Page Images *************/

.wbgroundplan
    {
	 position : relative ;
	 float : right ;
	 margin-top:0.5em;
         margin-left : 0.5em;
         border : 1px solid #000000;
	 height:30%;
	 width :30%;
	 z-index :1;
		 
	}

    

.wbtriangle
     {
         position : relative ;
      	 float : right ;
         border : 1px solid #000000;
	 margin-top:0.5em;
         margin-left : 0.5em;
	 height:25%;
	 width :25%;
	 z-index :1;


     }

.wbnorthfoto

      {
         position  : relative ;
      	 float     : right ;
         border    : 1px solid #000000;
	 margin-top:0.5em;
         margin-left : 1.0em;
         
	 height    :25%;
	 width     :25%;
	 z-index   :1;


      }


.wbtrigfoto

      {
         position  : relative ;
      	 float     : left ;
         border    : 1px solid #000000;
	 margin-top:0.5em;
         margin-right : 1.0em;
	 height    :30%;
	 width     :20%;
	 z-index   :1;


      }


/*********** css for thumbnail Links ******************/

.thumbnail
         {
         position : relative;
         float : right ;
         border-top : 0.5em;
         border-bottom : 0.5em;
         }


/*************** css for footernav ****************/
.footernav 
     {
      
      background-color :transparent;
     }


.footernav ul
   {
     list-style      :none ;
     margin          :0.2em;
     padding-left    :0.1em;
     padding-bottom  :0.1em;
     border-bottom   :1px solid #711515;
     font            :bold 0.9em verdana , arial, sans-serif;
    }

.footernav li
     {
     background-color :#b51032;
     color            :#ffffff;
     display          :inline;
     margin           :2px 2px 0px 2px ;
     }

.footernav a 
     {
        color           :#ffffff;
        display         :inline ;
        padding-right   :0.5em;
        padding-bottom  :0.2em;
        text-decoration :none;
      }

.footernav a:hover
     {
      color            :#000000;
      background-color :#00ffff ;
      padding-right   :0.5em;
      padding-bottom  :0.2em;
      text-decoration  :none ;
      }
.footernav li > input
{
        color            :#ffffff;
	background-color :#0000ff;
	border-right     : 1px solid #000;   /* marks the end of link*/
	border-top       : 1px solid #000;   /* marks the top of link*/
	border-left      : 1px solid #000;
	} 
	
.footernav button:hover
{
         background-color:#ffff00;
         color           :#000000;
}

.footernav  button

{
  background-color:#CC6633;
  color           :#ffffff;
}

/***************** end of footernav ****************************/

body
    {
      background-color :transparent ;
      margin           : 0;
      padding          : 0;
      font             : 1.1em / 1.8em verdana, arial, sans-serif;
  
  }

/************* Column Management **********************************/


/* producing two column layout without tables */

.leftcoll
{
        position     :relative ;
	margin-top   :4%;
	margin-left  :8% ;
	width        :30%;
	float        :left ;

}
.floatr
{
        position    :relative; ; 
	margin-left :2em;
	margin-right:0.5em;
	float       :right; 
	width       :40%;

}


/********************** css for forms ****************************/

form
     {
      border  : 1px solid #000000;
      padding : 1em 2em 2em 1em ;
      }

form p
      {
       
       padding :2en;;
       margin-bottom:1.5em;
      }


label
   {
       width:35%;
       float: left;
       text-align: left;
       margin-right: 0.5em;
       display: block;

   }


html
    {
     scrollbar-arrow-color       :#3300ff;
     scrollbar-base-color        :#66ccff;
     scrollbar-face-color        :#99ff00;
     scrollbar-highlight-color   :#ffff00;
     }


select
      {
       width           :35%;
       color           :#000000;
       background-color:#33FF00;
       padding :0.2em;
       
      }

input
    {
     width :35%;
     align :left;
     color: #781351;
     background: #fee3ad;
     border: 1px solid #781351
    }


input:focus, textarea:focus
   {
    background-color :#ffff00;
   }


.submit input
   {
    margin-left: 2.5em;
    color: #000000;
    background: #CCCC33;
    border: 2px outset #d7b9c9
   }


.input:hover
  {
   border         :1px solid #808080;
   background-color :#ffff00;
  

  }


fieldset
{
        margin-left :2em;
        border: 1px solid #781351;
        width: 75%;
}

legend
{
         color: #fff;
         background: #ffa20c;
         border: 1px solid #781351;
         padding: 2px 6px
}

/*************** Table Formatting *************/

.tablehead
      {
        text-decoration : underline;
      }

caption.contact 
  {

    caption-side:top ;
  } 

table.contact
    {
      border             : 1px solid #338ba6 ;
      border-collapse    : collapse ;
      border-style       : outset ;
      width              : 80% ;
      background-color   : #99cc99;
      padding-bottom     : 1.5em;
     }

table.contact th, table.contact td 
     {
       border            : 1px solid #000000 ;
       text-align        : center ;
       padding           : 0.2em ;
       
      }

table.contact th
      {
        background-color : #ff0000;
      }

table.fixtures
    {
      border             : 1px solid #338ba6 ;
      border-collapse    : collapse ;
      border-style       : outset ;
      width              : 90% ;
      background-color   : #99cc99;
     }


table.fixtures th, table.fixtures td 

{
       border            : 1px solid #000000 ;
       text-align        : center ;
       padding           : 0.2em ;
       
       
    }

table.fixtures caption
  {
       border            :1px solid #000000 ;
       text-align        :center ;
       padding           :0.2em ;
       caption-side      :top ;
        background-color :#99cc99;
      }


table.fixtures th
      {
        background-color : #ff0000;
      }


table.buslinks

 {
      border             : 1px solid #338ba6 ;
      border-collapse    : collapse ;
      border-style       : outset ;
      width              : 95% ;
      background-color   : #99cc99;
     }


table.buslinks th, table.buslinks td 

{
       border            : 1px solid #000000 ;
       text-align        : center ;
       padding           : 0.2em ;
       
       
    }

table.buslinks caption
  {
       border            :1px solid #000000 ;
       text-align        :center ;
       padding           :0.2em ;
       caption-side      :top ;
        background-color :#99cc99;
      }


table.buslinks th
      {
        background-color : #ff0000;
      }


table.terms
     {

      border             : 1px solid #338ba6 ;
      border-collapse    : collapse ;
      border-style       : outset ;
      width              : 90% ;
      background-color   : #99cc99;
      text-align         : center ;
      line-height        : 140% ;
      padding           :  0.2em ;
     }





 table.terms th
      {
        background-color : #ff0000;
        text-align :center;
      }


table.terms td
       {
        border             : 1px solid #338ba6 ;
        text-align         :left;
        
       }

table.terms caption
  {
       border            :1px solid #000000 ;
       text-align        :center ;
       padding           :0.2em ;
       caption-side      :top ;
       background-color :#99cc99;
       
    } 


table.terms ul
    
     {
       text-align : left ;
       
      }


table.calander

      {
       border             : 1px solid #338ba6 ;
       width              : 40% ;
       float              : right ;
       caption-side       : top ;
       background-color   : ##2EFE2E;
      }

table.calander th, table.calander td 
     {
       border            : 1px solid #000000 ;
       text-align        : center ;
       background-color  : #fff000;
       padding           : 0.2em ;
       
      }

 
 
      
/****************** Image Manipulation ***************/

.leftimg    /* Sets an image to float left */

{
   float: left ;

} 

.clear
 {

  clear :both ;

  }