/*
-----------------------------------------------------
Layout CSS file for [sitename.tld]
Media: screen, projection

Notes: Basic layout structures go here (columns etc)

Author: Author Name [ email at domain dot tld ]
For: Client [ client.tld ]
-----------------------------------------------------
*/

/* Hide contents off-left */
.accessibility {
	height:1px; 
	left:0px; 
	overflow:hidden;
	position:absolute; 
	top:-500px;
	width:1px; 
}

/* Reset body margin from basic.css */
body { margin:0; }

input.text,
textarea.text {
	color:#666;
}

div#article-white div#article-white-text ul{
/* 	margin-bottom:20px; */
	margin: 20px 0 20px 0;
}

div#article-white div#article-white-text ul li{
	margin-bottom:10px;
}

/* Side panels
-----------------------------------------------------*/

div#sidebar-claim{
	width:258px;
	height:355px;
	position:relative;
	margin-bottom:30px;
}
div#sidebar-claim p{
	position:absolute;
	top:245px;
	left:20px;
	width:220px;
}
div#sidebar-claim div.buttonwrapper{
	position:absolute;
	top:280px;
	left:10px;
}

div#sidebar-fear{
	width:249px;
	height:257px;
	position:relative;
	margin-bottom:30px;
}
div#sidebar-fear p{
	position:absolute;
	top:168px;
	left:20px;
	width:220px;
}
div#sidebar-fear div.buttonwrapper{
	position:absolute;
	top:200px;
	left:18px;
}

div#sidebar-play{
	width:250px;
	height:255px;
	position:relative;
	margin-bottom:30px;
}

div#sidebar-play p{
	position:absolute;
	top:172px;
	left:20px;
	width:220px;
}

div#sidebar-play div.buttonwrapper{
	position:absolute;
	top:200px;
	left:17px;
}

div#sidebar-create a {
	background: url(/_format/images/side-create-storybook.png) no-repeat;
	width:251px;
	height:363px;
/* 	position:relative; */
	display: block;
	margin-bottom:30px;
	text-decoration: none;
}


div#sidebar-create a p {
	color: #fff;
	position: relative;
	top: 280px;
	left: 2px;
	font-family: Verdana;
	font-size: 12px;
	padding: 0 10px 10px 10px
}

/* Button styles
-----------------------------------------------------*/
button{
	margin:0;
	padding:0;
	border:0;
	background:none;
	border:none;
	color:white;
	font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
	text-decoration:none;
	font-weight:normal;
	cursor:pointer;
}

a.button {
    display : block;
    text-indent : -9999px;
}

.registration{
	height:36px;
	width:85px;
	background:url('../images/page-content/register-button.gif') no-repeat 0 2px;
}

.registration-go{
	height:36px;
	width:108px;
	background:url('../images/page-content/register-button-go.png') no-repeat 0 2px;
}

.registration-submit{
	height:36px;
	width:105px;
	background:url('../images/page-content/register-button-submit.png') no-repeat 0 2px;
}

input.next {
	background:url('../images/btn-submit.png') no-repeat top left;
	padding: 2px 40px 5px 35px;
	border: none;
	color: #fff;
	font-size: 12px;
	cursor: pointer;
	margin: 10px 0 0 10px;
}

button.login{
	height:28px;
	width:90px;
	background:url('../images/page-content/login-button.gif') no-repeat 0 0;
	margin-top:15px;
	margin-bottom:15px;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
	overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
	width: 100%;
}

/* Button - green glow on green */
/* Occurs in "Claim" sidebar    */
a.claim-button{
	background: transparent url('../../_format/images/common/button-claim-left.jpg') no-repeat top left;
	display: block;
	float: left;
	font-size:12px;
	line-height: 32px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
	height: 40px; /* Height of button background height */
	padding-left: 20px; /* Width of left menu image */
	text-decoration: none;
}

a:link.claim-button, a:visited.claim-button, a:active.claim-button{
	color: white;
}

a.claim-button span{
	background: transparent url('../../_format/images/common/button-claim-right.jpg') no-repeat top right;
	display: block;
	padding: 3px 30px 5px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.claim-button:hover{ /* Hover state CSS */
	background-position: bottom left;
	text-decoration:none;
}

a.claim-button:hover span{ /* Hover state CSS */
	background-position: bottom right;
}

/* Button - green on blue/grey */
/* Occurs on "Fear" sidebar    */
a.fear-button{
	background: transparent url('../../_format/images/common/button-fear-left.gif') no-repeat top left;
	display: block;
	float: left;
	font-size:12px;
	line-height: 32px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
	height: 40px; /* Height of button background height */
	padding-left: 11px; /* Width of left menu image */
	text-decoration: none;
}

a:link.fear-button, a:visited.fear-button, a:active.fear-button{
	color: white;
}

a.fear-button span{
	background: transparent url('../../_format/images/common/button-fear-right.gif') no-repeat top right;
	display: block;
	padding: 3px 30px 5px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.fear-button:hover{ /* Hover state CSS */
	background-position: bottom left;
	text-decoration:none;
}

a.fear-button:hover span{ /* Hover state CSS */
	background-position: bottom right;
}

/* Button - green on blue   */
/* Occurs on "Play" sidebar */
a.play-button{
	background: transparent url('../../_format/images/common/button-play-left.gif') no-repeat top left;
	display: block;
	float: left;
	font-size:12px;
	line-height: 32px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
	height: 40px; /* Height of button background height */
	padding-left: 11px; /* Width of left menu image */
	text-decoration: none;
}

a:link.play-button, a:visited.play-button, a:active.play-button{
	color: white;
}

a.play-button span{
	background: transparent url('../../_format/images/common/button-play-right.gif') no-repeat top right;
	display: block;
	padding: 3px 30px 5px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.play-button:hover{ /* Hover state CSS */
	background-position: bottom left;
	text-decoration:none;
}

a.play-button:hover span{ /* Hover state CSS */
	background-position: bottom right;
}


/* Button - green on white */
/* Occurs on article text  */
a.article-button{
	background: transparent url('../../_format/images/common/button-article-left.gif') no-repeat top left;
	display: block;
	float: left;
	font-size:12px;
	line-height: 18px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
	height: 26px; /* Height of button background height */
	padding-left: 11px; /* Width of left menu image */
	text-decoration: none;
}

a:link.article-button, a:visited.article-button, a:active.article-button{
	color: white;
}

a.article-button span{
	background: transparent url('../../_format/images/common/button-article-right.gif') no-repeat top right;
	display: block;
	padding: 3px 20px 5px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.article-button:hover{ /* Hover state CSS */
	background-position: bottom left;
	text-decoration:none;
}

a.article-button:hover span{ /* Hover state CSS */
	background-position: bottom right;
}


/* White About-style layout
-----------------------------------------------------*/
div#article-white{
	background-color:white;
	position:relative;
	margin-top:55px;
	margin-bottom:20px;
	color:#333333;
	padding:45px 0 30px 0;
}

div#article-white-text{
	margin:0 20px;
	position:relative;
}

div#article-white img#divtop{
	position:absolute;
	top:-44px;
}

div#article-white img#divbottom{
	position:absolute;
	bottom:-10px;
}

div#article-white-text h1.restricted-width,
div#article-white-text h2.restricted-width,
div#article-white-text p.restricted-width{
	width:285px;
}

/* News-style layout & What other parents say
-----------------------------------------------------*/
div#read-newsarticle,
div#what-other-parents-say{
        background-color:#e8e7b4;
        position:relative;
        margin-top:55px;
        margin-bottom:20px;
        color:#333333;
        padding:45px 0 30px 0;
}
div#what-other-parents-say {
    padding-top:15px;
}

div#read-newsarticle-text{
        margin:0 20px;
}

div#read-newsarticle img#divtop,
div#what-other-parents-say img#divtop{
        position:absolute;
        top:-10px;
}

div#read-newsarticle img#news-envelope{
        position:absolute;
        right:10px;
        top:-40px;
}

div#read-newsarticle img#divbottom,
div#what-other-parents-say img#divbottom{
        position:absolute;
        bottom:-10px;
}

div.story{
        margin-bottom:10px;
        background-color:white;
        padding:5px 0;
}

div.story div.story-content{
        margin:5px 10px;
}

/* About
-----------------------------------------------------*/

div#article-white img#article-white-monsters{
	position:absolute;
	left:333px;
	top:-37px;
}

/* Online Resources
-----------------------------------------------------*/

div#article-white img#online-monsters{
	position:absolute;
	left:308px;
	top:-45px;
}

/* learndirect courses
-----------------------------------------------------*/

div#article-white p.courses{
	margin-top:40px;
}

div#article-white img#courses-monsters{
	position:absolute;
	left:308px;
	top:-41px;
}

/* Login
-----------------------------------------------------*/

div#article-white img#login-monsters{
	position:absolute;
	left:318px;
	top:-32px;
}

fieldset#login{
	background-color:#50731b;
	padding:20px 10px 10px 10px;
	margin-bottom:15px;
}

fieldset#login p{
	color:white;
	width:60%;
}

fieldset#login input.text{
	width:200px;
	margin-bottom:5px;
}

fieldset#login label{
	display:none;
}


/* Find a centre
-----------------------------------------------------*/

div#article-white img#find-monsters{
	position:absolute;
	left:308px;
	top:-41px;
}

fieldset#find-centre{
	background-color:#50731b;
	padding:10px;
}

fieldset#find-centre p{
	margin-top:10px;
	color:white;
	width:66%;
}

fieldset#find-centre input.text{
	width:200px;
	margin-bottom:5px;
}

fieldset#find-centre select{
	margin-bottom:5px;
}

fieldset#find-centre label{
	display:none;
}

h3#find-sub{
	width:165px;
	position:relative;
	top:-10px;
}

div#search-result{
	margin:10px 0;
}

/* Recommend to a friend
-----------------------------------------------------*/

div#article-white img#recommend-monsters{
	position:absolute;
	left:308px;
	top:-41px;
}

fieldset#recommend{
	background-color:#50731b;
	padding:10px;
}

fieldset#recommend input.text,
fieldset#recommend textarea.text{
	width:200px;
	margin-bottom:5px;
}

fieldset#recommend label{
	display:none;
}

fieldset#recommend p{
	color:white;
}

/* 10 reasons
-----------------------------------------------------*/
div#article-white-text ol.reason-list{
		list-style-type:none;
        list-style-position:outside;
        margin:10px 0 2px 0;
}

div#article-white-text h2.subtitle{
	position:relative;
	top:-18px;
}

div#article-white-text ol.reason-list{
	position:relative;
	top:-8px;
}

div#article-white-text ol.reason-list li{
        margin:0 0 0.8em 0;
        overflow:hidden;
        list-style-position:outside;
        background-color:#50731b;
}
div#article-white-text ol.reason-list li span{
        display:block;
        margin:5px;
        padding:5px;
        color:white;
}
div#article-white-text ol.reason-list li span p{
        padding:0;
        margin:0 0 0 30px;
}
div#article-white img#reasons-monsters {
		position:absolute;
		left:333px;
		top:-57px;
}
div#primary div#article-white div#article-white-text ol.reason-list li#no1 span{
        background:url('../images/page-content/reasons-01.gif') no-repeat 8px 8px;
}
div#primary div#article-white div#article-white-text ol.reason-list li#no2 span{
        background:url('../images/page-content/reasons-02.gif') no-repeat 8px 8px;
}
div#primary div#article-white div#article-white-text ol.reason-list li#no3 span{
        background:url('../images/page-content/reasons-03.gif') no-repeat 8px 8px;
}
div#primary div#article-white div#article-white-text ol.reason-list li#no4 span{
        background:url('../images/page-content/reasons-04.gif') no-repeat 8px 8px;
}
div#primary div#article-white div#article-white-text ol.reason-list li#no5 span{
        background:url('../images/page-content/reasons-05.gif') no-repeat 8px 8px;
}
div#primary div#article-white div#article-white-text ol.reason-list li#no6 span{
        background:url('../images/page-content/reasons-06.gif') no-repeat 8px 8px;
}
div#primary div#article-white div#article-white-text ol.reason-list li#no7 span{
        background:url('../images/page-content/reasons-07.gif') no-repeat 8px 8px;
}
div#primary div#article-white div#article-white-text ol.reason-list li#no8 span{
        background:url('../images/page-content/reasons-08.gif') no-repeat 8px 8px;
}
div#primary div#article-white div#article-white-text ol.reason-list li#no9 span{
        background:url('../images/page-content/reasons-09.gif') no-repeat 8px 8px;
}
div#primary div#article-white div#article-white-text ol.reason-list li#no10 span{
        background:url('../images/page-content/reasons-10.gif') no-repeat 8px 8px;
}

/* Claim your book article
-----------------------------------------------------*/
div#claim-article{
        background-color:#50731B;
        position:relative;
        margin-top:230px;
        margin-bottom:20px;
        color:white;
        padding:0 0 30px 0;
        height:300px;
}

div#claim-article img#divtop{
        position:absolute;
        top:-225px;
}

div#claim-article img#divbottom{
        position:absolute;
        bottom:-9px;
}

div#claim-article-text h1.restricted-width,
div#claim-article-text p.restricted-width{
        width:310px;
}

div#claim-article div#column-1{
        position:absolute;
        width:230px;
        left:30px;
		top:15px;
}

div#claim-article div#column-2{
        position:absolute;
        width:230px;
        right:30px;
		top:15px;
}

/* Fear of words article
-----------------------------------------------------*/
div#fear-words-article{
        background-color:#62737A;
        position:relative;
        margin-top:230px;
        margin-bottom:20px;
        color:white;
        padding:0 0 30px 0;
        height:350px;
}

div#fear-words-article img#divtop{
        position:absolute;
        top:-225px;
}

div#fear-words-article img#divbottom{
        position:absolute;
        bottom:-9px;
}

div#fear-words-article p{
        margin-bottom:5px;
        clear:both;
}

div#fear-words-article div#intro{
	position:absolute;
	top:30px;
	left:30px;
	width:475px;
}

div#fear-words-article div#column-1{
        position:absolute;
        width:200px;
        left:30px;
		top:150px;
}

div#fear-words-article div#column-2{
        position:absolute;
        width:230px;
        right:30px;
		top:150px;
}

div#fear-words-article div.buttonwrapper {
/* 	margin-bottom:15px; */
}

/* register pages
-----------------------------------------------------*/
div.register {
        background-color:#799723;
        position:relative;
        margin-top:55px;
        margin-bottom:20px;
        color:white;
        padding:25px 0 30px 0;
}

div#register-article-text{
        margin:0 20px;
}

div#register-article-text p.intro-copy{
	margin-bottom:25px;
}

div#register-article-text a{
	color:white;
}

div#register-article-text p{
        margin-bottom:5px;
}

div.register img#divtop{
        position:absolute;
        top:-10px;
}

div.register img#divbottom{
        position:absolute;
        bottom:-10px;
}

div.register div.label-align,
div.register select{
        margin-left:10px;
        margin-bottom:5px;
}

div#primary div.register div#register-article-text form#userCapture label.alignForm{
	float:left;
	width:100px;
}

div.register div.last {
	margin-bottom:25px;
}

div.register div.label-align label{
        display:none;
}

div.register div.label-align input.text{
        width:250px;
}
div.register div.label-align textarea.text{
        width:250px;
        padding:1px;
        border:2px inset threedface;
}

    /* register - stage 1 */
        div#register-stage1 img#register-monsters{
                position:absolute;
                right:0;
                bottom:0px; /* T */
        }
        
        div#register-stage1 form {
            background : #bccb91;
            padding : 15px 5px;
            margin-bottom : 160px;
        }
        
        div#register-stage1 form button {
            margin-left : 10px;
        }

    /* register */
        div#register img#register-monsters{
                position:absolute;
                right:0;
                bottom:0; /* T */
        }
        
        div#register .option {
            padding : 10px 15px;
            background : #bccb91;
            margin-bottom : 20px;
            color : #333;
        }
        
        div#register form {
            background : #bccb91;
            padding : 10px 15px;
            margin-bottom : 30px;
        }
        
        div#register form .label-align {
            margin-left : 0;
        }
        
        div#register form p {
            color : #333;
            width : 260px;
        }
        
    
    /* register - stage 2 */
        div#register-stage2 img#register-monsters{
            position:absolute;
            right:5px;
            top:324px;
        }
        
        /* overwrite default text width for better alignment */
        div#register-stage2 div.label-align input.text {
            width:246px;
        }
        
        div#register-stage2 div.label-align textarea {
            width:244px; /* T */
        }
        
        
        div#register-stage2 form p { /* T */
            margin-bottom : 10px;
            overflow : hidden;
        }
        
        div#register-stage2 form p input {
            float : left;
            margin-right : 10px;
        }
        
        div#register-stage2 form p label {
            float : left;
            width : 420px;
        }
        
        /* date of birth fields */
            div#register-stage2 div#date-of-birth label#dobDay {
                display : block;
                float : left;
                margin-right : 10px;
            }
            
            div#register-stage2 div#date-of-birth select {
                margin-left : 0;
            }
        
        

/* Voucher
-----------------------------------------------------*/

h1#voucher{
	margin-top:20px;
}

p.voucher-intro{
	color:black;
}

p.voucher-intro a{
	color:black;
}

div#the-voucher{
	position:relative;
	margin-bottom:20px;
}

div.vouchertext{
	color:black;
	position:absolute;
	width:384px;
	top:250px;
	left:300px;
}

/* Storybook - landing page
-----------------------------------------------------*/

div#storybook-landing {
        background-color:#799723;
        position:relative;
        margin-top:55px;
        margin-bottom:20px;
        color:white;
        padding:10px 10px 30px 10px;
}

div#storybook-landing img#divtop {
        position:absolute;
        top:-10px;
        left:-10px; /* T */
}

div#storybook-landing img#divbottom {
        position:absolute;
        bottom:-9px;
        left : -10px;
}


div#storybook-landing img {
    margin : 0 0 0 10px;
    position : relative;
    z-index : 2;
}


div#storybook-landing h1.restricted-width,
div#storybook-landing p.restricted-width{
        width:310px;
}

div#storybook-landing .block {
    color : #000;
    margin:10px;
    background-color:#fff;
    padding:10px 15px;
}

div#storybook-landing .block img {
    float : right;
    z-index : 1;
}

div#storybook-landing #journey .block img {
    margin : -50px -33px -40px 0;
}

div#storybook-landing #scary img {
    margin-bottom : -25px;
}

div#storybook-landing #scary .block img {
    margin : 0 0 -70px 5px;
}