/************ LIGHT VERSION **********/


			/********** BASIC STYLING ******/
			
			/* {
                margin: 0;
                padding: 0;
            }*/
            
			
			
			#title {
				font-family: 'Philosopher', arial, sans-serif;
				font-size: 30px;				
				letter-spacing: 2px;
				margin: 0px 0;
				color: #333333;
				text-align: center;
				border-bottom: none;
				/*text-shadow: 0 1px 0 #fff, 0 -1px 1px #000;*/
			}
			
			
			/***********  STYLING THE TAB SYSTEM ************/
			
			
            #tab-area {
                width: 945px;
                margin: 15px auto 0 auto;
				position: relative;
            }
            
            .dummy{
                outline: none;  /* For IE */
            }
			
			input[name=pane] { display: none;}
			
            
			/* Styles for the tabs */
            .tabs {
                position: relative;
                list-style: none;
                width:937px;
                height: 48px;
				font: bold 14px Calibri, "Myriad Pro", Myriad, Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif;				
				letter-spacing: 1px;
                border: 1px solid #888;
				border-top: none;
                -moz-border-radius: 8px;
                -webkit-border-radius: 8px;
                border-radius: 8px;
				-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.5) ;
				-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.5) ;
				box-shadow: 0 2px 2px rgba(0,0,0,0.5) ;
            }

            .tabs li {                
				position:relative;
                overflow: hidden;
                cursor: pointer;
                float: left;                
                width: 133px;
                height: 48px;                 
                border-right: 1px solid #999;                
			}            
            
            .tabs li:last-child {
               border-right: none;
            }

            .tabs label {
                display: block;					
                height: 48px;                
                position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				z-index: 2;
                color: #FFBA58;
                text-decoration: none;
				text-align: center;
				line-height: 48px;
				cursor: pointer;
            }
			
            /* Style for span tag that causes active/current tab highlighting */
            .tabs li .active{                
                position: absolute;
				display: none;                
                top: 0;
                left: 0;
				bottom: 0;
				right: 0;
                z-index: 1;				
            }
			
			.tabs li:first-child, .tabs li:first-child .active  {
               -moz-border-radius: 8px 0 0 8px;
                -webkit-border-radius: 8px 0 0 8px;
                border-radius: 8px 0 0 8px; 
            }
            
            .tabs li:last-child, .tabs li:last-child .active {
               -moz-border-radius: 0 8px 8px 0;
                -webkit-border-radius: 0 8px 8px 0;
                border-radius: 0 8px 8px 0; 
            }
            
			
			/* Styles for the panes and their parent wrapper */
            .panes {
                width: 944px;                                
				margin-top: 20px;
				overflow: hidden;
				position: relative;
				border: 1px solid #aaa;
				border-top: 1px solid #d9d9d9;				
				-moz-border-radius:8px;
                -webkit-border-radius:8px;
                border-radius:8px;
				-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
                -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
                box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
				-moz-transition: height 500ms ease-in-out ;
				-moz-transition-delay: 500ms;
				-webkit-transition: height 500ms ease-in-out ;
				-webkit-transition-delay: 500ms;
				-o-transition: height 500ms ease-in-out ;
				-o-transition-delay: 500ms;
				transition: height 500ms ease-in-out ;
				transition-delay: 500ms;
            }
            
            .panes > div {
                padding: 20px;				
				font: 12px/1.4 Calibri, "Myriad Pro", Myriad, Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif;                
				position: absolute;	
				top: 0;
				left: 0;
				z-index: 1;
				opacity: 0;				
				-moz-transition: z-index, opacity 500ms ease-in-out ;
				-webkit-transition: z-index, opacity 500ms ease-in-out ;
				-o-transition: z-index, opacity 500ms ease-in-out ;
				transition: z-index, opacity 500ms ease-in-out ;
            }
			
			.panes > div:first-of-type { height: 950px;}
			.panes > div:nth-of-type(2) { height: 230px;}
			.panes > div:nth-of-type(3) { height: 230px;}
			.panes > div:nth-of-type(4) { height: 230px;}
			.panes > div:nth-of-type(5) { height: 230px;}
			.panes > div:nth-of-type(6) { height: 230px;}
			.panes > div:last-of-type { height: 150px;}
			
            
			/******************** THE TAB SWITCHING FUNCTIONALITY **************/
			
			/* On page load with no hash tag in url, display first pane and highlight first tab */
			.panes { height: 950px;}
            .panes > div:first-of-type { z-index: 2; opacity: 1;}
            .tabs li:first-child .active { display: block;}            
            
			
			/* On url hash change first hide all panes and remove highlight from all tabs */
	        input[name=pane]:checked + .dummy .panes > div { z-index: 1; opacity: 0;}            
	        input[name=pane]:checked + .dummy .tabs li .active { display: none;}                
              
			
            /* After the previous step now display the appropriate pane */			
            #p1:checked + .dummy .panes > div:nth-of-type(1) ,
            #p2:checked + .dummy .panes > div:nth-of-type(2) ,
            #p3:checked + .dummy .panes > div:nth-of-type(3) ,
			#p4:checked + .dummy .panes > div:nth-of-type(4) ,
            #p5:checked + .dummy .panes > div:nth-of-type(5) ,
            #p6:checked + .dummy .panes > div:nth-of-type(6) ,
			#p7:checked + .dummy .panes > div:nth-of-type(7) {
				 z-index:2;
				 opacity: 1;
			}
			
			/* Change the height of .panes accordingly */
			#p1:checked + .dummy .panes { height: 950px;}
			#p2:checked + .dummy .panes { height: 270px;}
			#p3:checked + .dummy .panes { height: 190px;}
			#p4:checked + .dummy .panes { height: 160px;}
			#p5:checked + .dummy .panes { height: 225px;}
			#p6:checked + .dummy .panes { height: 190px;}
			#p7:checked + .dummy .panes { height: 425px;}
            
			/* And also highlight the appropriate tab */
            #p1:checked + .dummy .tabs li:nth-child(1) .active, 
            #p2:checked + .dummy .tabs li:nth-child(2) .active,
            #p3:checked + .dummy .tabs li:nth-child(3) .active,
			#p4:checked + .dummy .tabs li:nth-child(4) .active, 
            #p5:checked + .dummy .tabs li:nth-child(5) .active,
            #p6:checked + .dummy .tabs li:nth-child(6) .active,
			#p7:checked + .dummy .tabs li:nth-child(7) .active
			{
				display: block;
			}