/*
 screen.css:
 ------------
 Job: Play Area Bark
 Template Version: 1.0
 Site Version: 2.0
 Produced by: Rodney Riley
 Start date: 13th February 2013
 
 Table of contents
 
 1. general styles
	 body styles
	 reset
	 links
	 headings
	 other elements,tags
 
 2. helper styles
	 notifications and errors
	 consistant items with normally just one class
 
 3. page structure
	 skeleton including page furniture
 
 4. page components / modules
 	most of your styles will be in here
 	 
 5. css for JaveScript elements e.g. slideshow, lightboxes etc
 
 6. media queries for mobile reactive design
 
 7. overrides
 
 Notes: 
 
*/

/* =1. general styles */

	* { 
		margin: 0; 
		padding: 0; 
		text-decoration: none;  
        font-family: Verdana,Arial,Helvetica,sans-serif;
  	}
	body {
		background-color: #99be5c;
	}
    p {
        color: #6C8193;
        font-size: 80%;
        margin-bottom: 10px;
    }
    ol {
        color: #6C8193;
        font-size: 0.9em;	
        list-style: lower-alpha;
        margin-left: 35px;
        margin-right: 15px;
    }
    h1 {
        color: #6BA9C9;
        font-family: Comic Sans MS, ChalkboardSE-Bold;
        font-size: 125%;
        margin-bottom: 10px;
        text-align: center;
    }
    .strong {
        font-weight: bold;
    }
    .red {
        color: red;
    }

/* =2. helper styles */
/* =3. page structure */
    #page-content-outer {
        background-image: url(../images/main-body-background.png);
        background-repeat: repeat-x;
        background-color: #d5f1ef;
        width: 100%;
    }
    #page-content-inner {
        margin: auto;
        width: 973px;
        min-height: 476px;
        height: auto;
    }

    #header {
        width: 100%;
        height: 197px;
        background-image: url(../images/header-cloud-layer.png);     
    }
    #logo {
        float: left;
        position:relative;
        border: 0px;
        margin: 25px 0 0 24px;
        width: 287px;
        height: 150px;
        z-index: 2;
    }



	div.nav {
        float: left;
        margin: 115px 0 0 -142px;
        width: 765px;
        height: 58px;
        background-image: url(../images/nav-background.png);
        -moz-border-radius: 3px;
		border-radius: 8px;	
        -moz-box-shadow: 2px 2px 2px #888;
		-webkit-box-shadow: 2px 2px 2px #888;
		box-shadow: 2px 2px 2px #888;
	}	
	div.nav ul {
		list-style: none;
		margin-top: 7px;
	}

	div.nav li {
		width: auto;
        height: 37px;
		float: left;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 8px;
        border-left: 2px solid #c3996b;
		text-align: center;
	}
	div.nav li.first {
        margin-left: 131px;
        border-left: none;
    }
	div.nav a {
		font-size: 18pt;
		font-family: Georgia, Arial;
		color: #c1b49a;
	}
	div.nav a:hover {
		color: #ffffff;
    }
    div.home-buy-area-outer {
        float:left;
        margin-top: -8px;
        margin-bottom: 28px;
        width: 345px;
        height: 147px;
        background-image: url(../images/chain-buyarea-homepage.png);
        background-repeat: no-repeat;
    }
    div.first {
        margin-right: 74px;
        margin-left: 97px;
    }
    div.home-buy-area-inner {
        margin-top: 28px;
        width: 343px;
        height: 117px;
        -moz-box-shadow: 2px 2px 2px #888;
		-webkit-box-shadow: 2px 2px 2px #888;
		box-shadow: 2px 2px 2px #888;    
        background-image: url(../images/home-buy-background.jpg);
        background-repeat: no-repeat;
    }
    div.home-buy-area-inner img {
        float: left;
        border: 5px solid white;
        margin: 9px 0 0 8px;
        -moz-box-shadow: 2px 2px 2px #888;
		-webkit-box-shadow: 2px 2px 2px #888;
		box-shadow: 2px 2px 2px #888;  
    }
    div.home-buy-area-inner h2 {
        padding-top: 7px;
        font-family: Comic Sans MS, ChalkboardSE-Bold;
        color: white;
        font-weight: bold;
        line-height: 1em;
        font-size: 1.9em;
        text-align: center;
        text-shadow: 2px 2px #000000;
    }
    	
    div.buy-text {
        float: left;
        margin-left: 20px;
        margin-top: 4px;
        width: 151px;
        height: 45px;
        background-image: url(../images/buy-arrow-homepage-off.png);
        background-repeat: no-repeat;
        font-family: Comic Sans MS, ChalkboardSE-Bold;
        color: #aedee4;
        font-size: 1.5em;
        font-weight: bold;
        padding: 4px 0 0 18px;
    }
    
    div.home-buy-area-inner:hover div.buy-text {
        background-image: url(../images/buy-arrow-homepage-on.png);
        color: #4299bc;
    }
    #homepage-main-content {
        clear: both;
        margin-top: 146px;
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    #homepage-main-content-left {
        margin-left: 24px;
        margin-bottom: 10px;
        padding: 10px;
        width: 889px;
        min-height: 300px;
        height: auto;
        overflow: visible;
        background-color: white;
        border-radius: 8px;
        -moz-box-shadow: 2px 2px 2px #888;
		-webkit-box-shadow: 2px 2px 2px #888;
		box-shadow: 2px 2px 2px #888;      
    }
    #homepage-main-content-left h2 {
        text-align:center;
        margin-left: auto;
        margin-right: auto;
        font-size: 120%;
        width: 200px;
        height: 49px;
        padding-right: 50px;
        background-position: right;
        background-repeat:no-repeat;
        background-image: url(../images/offer-stars.png);
    }
    #homepage-main-content-left h2 a {
        color: #faaf40;
        font-family: Comic Sans MS, ChalkboardSE-Bold;
    }
    #homepage-main-content-left h2 a:hover {
        color: #6ba9c9;
        font-family: Comic Sans MS, ChalkboardSE-Bold;
    }
  
    /* css relating to homepage quick enquiry form

    div.homepage-main-content-right {
        float: left;
        color: #6C8193;
        width: 224px;
        margin-left: 2px;
        padding: 8px;
        min-height: 200px;
        height: auto;
        background-color: #edf5c7;
        -moz-box-shadow: 2px 2px 2px #888;
		-webkit-box-shadow: 2px 2px 2px #888;
		box-shadow: 2px 2px 2px #888;   
    }
    div.homepage-main-content-right p {
        font-size: 0.9em;
        margin-bottom: 0.5em;
        text-align: justify; 
    }
    div.homepage-main-content-right input {
        float: right;
        width: 140px;
    }    
    div.homepage-main-content-right textarea {
        width: 142px;
        float: right;
    }
    div.homepage-main-content-right h3 {
        color: #6ba9c9 !important;
        text-align:center;
        margin-bottom: 5px;
        font-family: Comic Sans MS, ChalkboardSE-Bold;
        font-size: 95%;
        font-weight: bold;
    }

    css relating to homepage quick enquiry form ends */





    #content-page-left {
        float: left;
        background-repeat:no-repeat;
        background-image: url(../images/chain-content-top-left.png);
        background-position: top;
        margin: -55px 25px 35px 24px;
        width: 182px;
        min-height: 500px; 
        height: auto;
        overflow: visible;

    }



    div.left-nav {
        background-repeat:no-repeat;
        background-image: url(../images/content-page-menu-background.png);
        background-position: top;    
        margin-top: 55px;
        width: 172px;
        padding: 4px;
        min-height: 100px;
        height: auto;
        overflow:visible;
        box-shadow: 2px 2px 2px #888888;
        background-color: #aedee4;
    }
    div.left-nav h2 {
        font-family: Comic Sans MS, ChalkboardSE-Bold;
        color: white;
        font-weight: bold;
        text-shadow: 2px 2px #000000;
    }
	.left-nav ul {
		list-style: none;
	}
	.left-nav li {
		border-bottom: 1px dashed #888888;
        text-shadow: 1px 1px 2px #000000;
		padding: 5px 0 5px 0px;
		width: 170px;
	}
	.left-nav li.selected a {
		color: #4299bc;
		padding-left: 20px;
		background: url(../images/nav-arrow.png) no-repeat 7px center;
	}
	.left-nav li:last-child {
		border-bottom: 0;
	}

	.left-nav a {
		color: #ffffff;
        font-family: Verdana,Arial,Helvetica,sans-serif;
        font-size: 98%;
	}
	.left-nav a:hover {
		color: #4299bc;
	}	






    div.content-buy-area-outer-1 {
        float:left;
        width: 182px;
        height: 276px;
        background-image: url(../images/chain-content-buy.png);
        background-repeat: repeat-y;
    }
    div.content-buy-area-outer-2 {
        float:left;
        margin-top: -28px;
        width: 182px;
        height: 220px;
    }
    div.content-buy-area-inner {
        margin-top: 28px;
        width: 180px;
        height: 200px;
        -moz-box-shadow: 2px 2px 2px #888;
		-webkit-box-shadow: 2px 2px 2px #888;
		box-shadow: 2px 2px 2px #888;    
        background-image: url(../images/content-page-menu-background.png);
        background-repeat: no-repeat;
        background-color: #aedee4;    
    }
    div.content-buy-area-inner img {
        float: left;
        border: 5px solid white;
        margin: 9px 0 5px 17px;
        -moz-box-shadow: 2px 2px 2px #888;
		-webkit-box-shadow: 2px 2px 2px #888;
		box-shadow: 2px 2px 2px #888;  
    }
    div.content-buy-area-inner h2 {
        font-family: Comic Sans MS, ChalkboardSE-Bold;
        color: white;
        font-weight: bold;
        line-height: 1em;
        font-size: 1.9em;
        text-align: center;
        text-shadow: 2px 2px #000000;
    }
    	
    div.content-buy-text {
        z-index: 10;
        float: left;
        margin-left: 20px;
        margin-top: 5px;
        width: 151px;
        height: 45px;
        background-image: url(../images/buy-arrow-homepage-off.png);
        background-repeat: no-repeat;
        font-family: Comic Sans MS, ChalkboardSE-Bold;
        color: #aedee4;
        font-size: 1.5em;
        font-weight: bold;
        padding: 4px 0 0 18px;
    }
    
    div.content-buy-area-inner:hover div.content-buy-text {
        background-image: url(../images/buy-arrow-homepage-on.png);
        color: #4299bc;
    }

    #content-page-right {
        border-radius: 8px;
        box-shadow: 2px 2px 2px #888888;
        background-repeat:no-repeat;
        background-image: url(../images/content-page-background.jpg);
        background-position: top;
        background-color: white;
        display: inline-block;
        width: 683px;
        padding: 10px;
        height: auto;
        overflow: visible;
    }
    #content-page-right img {
        box-shadow: 2px 2px 2px #888888;
        margin-bottom: 7px;
    }

    #content-page-right h1 {
        text-align:right;
        font-size: 170%;
        margin: 5px 0px 48px 150px;
    }
	#content-page-right ul {
		list-style-type: none;
		padding: 0px;
		margin: 0px;
	}
	#content-page-right ul li
	{
        color: #6C8193;
        font-size: 0.9em;
		background-image: url(../images/bullet-point.png);
		background-repeat: no-repeat;
		background-position: 0px 5px; 
		padding-left: 14px; 
		padding-bottom: 1em;
	}
	#footer-outer {
        clear:both;
        width: 100%;
		height: 153px;
        background-image: url(../images/footer-outer-background.png);
        background-repeat: repeat-x;    
        background-color: #99bf5c;
    }
	#footer-inner {
        margin: auto;
        width: 973px;
        height: 153px;
        background-image: url(../images/footer-inner-background.png);
        background-repeat: repeat-x;    
    }
    #footer-inner p {
        padding-top: 147px;
        font-size: 72%;
        color: #6C8193;
        text-align: center;
    }
    #footer-inner a {
		color: #6C8193;
    }
    #footer-inner a:hover {
		color: #ffffff;
    }

    div.shopping-bag {
        margin-left: 7px; 
        margin-top: 9px;
    }


/* =4. page components / modules */



/* =5. css for JaveScript elements e.g. slideshow, lightboxes, calculators etc */


    .calc-form {
	padding-top: 15px;
	padding-left: 6px;
	font-size: 105%;
	font-weight: bold;
	font-family: comic sans ms;
	color: #6BA9C9;
}
    .calc-form label {
    display: inline-block;
    font-size: 105%;
	font-weight: bold;
	font-family: comic sans ms;
	color: #6BA9C9;
    width: 100px;
    height: 40px;
    }
.calc-form input {
    margin-top: 5px;
    margin-bottom: 5px;
	border: 2px solid #aedee4;
    width: 100px;
    height: 40px;
    font-size: 120%;
    background-color: #def5f2;
}
.calc-form select {
	border: 1px solid black;
}

.calc-image {
	float: right;
	margin-left: 25px;
	margin-right: 30px;
	display: block;
    box-shadow: none!important;
}
input.calc-submit {
	float: right;
    width: auto;
    height: auto;
	margin-top: -20px;
	margin-right: 200px;
	border: 0px !important;
    background-color: #ffffff;
}


input.calc-submit-sand {
	float: right;
    width: auto;
    height: auto;
	margin-top: -70px;
	margin-right: 200px;
	border: 0px !important;
    background-color: #ffffff;
}


/* the following block is for the comments system */

#form1_comment  {
    border: 1px solid #E2E2E2;
    margin: 2em 0;
    padding: 1em;
}

#form1_comment fieldset {
    border: 1px solid #E2E2E2;
    margin: 2em 0;
    padding: 1em;
}


#form1_comment label {
    display: block;
    margin-bottom: 0.5em;
}
#form1_comment input[type="text"], #form1_comment input[type="email"], #form1_comment input[type="password"], #form1_comment input[type="search"], #form1_comment input[type="url"], #form1_comment textarea {
    background: -moz-linear-gradient(center top , #F1F1F1 1%, #FFFFFF 25%, #FFFFFF 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #DEE0E0;
    color: #000000;
    line-height: 1.5;
    margin-bottom: 2em;
    padding: 0.5em;
    width: 95%;
}

#form1_comment textarea {
    background: -moz-linear-gradient(center top , #F1F1F1 1%, #FFFFFF 5%, #FFFFFF 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

#form1_comment input[type="submit"], #form1_comment input[type="button"], #form1_comment button {
    background: none repeat scroll 0 0 #4299bc;
    border: 1px solid #4299bc;
    border-radius: 10px;
        font-family: Comic Sans MS, ChalkboardSE-Bold;
        color: #aedee4;
        font-size: 1.5em;
        font-weight: bold;
    line-height: 1.5;
    margin-bottom: 2.5em;
    padding: 0.25em 0.5em;
}
#form1_comment input[type="submit"], button {
    cursor: pointer;
}	







/* CSS for slideshow, note the element needs to be positioned relative and floated for z index to function allowing an overlay */
	#navigation-slideshow {
		margin-left: 24px;
        margin-bottom: 10px;
		width: 908px;
		height: 312px;
		float: left;
		position:relative;	
        border-radius: 5px;
		-moz-box-shadow: 3px 3px 3px #888;
		-webkit-box-shadow: 3px 3px 3px #888;
		box-shadow: 3px 3px 3px #888;
	}
	/* the shadow has been applied to the container rather than the slides to avoid issues with the shadow being faded by the slide script */
	#navigation-slideshow div {
		position: absolute;
		left:0;
		right:0;
	}
	.slideme {
        border-radius: 5px;    
		width: 908px;
		height: 312px;
		text-align: center;

	}

    
	div.slide-inner {
		margin-left: auto;
		margin-right: auto;
		margin-top: 69px;
		width: 800px;
		height: 155px;
	}

    /* all the important attributes are below because the slide is a class and the h2 applied to the left content area is targeting an id so it is necessary for overiding the id. I'll rewrite this when I've chance to improve the code's quality */
	.slide-inner h2 {
		display: inline-block;
        background-color: #b0dee4;
        padding: 7px;
        font-family: Comic Sans MS, ChalkboardSE-Bold;
        color: white;
        font-weight: bold;
        font-size: 1.9em;
        text-align: center;
        text-shadow: 2px 2px #000000;
    		margin-bottom: 10px;

	}
	.slide-inner p {
		display: inline-block;
        font-size: 15px;
        font-family: Comic Sans MS, ChalkboardSE-Bold; 
        background-color: #473017;
        color: #c1b49b;
		margin-bottom: 10px;
	}
    div.buy-text-slides {
        margin: auto;
        width: 151px;
        height: 40px;
		background-color: #aedde3;
        background-image: url(../images/buy-arrow-homepage-off.png);
        background-position: 5px 2px;
        background-repeat: no-repeat;
        font-family: Comic Sans MS, ChalkboardSE-Bold;
        color: #aedee4;
        font-size: 1.5em;
        font-weight: bold;
        padding: 5px;
    }
    
    div.buy-text-slides:hover {
        background-image: url(../images/buy-arrow-homepage-on.png);
        color: #4299bc;
    }
	#nav-slideshow-container {
		clear: both;
		height: 30px;
		width: 634px;
		z-index: 10;
	}
	#nav-slideshow {
		float: right;
		width: auto;
		height: 27px;
	}
	#nav-slideshow ul {
		list-style: none;
		z-index:2;
	}
	#nav-slideshow li {
		margin-top: 4px;
		width: 17px;
		height: 17px;
		float: left;
		display: inline-block;
		margin-left: 5px;
	}
	#nav-slideshow a {
		display:block;
		background: #ffffff;
		width: 16px;
    	height: 16px;
   	 	border-radius: 50%;
		border:solid #999999 1px;  	 		
	}
	#nav-slideshow a:hover,
	#nav-slideshow a.current {
		width: 17px;
    	height: 17px;
		background: #999999;
	}

	/* end slideshow stuff */



/* =6. media queries for mobile reactive design */

@media only screen and (max-width: 460px) 	
{
    #page-content-outer {
        width:100%;
    }
    #page-content-inner {
        width:100%;
        min-height: 0;
        height: auto;
    }
    #content-page-right {
        width: 94%;
    }

    #homepage-main-content{
        margin-top: auto;
    }
    
    
    #content-page-right {
        border-radius: 8px;
        background-image: url(../images/content-page-background-mobile.jpg);
        width: 97%;
        padding: 5px;
    }

    /* the two below need work */
    
    .mobilefriendly {
        width: 99%!important;
        height: auto!important;
    }    
    #content-page-right h1 {
        text-align:left;
        font-size: 170%;
        margin: 5px 0px 40px 5px;
    }
    #header {
        height: auto;
    }
    
    
    
    div.nav {
        width: 98%;
        height: auto;
        margin: 0 auto 10px auto;
        display:none;
    }
    #content-page-left {
        display: none;
        background-image:none;
        margin: 5px 0 10px 0;
        width: 98%;
        min-height: 0; 

    }
    div.show {
        display:block!important;
        animation-name: nav;
		animation-duration: 0.2s;
    }
    @keyframes nav {
        0%   {opacity: 0;}
        25%  {opacity: 0.25;}
        50%  {opacity: 0.5;}
        75%  {opacity: 0.75;}
        100% {opacity: 1;}
    }

    div.left-nav {
        
        background-image: url(../images/content-menu-top-mobile.png);
        width: 98%;
        margin-top: 0px;
        margin-left: 2px;
        min-height: 100px;
        height: auto;
        overflow:visible;
    }

	.left-nav li {
		width: 100%;
	}
	.left-nav a {
        font-size: 110%;
	}
    div.nav li {
        border-top: 1px solid #c59c6c;
        border-left: none;
        width: 92%;
    }
    div.nav li.first {
        border-top: none;
        margin-left: 0;
    }
    #homepage-main-content-left {
        width: 95%;
        margin-left: 0;
        margin-top: 0;        
    }
    div.first {
        margin-left: auto;
        margin-right: auto;
        
    }
    div.hide {
        display: none;
    }
    .home-buy-area-outer{
        width: 98%;
    }
    
    
    
    
     div.home-buy-area-outer {
        display: block;
        margin-bottom: 10px;
        width: 100%;
        height: auto;
        background-image: none;
    }
    div.first {
        margin-right: 0;
        margin-left: 0;
    }
    div.home-buy-area-inner {
        margin-left: auto;
        margin-right: auto;
    }
  
    div.content-buy-area-outer-1 {
            display: none;
    }
    div.content-buy-area-outer-2 {
            display: none;
    }
    #footer-outer{
        width: 100%;
    }
    #footer-inner {
        width: 100%;

    }
    #navigation-slideshow {
        display: none;
    }
    #logo {
        float: none;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        padding-top: 10px;
    }
    
    div.nav {
    background-image: url(../images/nav-mobile.png);
    border: 2px solid #c59c6c;
    }
    
    
    .c-hamburger {
        position: absolute;
        top: 6px;
        right: 0px;
        overflow: hidden;
        margin: 0;
        padding: 0;
        width: 50px;
        height: 50px;
        font-size: 0;
        text-indent: -9999px;
        appearance: none;
        box-shadow: none;
        border-radius: none;
        border: none;
        cursor: pointer;
        transition: background 0.3s;
        text-align: center;
	}

	.c-hamburger:focus {
        outline: none;
	}
    
	.c-hamburger span {
        display: block;
        position: absolute;
        top:20px;
        height: 8px;
        background: #5f4018;
        width: 40px;
        height: 8px;
	}

	.c-hamburger span::before,
	.c-hamburger span::after {
        position: absolute;
        display: block;
        left: 0;
        width: 100%;
        height: 8px;
        background-color: #5f4018;
        content: "";
	}

	.c-hamburger span::before {
        top: -15px;
	}

	.c-hamburger span::after {
        bottom: -15px;
	}
	
/*	.c-hamburger--htx {
        background-color: #ff3264;
    }
*/

    .c-hamburger--htx span {
        transition: background 0s 0.3s;
    }

    .c-hamburger--htx span::before,
    .c-hamburger--htx span::after {
        transition-duration: 0.3s, 0.3s;
        transition-delay: 0.3s, 0s;
    }

    .c-hamburger--htx span::before {
        transition-property: top, transform;
    }

    .c-hamburger--htx span::after {
        transition-property: bottom, transform;
    }

/* active state, i.e. menu open */
/*    .c-hamburger--htx.is-active {
        background-color: #cb0032;
    }
*/
    .c-hamburger--htx.is-active span {
        background: none;
    }

    .c-hamburger--htx.is-active span::before {
        top: 0;
        transform: rotate(45deg);
    }

    .c-hamburger--htx.is-active span::after {
        bottom: 0;
        transform: rotate(-45deg);
    }

    .c-hamburger--htx.is-active span::before,
    .c-hamburger--htx.is-active span::after {
        transition-delay: 0s, 0.3s;
    }
 
    
}



/* =7. overrides */
    .enquiry-arrow {
        margin-top: 5px;
        clear: both;
        width: 69px!important;
    }
    .ecwid-SpacerImage {
        -moz-box-shadow: 0px 0px 0px #fff!important;
		-webkit-box-shadow: 0px 0px 0px #fff!important;
		box-shadow: 0px 0px 0px #fff!important;  
    }
    .ecwid-productBrowser-cart-paypalExpressCheckoutButton img {
        -moz-box-shadow: 0px 0px 0px #fff!important;
		-webkit-box-shadow: 0px 0px 0px #fff!important;
		box-shadow: 0px 0px 0px #fff!important; 
    }