﻿/**
 * 	CSS3 Only Horizontal and Vertical Accordion
 * 	Author: Stephen Wallace for killure.ie
 *  Website: www.killutre.ie
 *  Date: 17/02/13
 *  Version: 1.0
 
 *//*General clear*/  

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/*Define Accordion box*/

    .accordion {
		width:300px;
        overflow:hidden;   
        margin:0px 10px auto;   
        color:#474747;   
        background:#999999;   
        padding:10px;   
    }
    
/*General Accordion****************************************************************************/

/*set style of closed slide*/   

    .accordion section{
		float:left;
        overflow:hidden;   
        color:#999999;   
        cursor:pointer;   
        background:#333;   
        margin:2px;   
    }  
        
    .accordion section:hover { background:#FF0000; }  

    .accordion section ul { display:none; }  
    
/*Set style of open slide*/
    
    .accordion section:target { background:#FFF; padding:2px; }
      
    .accordion section:target:hover { background:#FFF; }  
     
    .accordion section:target h6 { width:100%; }  
        
    .accordion section:target h6 a{ font-weight:bold; color:#333; padding:0; }  
       
    .accordion section:target ul { display:block; }

    .accordion section h6 a{ 
         padding:0px 10px;  
         display:block;   
         font-size:16px;   
         font-weight:normal;  
         color:#eee;   
         text-decoration:none;   
    }  

/*End General Accordion****************************************************************************/

/*Horizontal Accordion *********************************************************************/       

    .horizontal section{   
         width:5%;   
         height:250px;   
         -moz-transition: width 0.2s ease-out;   
         -webkit-transition:width 0.2s ease-out;  
         -o-transition:width 0.2s ease-out;  
         transition:width 0.2s ease-out;  
    }  

/*Header of closed slide*/  
    .horizontal section h6 {   
         -webkit-transform:rotate(90deg);  
         -moz-transform:rotate(90deg);  
         -o-transform: rotate(90deg);  
         transform: rotate(90deg);  
         width:240px;   
         position:absolute;   
         left:-100px;   
         top:85px;  
    }

/*On mouse over open slide*/  

    .horizontal :target{ width:73%; height:230px; } 
     
    .horizontal :target h6{ 
         top:0px;  
         left:0;  
         -webkit-transform:rotate(0deg);  
         -moz-transform:rotate(0deg);  
         -o-transform: rotate(0deg);  
         transform: rotate(0deg);   
    } 
     
/*End Horizontal Accordion *********************************************************************/

/*Vertical Accordion *************************************************************************/       

    .vertical section{   
         width:100%;   
         height:40px;   
         -webkit-transition:height 0.2s ease-out;  
         -moz-transition:height 0.2s ease-out;  
         -o-transition:height 0.2s ease-out;  
         transition:height 0.2s ease-out;  
    }  

    .vertical section ul {   
         position:relative;   
         left:-10px;   
         top:-35px;   
    } 
     
/*Set height of the slide*/  
    .vertical :target{ height:300px; width:98%; }  
    
    .vertical section h6 { position:relative; left:0; top:-20px; }
    
