#playerForm { 
    position: relative; 

    background: -webkit-linear-gradient(bottom,#eaeaea, #fafafa);
    padding: 10px;
    display: inline-block;
    border-radius: 3px;
    border: solid 1px #ddd;
    width: 900px; 
    height: 200px;
    overflow: hidden;
}

input { display: none; }
input:checked + label, label:hover { 
    background: #0DB867;
    background: -webkit-linear-gradient(top,#EA3A97, #0DB867);
    border: solid 1px black;
    color: white; 
}
label { 
    font-family: helvetica;
    cursor: pointer; 
    display: block; 
    border: solid 1px transparent;
    text-align: center; 
    line-height: 40px; 
    border-radius: 3px; 
    float: left;
    width: 40px;
	margin-right: 5px;
    height: 200px;
    line-height: 200px;
	
	
}
label:last-child { margin-right: 0; }
label {     
    background: #B4FFDC; 
	background: -webkit-linear-gradient(top,#B4FFDC,#FEB8DD);
    border: solid 1px #C5C5C5; 
		
}

#textRotate {
	-ms-transform: rotate(-90deg); /* IE 9 */
    transform: rotate(-90deg);
}

article { 
    width: 0;
    height: 145px;  
    overflow: hidden; 
    -webkit-transition: width .25s linear, opacity .2s linear; 
    transition: width .25s linear, opacity .3s linear; 
    position: relative; 
    top: 5px;
    margin-bottom: 0;
    padding: 0;
    margin-right: 10px;
    opacity: 0;
    float: left;
    text-align:left;
}

div:last-child article { margin-right: 0; }
article p {
     color: #333;

    line-height: 18px;
    width: 800px;    
    padding: 5px 10px;
}

div > input:checked ~ article { width: 700px; opacity: 1; }