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


			/********** BASIC STYLING ******/
			
			* {
                margin: 0;
                padding: 0;
            }
			
			#title {
	font: 42px 'Yanone Kaffeesatz', arial, serif;
	letter-spacing: 2px;
	margin: 0;
	color: #666;
	text-align: center;
	text-shadow: 0 1px 0 #fff, 0 -1px 1px #000;
			}
			
			
			/***********  STYLING THE TAB SYSTEM ************/
			
            #tab-area {
	width: 430px;
	margin: 20px 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:765px;
	height: 48px;
	font: bold 12px 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: 152px;
	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: #fff;
                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: 766px;
	height: 450px;
	margin-top: 10px;
	position: relative;
	border: 1px solid #aaa;
	border-top: 1px solid #d9d9d9;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
	-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);
            }
            
            .panes > div {
	padding: 20px;
	height: 400px;
	overflow: hidden;
	font: 12px/1.4 Calibri, "Myriad Pro", Myriad, Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif;
	position: absolute;
	top: 1px;
	left: 2px;
	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;
            }
			
            /******************** THE TAB SWITCHING FUNCTIONALITY **************/
			
			/* On page load with no hash tag in url, display first pane and highlight first tab */
            .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) {
				 z-index:2;
				 opacity: 1;
			}
            
			/* 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 {
				display: block;
			}