css3 horizontal accordion not functioning - html

Question

I know that the problem lies somewhere in my CSS3, but as a novice I simply can't work out what I am doing wrong with this. What I am trying to do is set up a horizontal accordion using only CSS3 and HTML5.
The effect I want to create is labels on the right, rotated 90deg until selected. selected labels I want to have rotate back to 0deg which I can do fine and to reveal their content which I am placing in article tags transitioning in from the right, ie transform: width 0.3s ease-out; to fill the full width of the containing div element.
This is the HTML -
<header>
<h1>Weedy101</h1>
</header>
<div class="horizontal">
<div class="side">
<input id="trig-a" name="trigger" type="radio" />
<label for="trig-a">This is trig-a's rotated label</label>
<article class="wide">
<h3>This is the content in trig-a</h3>
<p>I am keeping my fingers crossed but expect no mirracles on my first attempt considering I have never attempted a horizontal accordion before and the only examples I have seen use js.</p>
</article>
</div><!-- close the horizontal box -->
<div class="side">
<input id="trig-b" name="trigger" type="radio" checked="yes" />
<label for="trig-b">label for trig-b</label>
<article class="wide">
<h3>trig-b</h3>
<p>Just so it's different</p>
</article>
</div><!-- close the horizontal box -->
</div><!-- Close the new horizontal accordion -->
and this is my css -
.horizontal
{
margin: 10px auto 30px auto;
display: inline-block;
position: relative;
min-width: 100%;
min-height: 450px;
}
.horizontal label
{
font-family: 'News Cycle', sans-serif;
font-weight: normal;
padding: 5px 20px;
position: relative;
width: 450px;
z-index: 20;
display: inline-block;
cursor: pointer;
color: #0e3062;
text-shadow: -1px 1px 1px #677283;
line-height: 1.6em;
font-size: 1.5em;
background: linear-gradient(top, rgba(165,176,161,0.7) 2%, rgba(255,240,231,0.8) 46%, rgba(190,176,177,0.7) 98%);
background: linear-gradient(to bottom, rgba(165,176,161,0.7) 2%, rgba(255,240,231,0.8) 46%, rgba(190,176,177,0.7) 98%);
background: linear-gradient(rgba(165,176,161,0.7) 2%, rgba(255,240,231,0.8) 46%, rgba(190,176,177,0.7) 98%);
background: -webkit-linear-gradient(top, rgba(165,176,161,0.7) 2%, rgba(255,240,231,0.8) 46%, rgba(190,176,177,0.7) 98%);
box-shadow: 0px 0px 0px 1px rgba(191,183,178,1),
1px 0px 0px 0px rgba(190,176,177,1),
0px 2px 2px 0px rgba(34,34,34,1);
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
}
.horizontal label:hover,
.horizontal input:checked + label:hover
{
color: #74450f;
text-shadow: -1px 1px 1px #9b8e76;
background: linear-gradient(top, rgba(165,176,161,0.5) 1%, rgba(255,240,231,0.9) 46%, rgba(190,176,177,0.5) 99%);
background: linear-gradient(top, rgba(165,176,161,0.5) 1%, rgba(255,240,231,0.9) 46%, rgba(190,176,177,0.5) 99%);
background: linear-gradient(top, rgba(165,176,161,0.5) 1%, rgba(255,240,231,0.9) 46%, rgba(190,176,177,0.5) 99%);
background: -webkit-linear-gradient(top, rgba(165,176,161,0.5) 1%, rgba(255,240,231,0.9) 46%, rgba(190,176,177,0.5) 99%);
box-shadow: 0px 0px 0px -1px rgba(191,183,178,0.7),
-1px 0px 0px 0px rgba(190,176,177,0.7),
0px -2px -2px 0px rgba(34,34,34,0.7);
}
.horizontal input:checked + label
{
color: #74450f;
text-shadow: -1px 1px 1px #9b8e76;
line-height: 2.0625em;
font-size: 1.1875em;
background: linear-gradient(top, rgba(165,176,161,1) 3%, rgba(255,240,231,1) 48%, rgba(190,176,177,1) 99%);
background: linear-gradient(to bottom, rgba(165,176,161,1) 3%, rgba(255,240,231,1) 48%, rgba(190,176,177,1) 99%);
background: linear-gradient(rgba(165,176,161,1) 3%, rgba(255,240,231,1) 48%, rgba(190,176,177,1) 99%);
background: -webkit-linear-gradient(top, rgba(165,176,161,1) 3%, rgba(255,240,231,1) 48%, rgba(190,176,177,1) 99%);
box-shadow: 0px 0px 0px 2px rgba(191,183,178,1),
2px 0px 0px 0px rgba(190,176,177,1),
0px 4px 4px 0px rgba(34,34,34,1);
transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-ms-transform:rotate(0deg);
}
.horizontal input
{
display: none;
}
.horizontal article
{
background: #ffffff;
padding: 0px 15px 0px 15px;
margin-top: -1px;
overflow: hidden;
width: 0px;
height: 0em;
position: relative;
display: inline-block;
z-index: 10;
transition: width 0.5s ease-in;
box-shadow: 0px 0px 0px 2px rgba(191,183,178,1);
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
}
.horizontal article p,
.horizontal article h3
{
padding: 5px;
text-shadow: -1px 1px 1px #647881;
}
.horizontal input:checked ~ article.wide
{
max-width: 45em;
width: 100%;
height: 45em;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
}
and for good measure here it is doing weird things -http://weedy101.netii.net/horizontal.html
Any help with this would be greatly appreciated, my next stage will be to nest this horizontal accordion inside my working vertical CSS only accordion, but I need to get it working independently first.