* {
	margin: 	0;
	padding:	0;
}
/* Margins and padding have been set for all elements with this CSS "reset" rule. */
/* Phillips, Ralph. 2013. Create and Center a Horizontal Navigation Menu. YouTube video, 5:38. http://youtu.be/XRJq1DqYcPs?list=PLYMwCkZ_UIQBzwm8PMyQsf_Krzih8eU7X. */

body {
	background-color:	#FAFAFA;
	color: 				#3A5373;
	margin-left: 		20%;
	margin-right: 		20%;
	padding: 			10px 10px 25px 10px;	
	font-family: 		"Khand", "Advent Pro", sans-serif;
	font-size: 			16px;
	letter-spacing: 	0.005em;
	min-width: 			960px;
}
/* Write about selection of KHAND and ADVENT PRO in Progress Report. */

.wrapper {
min-height:	100%;
height: 	auto !important;
height: 	100%;
margin: 	0 auto -4em;
}
.footer, .push {
height:	4em;
}

header {
	text-align: 		center;
}
	
@font-face {
	font-family: 		"Khand", "Advent Pro", sans-serif;
}
	
/* ---- 'HEADINGS' ---- */
	
h1 { 
	font-family: 		"Advent Pro", Impact, sans-serif; 
	font-size: 			150%;
	line-height: 		180%;
	letter-spacing: 	0.02em;
}

h2 {
	font-family: 		"Advent Pro", Impact, sans-serif;
	font-size: 			120%;
	line-height: 		180%;
	letter-spacing: 	0.02em;
}

/* All H1 and H2 headings will consist of upper and lower case letters. 'Advent Pro' ALL CAPS does not sit well
with the flow and design of the entire page. */

h3 {
	font-family:		"Khand", sans-serif;
	font-size: 			100%;
	color:				#B27375;
	line-height: 		120%;
	letter-spacing: 	0.06em;
}

h4 {
	font-family: 		"Khand", sans-serif;
	font-size: 			100%;
	font-weight: 		lighter;
	line-height: 		200%;
	letter-spacing: 	0.02em;
	text-decoration:	underline;
}

/* ---- 'TABLES, SECTIONS AND PANELS' ---- */
div#tableContainer {
	display: 		table;
	border-spacing:	10px;
}

div#tableRow {
	display: 		table-row;
}

section#sides {
    display: 			table-cell;
    background-color:	#E6DED5;
    width: 				25%;
    padding: 			15px;
    vertical-align: 	top;
	-moz-box-shadow: 	0 0 5px #ACAEBA;
	-webkit-box-shadow: 0 0 5px #ACAEBA;
	box-shadow: 		0 0 5px #ACAEBA;
}

img.align-center {
	display:	block;
	margin: 	20px 0px 20px 0px;
}

img.align-right {
	float: 	right;
	margin:	5px 5px 0px 0px;
	}
	
img.medium {
	width: 	100px;
	height:	108px;
	}

section#blog {
    display: 			table-cell;
    background-color: 	#FAFAFA;
    width: 				50%;
    padding: 			15px;
    vertical-align: 	top;
}

#blogpost-divider {
	margin-left:		10%;
	margin-top:			5%;
	margin-bottom:		5%;
	border: 			1px solid #ACAEBA;
	border-width: 		1px 0;
	list-style-type: 	none;
	width: 				80%;
	text-align: 		center;
	text-decoration: 	none;
}

.container .grid {
  width: 240px;
  float: left;
}

#one {
	-moz-box-shadow: 		0 0 15px #ACAEBA;
	-webkit-box-shadow: 	0 0 15px #ACAEBA;
	box-shadow: 			0 0 15px #ACAEBA;
}

#two{
	-moz-box-shadow: 		0 0 2px #ACAEBA;
	-webkit-box-shadow: 	0 0 2px #ACAEBA;
	box-shadow: 			0 0 2px #ACAEBA;
}

/* ---- 'NAVIGATION' ---- */
nav {
	background-color: 	#FAFAFA;
	margin: 			0px 10px 5px 10px;
}
	
nav ul {
	margin: 			0;
	border: 			1px solid #ACAEBA;
	border-width: 		1px 0;
	list-style-type: 	none;
	padding: 			15px;
	text-align: 		center;
	text-decoration: 	none;
}

nav ul li {
	display: 			inline;
	padding: 			25px 20px 25px 20px;
	text-decoration: 	none;
}

nav ul li.selected {
	color:				#81B572;
	/* Green */
	text-decoration:	overline;
}

a:link {
  color: 			#B27375;
  /* Dark Pink */
  text-decoration: 	none;
}

a:visited {
  color: 			#ACAEBA;
  /* Grey */
  text-decoration: 	none;
}

nav a:hover {
  color: 			#D3D964;
  /* Olive Green */
  border-bottom: 	thin dotted #D3D964;
  border-top: 		thin dotted #D3D964;
}

.dotted a:hover {
  color: 			#D3D964;
  /* Olive Green */
  border-bottom: 	thin dotted #D3D964;
  border-top: 		thin dotted #D3D964;
}

.dotted a:active {
  color: 			#D3D964;
  /* Olive Green */
  border-bottom: 	thin dotted #D3D964;
  border-top: 		thin dotted #D3D964;
}

a:focus {
  color: 			#D3D964;
  /* Olive Green */
}
/* Using the 'focus' state on links will assist accessibility for those using the TAB key 
on their keyboards for navigating through a web site (Robson and Freeman 2012, 453) */

#scoop {
	background-color:	#E6DED5;
	margin-top: 		20px;
	margin-bottom:		20px;
	padding: 			10px 10px 10px 10px;
	text-align: 		center;
	text-decoration: 	none;
	height: 			430px;
	-moz-box-shadow: 	0 0 5px #ACAEBA;
	-webkit-box-shadow: 0 0 5px #ACAEBA;
	box-shadow: 		0 0 5px #ACAEBA;
}

.scoopalign {
	padding: 15px;
}

/* ---- 'TAG CLOUD' ---- */
#htmltagcloud {
	line-height: 	1.1em;
	word-spacing: 	normal;
	letter-spacing: normal;
	text-transform: none;
	text-align: 	center;
	text-indent: 	0;
	font-family: 	"Khand", "Advent Pro", sans-serif;
	font-size: 		11px;
	letter-spacing:	0.005em;
}
#htmltagcloud a:link {
  text-decoration: 	none;
}
#htmltagcloud a:visited {
  text-decoration: 	none;
}
#htmltagcloud a:hover {
  color: 				#E6DED5;
  background-color: 	#D3D964;
}
#htmltagcloud a:active {
  color: 				#FAFAFA;
  background-color: 	#B27375;
}
.wrd {
  padding: 		0;
  position: 	relative;
}
.wrd a {
  text-decoration: none;
}
.tagcloud0 {
  font-size: 	0.05em;
  color: 		#E6DED5;
  z-index: 		10;
}
.tagcloud0 a {
  color: 		#B27375;
}
.tagcloud1 {
  font-size: 	1.4em;
  color: 		#3A5373;
  z-index: 		9;
}
.tagcloud1 a {
color: 			#ACAEBA;
}
.tagcloud2 {
  font-size: 	1.8em;
  color: 		#E6DED5;
  z-index: 		8;
}
.tagcloud2 a {
  color: 		#B27375;
}
.tagcloud3 {
  font-size: 	2.2em;
  color: 		#3A5373;
  z-index:		7;
}
.tagcloud3 a {
  color: 		#ACAEBA;
}
.tagcloud4 {
  font-size: 	2.6em;
  color: 		#E6DED5;
  z-index:		6;
}
.tagcloud4 a {
  color: 		#B27375;
}
.tagcloud5 {
  font-size: 	3.0em;
  color: 		#3A5373;
  z-index: 		5;
}
.tagcloud5 a {
  color: 		#ACAEBA;
}
.tagcloud6 {
  font-size: 	3.3em;
  color: 		#E6DED5;
  z-index: 		4;
}
.tagcloud6 a {
  color: 		#B27375;
}
.tagcloud7 {
  font-size: 	3.6em;
  color: 		#3A5373;
  z-index: 		3;
}
.tagcloud7 a {
  color: 		#ACAEBA;
}
.tagcloud8 {
  font-size: 	3.9em;
  color: 		#E6DED5;
  z-index: 		2;
}
.tagcloud8 a {
  color: 		#B27375;
}
.tagcloud9 {
  font-size: 	4.2em;
  color: 		#3A5373;
  z-index: 		1;
}
.tagcloud9 a {
  color: 		#ACAEBA;
}
.tagcloud10 {
  font-size: 	4.5em;
  color: 		#E6DED5;
  z-index: 		0;
}
.tagcloud10 a {
  color: 		#B27375;
}
.freq {
  font-size: 	5pt;
  color: 		#3A5373;
}

#credit {
  text-align: 		justify;
  color: 			#333;
  margin-bottom: 	0.05em;
  font: 			0.05em Arial, sans-serif;
}

#credit a:link {
  color: 			#777;
  text-decoration: 	none;
}

#credit a:visited {
  color: 			#777;
  text-decoration: 	none;
}

#credit a:hover {
  color: 			white;
  background-color: #05f;
}

#credit a:active {
  text-decoration: 	underline;
}

/* ---- 'BLUE FOOTER' ---- */
#social {
  background-color: #3A5373;
  color:            #ACAEBA;
  float:       		right;
  padding:          15px;
  margin: 			0px 10px 0px 10px;
}

#navfooter {
  background-color: #3A5373;
  color:            #ACAEBA;
  float:       		left;
  padding:          15px;
  margin: 			0px 10px 0px 10px;
}

#navfooter .selected {
	color:			#81B572;
  /* Green */
  text-decoration: 	overline;

}

#navfooter a:hover {
  color: 			#D3D964;
  /* Olive Green */
  border-bottom: 	thin dotted #D3D964;
  border-top: 		thin dotted #D3D964;
}

.dotted a:hover {
  color: 			#D3D964;
  /* Olive Green */
  border-bottom: 	thin dotted #D3D964;
  border-top: 		thin dotted #D3D964;
}

.dotted a:active {
  color: 			#D3D964;
  /* Olive Green */
  border-bottom: 	thin dotted #D3D964;
  border-top: 		thin dotted #D3D964;
}

#sectionfooter {
  background-color: #3A5373;
  color:            #ACAEBA;
  text-align:       left;
  padding:          15px;
  margin: 			0px 10px 0px 10px;
  font-family: 		Arial, sans-serif;
  font-size:        x-small;
}

/* ---- 'IMAGE SLIDER' ---- */
.slider {
    display: 	block;
    height: 	320px;
    min-width: 	260px;
    max-width: 	640px;
    margin: 	auto;
    margin-top:	0px;
    position: 	relative;

}
 
.sliderinner {
    width: 		100%;
    height: 	100%;
    overflow: 	hidden;
    position:	relative;
}
 
.sliderinner>ul {
    list-style:			none;
    height: 			100%;
    width: 				500%;
    overflow: 			hidden;
    position: 			relative;
    left: 				0px;
    -webkit-transition:	left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: 	left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: 		left .8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: 		left .8s cubic-bezier(0.77, 0, 0.175, 1);
}
 
.sliderinner>ul>li {
    width: 		20%;
    height: 	320px;
    float: 		left;
    position:	relative;
}
 
.sliderinner>ul>li>img {
    margin:	auto;
    height:	100%;
}
 
.slider input[type=radio] {
    position: 	absolute;
    left: 		50%;
    bottom: 	15px;
    z-index: 	100;
    visibility:	hidden;
}
 
.slider label {
    position: 				absolute;
    left: 					50%;
    bottom: 				-45px;
    z-index: 				100;
    width: 					12px;
    height: 				12px;
    background-color:		#ccc;
    -webkit-border-radius:	50%;
    -moz-border-radius: 	50%;
    border-radius: 			50%;
    cursor: 				pointer;
    -webkit-box-shadow: 	0px 0px 3px rgba(0,0,0,.8);
    -moz-box-shadow: 		0px 0px 3px rgba(0,0,0,.8);
    box-shadow: 			0px 0px 3px rgba(0,0,0,.8);
    -webkit-transition: 	background-color .2s;
    -moz-transition: 		background-color .2s;
    -o-transition: 			background-color .2s;
    transition: 			background-color .2s;
}
 
.slider input[type=radio]#control1:checked~label[for=control1] { background-color: #333; }
.slider input[type=radio]#control2:checked~label[for=control2] { background-color: #333; }
.slider input[type=radio]#control3:checked~label[for=control3] { background-color: #333; }
.slider input[type=radio]#control4:checked~label[for=control4] { background-color: #333; }
.slider input[type=radio]#control5:checked~label[for=control5] { background-color: #333; }
.slider label[for=control1] { margin-left: -36px }
.slider label[for=control2] { margin-left: -18px }
.slider label[for=control4] { margin-left: 18px }
.slider label[for=control5] { margin-left: 36px }
.slider input[type=radio]#control1:checked~.sliderinner>ul { left: 0 }
.slider input[type=radio]#control2:checked~.sliderinner>ul { left: -100% }
.slider input[type=radio]#control3:checked~.sliderinner>ul { left: -200% }
.slider input[type=radio]#control4:checked~.sliderinner>ul { left: -300% }
.slider input[type=radio]#control5:checked~.sliderinner>ul { left: -400% }
 
.description {
    position: 		absolute;
    bottom: 		0;
    left: 			0;
    width: 			100%;
    font-family:	"Khand", "Advent Pro", sans-serif;
    z-index: 		1000;
}
.description-text {
    background-color: 	rgba(0,0,0,.8);
    padding:			10px;
    top: 				0;
    z-index: 			4;
    -webkit-transition:	opacity .2s;
    -moz-transition:	opacity .2s;
    -o-transition: 		opacity .2s;
    transition: 		opacity .2s;
    color: 				#FAFAFA;
}

body {
min-width: 960px;
}

/* ---- 'CONTAINERS AND BOXES' ---- */
.container {
	margin-left:	auto;
	margin-right: 	auto;
	width: 			960px;
}

.leftbox {
	display: 			inline;
	float: 				left;
	margin-left: 		0px;
	margin-right:		0px;
	width: 				290px;
	height:				1265px;
	-moz-box-shadow: 	0 0 5px #ACAEBA;
	-webkit-box-shadow: 0 0 5px #ACAEBA;
	box-shadow: 		0 0 5px #ACAEBA;
}

.centrebox {
	display: 			inline;
	float: 				left;
	margin-left: 		15px;
	margin-right: 		15px;
	width: 				290px;
	height:				1265px;
	-moz-box-shadow: 	0 0 5px #ACAEBA;
	-webkit-box-shadow: 0 0 5px #ACAEBA;
	box-shadow: 		0 0 5px #ACAEBA;
}

.rightbox {
	display: 			inline;
	float: 				left;
	margin-left: 		0px;
	margin-right: 		0px;
	width: 				290px;
	height:				1265px;
	-moz-box-shadow: 	0 0 5px #ACAEBA;
	-webkit-box-shadow: 0 0 5px #ACAEBA;
	box-shadow: 		0 0 5px #ACAEBA;
}

#feature, .article {
	background-color:	#E6DED5;
	margin-top: 		20px;
	padding: 			10px 10px 10px 10px;
	text-align: 		left;
	text-decoration: 	none;
	-moz-box-shadow: 	0 0 5px #ACAEBA;
	-webkit-box-shadow: 0 0 5px #ACAEBA;
	box-shadow: 		0 0 5px #ACAEBA;
}

img.thumbnail {
	padding:	0px 10px 0px 0px;
	float:		left;
}

img.site {
	padding:	5px 0px 5px 0px;
}

p.font {
	font-family:	"Khand", sans-serif;
	font-size: 		100%;
	color:			#3A5373;
	line-height:	120%;
}

#divider {
	margin-left: 		33%;
	margin-top:			5%;
	margin-bottom:		5%;
	border: 			1px solid #ACAEBA;
	border-width: 		1px 0;
	list-style-type: 	none;
	width: 				100px;
	text-align: 		center;
	text-decoration: 	none;
}

/* ---- 'CLEAR FLOATED ELEMENTS' ---- */
/* http://www.cssmojo.com/clearfix-reloaded-overflowhidden-demystified/ */
.clearfix:before, .clearfix:after {
	content:	'\0020';
	display: 	block;
	overflow: 	hidden;
	visibility:	hidden;
	width: 		0;
	height: 	0;
}

.clearfix:after {
	clear: 		both;
}

/* The following zoom:1 rule is specifically for IE6 + IE7. 
Move to separate stylesheet if invalid CSS is a problem. */
.clearfix {
	zoom: 		1;
}

embed, iframe, object, video {
    max-width: 100%;
}

.video-column {
    float: 			left;
    padding-bottom:	5px;
    width: 			285px;
}

.video-thumbs-border {
    border-radius:	5px 5px 6px 6px;
    color: 			#B27375;
    display: 		block;
    margin-top: 	3px;
    padding: 		3px;
    text-align: 	center;
    width: 			285px;
}

.video-thumbs-link {
    color: 		#B27375;
    display: 	block;
    text-align:	left;
    width: 		285px;
}


p a:hover {
  color: 			#D3D964;
  /* Olive Green */
  border-bottom: 	thin dotted #D3D964;
  border-top: 		thin dotted #D3D964;
}

p .dotted a:hover {
  color: 			#D3D964;
  /* Olive Green */
  border-bottom: 	thin dotted #D3D964;
  border-top: 		thin dotted #D3D964;
}

p .dotted a:active {
  color: 			#D3D964;
  /* Olive Green */
  border-bottom: 	thin dotted #D3D964;
  border-top: 		thin dotted #D3D964;
}

/* --------------- CONTACT / FEEDBACK FORM CODE ------------------ */

html {    
	background-color: #FAFAFA;
}

#feedback-page {
	text-align:	center;
}

#form-main {
	width:			100%;
	float:			left;
	padding-top:	0px;
}

#form-div {
	background-color:		#E6DED5;
	padding-left:			35px;
	padding-right:			35px;
	padding-top:			35px;
	padding-bottom:			50px;
	width: 					450px;
	float: 					left;
	left: 					50%;
	position: 				absolute;
	margin-top:				10px;
	margin-left: 			-260px;
	-moz-border-radius: 	7px;
	-webkit-border-radius:	7px;
  	-moz-box-shadow: 		0 0 5px #ACAEBA;
	-webkit-box-shadow: 	0 0 5px #ACAEBA;
	box-shadow: 			0 0 5px #ACAEBA;
}

.feedback-input {
	color:				#B27375;
	font-family: 		"Khand", "Advent Pro", sans-serif;
	font-weight:		500;
	font-size: 			18px;
	border-radius: 		0;
	line-height: 		22px;
	background-color: 	#FAFAFA;
	padding: 			13px 13px 13px 54px;
	margin-bottom: 		10px;
	width:				100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: 	border-box;
	-ms-box-sizing: 	border-box;
	box-sizing: 		border-box;
	border: 			3px solid rgba(0,0,0,0);
}

.feedback-input:focus {
	background:	#FAFAFA;
	box-shadow: 0;
	border: 	3px solid #D3D964;
	color: 		#81B572;
	outline: 	none;
	padding: 	13px 13px 13px 54px;
}

.focused {
	color:	#D3D964;
	border:	#D3D964 solid 3px;
}

/* Icons ---------------------------------- */
#name {
	background-image: 		url(http://rexkirby.com/kirbyandson/images/name.svg);
	background-size: 		30px 30px;
	background-position:	11px 8px;
	background-repeat: 		no-repeat;
}

#name:focus {
	background-image: 		url(http://rexkirby.com/kirbyandson/images/name.svg);
	background-size: 		30px 30px;
	background-position: 	8px 5px;
  background-position: 		11px 8px;
	background-repeat: 		no-repeat;
}

#email {
	background-image: 		url(http://rexkirby.com/kirbyandson/images/email.svg);
	background-size: 		30px 30px;
	background-position: 	11px 8px;
	background-repeat: 		no-repeat;
}

#email:focus {
	background-image: 		url(http://rexkirby.com/kirbyandson/images/email.svg);
	background-size: 		30px 30px;
	background-position: 	11px 8px;
	background-repeat:	 	no-repeat;
}

#comment {
	background-image: 		url(http://rexkirby.com/kirbyandson/images/comment.svg);
	background-size: 		30px 30px;
	background-position: 	11px 8px;
	background-repeat: 		no-repeat;
}

textarea {
    width: 			100%;
    height: 		150px;
    line-height: 	150%;
    resize:			vertical;
}

input:hover, textarea:hover, input:focus, textarea:focus {
	background-color: #D3D987;
}

#send-button {
	font-family: 			"Khand", "Advent Pro", sans-serif;
	float:					left;
	width: 					100%;
	border: 				#D3D964 solid 4px;
	cursor:					pointer;
	background-color: 		#FAFAFA;
	color:	 				#3A5373;
	font-size:				32px;
	padding-top:			22px;
	padding-bottom:			22px;
	-webkit-transition: 	all 0.3s;
	-moz-transition: 		all 0.3s;
	transition: 			all 0.3s;
	margin-top:				-4px;
	font-weight:			700;
}

#send-button:hover{
	background-color: 	#B27375;
	color: 				#D3D964;
}
	
.submit:hover {
	color: 				#D3D964;
}
	
.ease {
	width: 					0px;
	height: 				74px;
	background-color: 		#FAFAFA;
	-webkit-transition: 	.3s ease;
	-moz-transition: 		.3s ease;
	-o-transition: 			.3s ease;
	-ms-transition: 		.3s ease;
	transition: 			.3s ease;
}

.submit:hover .ease{
  width:				100%;
  background-color: 	#FAFAFA;
}

@media only screen and (max-width: 580px) {
	#form-div{
		left: 			3%;
		margin-right: 	3%;
		width: 			88%;
		margin-left: 	0;
		padding-left: 	3%;
		padding-right: 	3%;
	}
}

#contactme {
	background-color:	#E6DED5;
	margin-top: 		20px;
	padding: 			10px 10px 10px 10px;
	text-align: 		left;
	text-decoration: 	none;
	-moz-box-shadow: 	0 0 5px #ACAEBA;
	-webkit-box-shadow: 0 0 5px #ACAEBA;
	box-shadow: 		0 0 5px #ACAEBA;
	height: 			540px;
}