html, body { height: 100%; }

body { 
	background-color: #26afb7; 
	margin: 0; 
	height: 100%; 
	font-family: 'Oswald', sans-serif;
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease; 
	-o-transition: all .5s ease; 
	-ms-transition: all .5s ease;
}
body.websitesBGcolour { background-color: #45e02d; }
body.graphicsBGcolour { background-color: #fa3241; }
body.contactBGcolour { background-color: #ff9133; }

.readButton { 
	background-image: url('imgs/buttonArrows.png');
	background-position: 363px 0;
    background-repeat: no-repeat;
	cursor: pointer;
	padding: 6px 0 6px 20px;
	margin-bottom: 12px;
	font-weight: bold;
	font-size: 21px;
	position: relative;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	transition: all .5s ease;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease; 
	-o-transition: all .2s ease; 
	-ms-transition: all .2s ease;
}
.readButton.close { background-color: #44868a; }

#buttonWebsites { 
	margin-top: 0px;
	background-color: #45e02d;
	color: #20920f;
	text-shadow: 1px 1px 1px #95ef86;
	-webkit-box-shadow: 0 4px 0 #20920F, 0 3px 8px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 4px 0 #20920F, 0 3px 8px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 0 #20920F, 0 3px 8px rgba(0, 0, 0, 0.5);
	}
#buttonGraphics { 
	background-color: #fa3241;
	color: #a3101b;
	text-shadow: 1px 1px 1px #fd8e96;
	-webkit-box-shadow: 0 4px 0 #a3101b, 0 3px 8px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 4px 0 #a3101b, 0 3px 8px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 0 #a3101b, 0 3px 8px rgba(0, 0, 0, 0.5);
}
#buttonContact { 
	background-color: #ff9133;
	color: #a65611;
	text-shadow: 1px 1px 1px #ffc38f;
	-webkit-box-shadow: 0 4px 0 #a65611, 0 3px 8px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 4px 0 #a65611, 0 3px 8px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 0 #a65611, 0 3px 8px rgba(0, 0, 0, 0.5);
}

#buttonWebsites:hover {
	top: 3px;
	background-position: 306px 0;
	-webkit-box-shadow: 0 1px 0 #20920F, 0 0 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 0 #20920F, 0 0 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 0 #20920F, 0 0 2px rgba(0, 0, 0, 0.3);
}
#buttonGraphics:hover {
	top: 3px;
	background-position: 306px 0;
	-webkit-box-shadow: 0 1px 0 #a3101b, 0 0 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 0 #a3101b, 0 0 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 0 #a3101b, 0 0 2px rgba(0, 0, 0, 0.3);
}
#buttonContact:hover {
	top: 3px;
	background-position: 306px 0;
	-webkit-box-shadow: 0 1px 0 #a65611, 0 0 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 0 #a65611, 0 0 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 0 #a65611, 0 0 2px rgba(0, 0, 0, 0.3);
}

#buttonWebsites.close {
	top: 3px;
	background-color: #74EF60;
	background-position: 306px -43px;
	-webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
#buttonGraphics.close {
	top: 3px;
	background-color: #fd6570;
	background-position: 306px -43px;
	-webkit-box-shadow: 0 1px 0 #a3101b, 0 0 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 0 #a3101b, 0 0 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 0 #a3101b, 0 0 2px rgba(0, 0, 0, 0.3);
}
#buttonContact.close {
	top: 3px;
	background-color: #ffad66;
	background-position: 306px -43px;
	-webkit-box-shadow: 0 1px 0 #a65611, 0 0 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 0 #a65611, 0 0 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 0 #a65611, 0 0 2px rgba(0, 0, 0, 0.3);
}

.backgroundGrad {
	height: 100%;
    overflow: auto;
    position: fixed;
    width: 100%;
	background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.3)));
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
	background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
	background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
	background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#4d000000',GradientType=1 );
}

.mainContainer { width: 400px; margin: 0 auto; }

h1 { font-weight: normal; font-size: 54px; text-align: center; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4); border-bottom: 1px dashed #FFFFFF; }
h1 span { font-weight: bold; }

.topImage { width: 160px; height: 240px; margin: 15px auto 0; }

.clearer { clear: both; }

/* ----- Slide from behind ----- */

.single {
    margin-left: -200px;
    width: 800px;
}

.display { width: 400px; margin: 0 auto 20px; height: 240px; background-color: #eee; overflow: hidden; position: relative;
-webkit-box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    1px 1px 2px rgba(50, 50, 50, 0.75);
box-shadow:         1px 1px 2px rgba(50, 50, 50, 0.75);
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease; 
-o-transition: all .5s ease; 
-ms-transition: all .5s ease;
}
.display:hover { width: 800px; }

.displaybox { height: 240px; position: relative; }
.left { width: 392px; height: 232px; position: absolute;  z-index: 10; top: 0; left: 0; border: 4px solid #FFFFFF; }

.single .left {
-webkit-box-shadow: 2px 0px 2px rgba(50, 50, 50, 0.3);
-moz-box-shadow:    2px 0px 2px rgba(50, 50, 50, 0.3);
box-shadow:         2px 0px 2px rgba(50, 50, 50, 0.3);
}

.gisburnskills .left { background: url('imgs/gisburn-skills.jpg') no-repeat scroll 0 0; }
.hike4hounds .left { background: url('imgs/hike4hounds.jpg') no-repeat scroll 0 0; }
.catsdog .left { background: url('imgs/catsdog.jpg') no-repeat scroll 0 0; }
.fordday .left { background: url('imgs/ford-day-blackpool.jpg') no-repeat scroll 0 0;  }

.right { width: 380px; height: 220px; float: right; padding: 10px; position: absolute; top: 0; right: 0; z-index: 5; top: 0; right: 0; }
.right h2 { margin-top: 6px; font-size: 22px; }
.right a { display: block; background-color: #ddd; color: #898989; padding: 5px 15px; text-decoration: none; border: 2px solid #898989; font-weight: bold; bottom: 10px; right: 10px; position: absolute;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease; 
-o-transition: all .5s ease; 
-ms-transition: all .5s ease;
}
.gisburnskills .right a:hover { background-color: #4d6077; color: #fff; border: 2px solid #2e3a48; }
.hike4hounds .right a:hover { background-color: #a1ca0c; color: #fff; border: 2px solid #7aa517; }
.catsdog .right a:hover { background-color: #fb4c83; color: #fff; border: 2px solid #ee1959; }
.fordday .right a:hover { background-color: #035295; color: #fff; border: 2px solid #013066; }


/* ----- End of Slide from behind ----- */




/* ----- Next and Previous Buttons ----- */

.myWebBtnsCont { position: relative; }
.myWebBtnsCont #buttonWebsites { position: relative; z-index: 20; }

#webPrev, #webNext {
position: absolute; background-color: #fff; height: 27px; width: 43px; top: 8px; z-index: 10; line-height: 27px; 
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease; 
-o-transition: all .5s ease; 
-ms-transition: all .5s ease;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#webPrev { left: 5px; 
-webkit-box-shadow: -4px 0px 0px #AEAEAE, -3px 0 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow:    -4px 0px 0px #AEAEAE, -3px 0 3px rgba(0, 0, 0, 0.5);
box-shadow:         -4px 0px 0px #AEAEAE, -3px 0 3px rgba(0, 0, 0, 0.5);
}
#webNext { right: 5px; 
-webkit-box-shadow: 4px 0px 0px #AEAEAE, 3px 0 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow:    4px 0px 0px #AEAEAE, 3px 0 3px rgba(0, 0, 0, 0.5);
box-shadow:         4px 0px 0px #AEAEAE, 3px 0 3px rgba(0, 0, 0, 0.5);
}

#webPrev.webPrevShown { left: -53px; height: 43px; top: 3px; line-height: 43px; }
#webNext.webNextShown { right: -53px; height: 43px; top: 3px; line-height: 43px; }

#webPrev.webPrevShown:hover { left: -56px;
-webkit-box-shadow: -1px 0px 0px #AEAEAE, 0px 0 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow:    -1px 0px 0px #AEAEAE, 0px 0 1px rgba(0, 0, 0, 0.5);
box-shadow:         -1px 0px 0px #AEAEAE, 0px 0 1px rgba(0, 0, 0, 0.5);
}
#webNext.webNextShown:hover { right: -56px;
-webkit-box-shadow: 1px 0px 0px #AEAEAE, 0px 0 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow:    1px 0px 0px #AEAEAE, 0px 0 1px rgba(0, 0, 0, 0.5);
box-shadow:         1px 0px 0px #AEAEAE, 0px 0 1px rgba(0, 0, 0, 0.5);
}

#webPrev a,
#webNext a { display: block; height: 27px; width: 43px; line-height: 27px; text-align: center; text-decoration: none; color: #000;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease; 
-o-transition: all .5s ease; 
-ms-transition: all .5s ease;
}
#webPrev a,
#webNext a { height: 43px; line-height: 43px; }


/* ----- End of Next and Previous Buttons ----- */





/* ----- Contact Form ----- */

/*contact form*/
#form { width:400px; position: relative;	}
.info_fieldset { padding: 0; border: none; }
/*CSS for Error notification*/
.notification_error{
	border: 1px solid #f1dfc5;
	height: auto;color: #ca5702;
	padding: 10px;
	margin: 10px auto;
	text-align:left;
	-moz-border-radius:5px;
	margin-bottom:10px;}

/*CSS for Successfully sent notification*/
.notification_ok{
	border: 1px #cbcf8e solid;
	height: auto;padding: 10px;
	margin:0 auto;
	background: #f5f9fd;
	text-align: center;-moz-border-radius:
	5px;margin-bottom:10px;}

/*CSS for textarea (Name and email)*/
textarea{
	width:388px;margin: 10px auto;
	padding: 5px;
	border: 1px solid #a65611;
	color: #333333;
	font: 12px Verdana, Helvetica, Arial, sans-serif;
	-moz-border-radius: 3px;
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	-moz-box-sizing : content-box;
	box-sizing : content-box;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;}

/*CSS for textbox (Message)*/		
.textbox {
	width:388px;
	height:25px;
	margin: 10px auto;
	padding: 5px;
	border: 1px solid #a65611;
	color: #333333;
	font: 12px Verdana, Helvetica, Arial, sans-serif;
	-moz-border-radius: 3px;
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	-moz-box-sizing : content-box;
	box-sizing : content-box;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;}
.textbox2 {height:140px;}

/*CSS for submit button*/		
.button {
	width: 340px;
	cursor: pointer;
	border: none;
	padding: 4px 5px;
	margin: 10px 0 30px 30px;	
	text-align:center;
	background-image: url('imgs/buttonArrows.png');
	background-position: 363px 0;
    background-repeat: no-repeat;
	cursor: pointer;
	padding: 6px 0 6px 20px;
	font-weight: bold;
	font-size: 21px;
	position: relative;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	transition: all .5s ease;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease; 
	-o-transition: all .2s ease; 
	-ms-transition: all .2s ease;
	background-color: #ff9133;
	color: #a65611;
	text-shadow: 1px 1px 1px #ffc38f;
	-webkit-box-shadow: 0 4px 0 #a65611, 0 3px 8px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 4px 0 #a65611, 0 3px 8px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 0 #a65611, 0 3px 8px rgba(0, 0, 0, 0.5);
}
			
.button:hover{
	top: 3px;
	-webkit-box-shadow: 0 1px 0 #a65611, 0 0 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 0 #a65611, 0 0 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 0 #a65611, 0 0 2px rgba(0, 0, 0, 0.3);
}

/**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder  { 
	color: rgb(190, 188, 188); 
	font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{ 
	color: rgb(190, 188, 188);
	font-style: italic;
} 
input {
  outline: none;
}

/* ----- End of Contact Form ----- */