/************ LIGHT VERSION (DESIGN 2)  **********/


			/********** BASIC STYLING ******/
			
			
			#title {
				font: 42px 'Yanone Kaffeesatz', arial, serif;				
				letter-spacing: 2px;
				margin: 40px 0;
				color: #666;
				text-align: center;
				
			}
			
			
			/***********  STYLING THE TAB SYSTEM ************/
			
			
            #tab-area {
                width: 610px;
                /*margin: 40px 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;               
            }
			
			.tabs li {
                position: relative;                
                width: 140px;
                height: 38px;
				float: left;				
				cursor: pointer;
				font: bold 11px  Arial, sans serif;				
				/*letter-spacing: 1px;    */            
				border-right:  1px solid #aaa;
							

            }

            .tabs li:first-child {
				margin-left: 2px;
				border-left: 1px solid #888;
				-moz-border-radius: 0px 0 0 0;
                -webkit-border-radius: 0px 0 0 0;
                border-radius: 0px 0 0 0;					
			}
            
			.tabs li:last-child {
				border-right: 1px solid #888;				
				-moz-border-radius: 0 0px 0 0;
                -webkit-border-radius: 0 0px 0 0;
                border-radius: 0 0px 0 0;				
			}
			  

            .tabs label {
                display: block;					
                height: 38px;                
                position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				z-index: 2;
                color: #fff;
                text-decoration: none;
				text-align: center;
				line-height: 38px;
				outline: none;
				cursor: pointer;
            }
			
            /* Style for span tag that causes active/current tab highlighting */
            .tabs li .active {                
                position: absolute;
				display: none;                
                top: -10px; 
				left: -3px;
				width: 150px;
				height: 48px;
                z-index: 1;				
				-moz-border-radius: 0px 0px 0 0;
                -webkit-border-radius: 0px 0px 0 0;
                border-radius: 0px 0px 0 0;
				-moz-box-shadow: 0 0 0px rgba(0, 0, 0, 0.5);
				-webkit-box-shadow: 0 0 0px rgba(0, 0, 0, 0.5);
				box-shadow: 0 0 0px rgba(0, 0, 0, 0.5);
            }
			
			/* Code to achieve inverted round corners at bottom of #active */
			.tabs li .active:before {
				content: '';
				position: absolute;
				top: 40px;
				left: -10px;				
				width: 10px;
				height: 8px;
				background: transparent;				
				-moz-border-radius: 0 0 0px 0;
				-webkit-border-radius: 0 0 0px 0;
				border-radius: 0 0 0px 0;
			}
			
			.tabs li .active:after {
				content: '';
				position: absolute;
				top: 40px;
				left: 107px;				
				width: 10px;
				height: 8px;
				background: transparent;				
				-moz-border-radius: 0 0 0 0px;
				-webkit-border-radius: 0 0 0 0px;
				border-radius: 0 0 0 0px;
			}

			/* The strip between the tabs and the panes */
			.tab-strip {
				content: '';
				position: relative;
				clear: both;
				z-index: 1;
				height: 10px;
				width: 638px;								
				-moz-border-radius: 0px 0px 0 0;
				-webkit-border-radius: 0px 0px 0 0;
				border-radius: 0px 0px 0 0;	
				-moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
                -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
                box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
			}
            
			
			/* Styles for the panes and their parent wrapper */
            .panes {
                width: 636px; 
				overflow: hidden;
				position: relative;
				border: 1px solid #ccc;
				border-top: none;				
				-moz-border-radius: 0 0 0px 0px;
                -webkit-border-radius: 0 0 0px 0px;
                border-radius: 0 0 0px 0px;
				-moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
                -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
                box-shadow: 0 0px 0px 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: 760px;}
			.panes > div:nth-of-type(2) { 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: 760px;}
            .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) {
				 z-index:2;
				 opacity: 1;
			}
			
			/* Change the height of .panes accordingly */
			#p1:checked + .dummy .panes { height: 760px;}
			#p2:checked + .dummy .panes { height: 500px;}
			#p3:checked + .dummy .panes { height: 500px;}
			#p4:checked + .dummy .panes { height: 500px;}
            
			/* 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 {
				display: block;
			}