/*===============================================================
BUTTONS AND pageNavigation FOR ALL PAGES
===============================================================*/
/* BUTTONS
===============================================================*/
[class*="button-"] {
	background-color: #6A9196;
	color: #fff;
	border: none;
	padding: 10px 16px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1em;
	margin: 4px 0;
	cursor: pointer;
	border-radius: 5px;
	transition: background-color .4s;
}

[class*="button-"]:hover {
	background-color: #fff;
	color: #000;
}

/* Hover background colors
===============================================================*/
.button-bg {
	background-color: #6A9196; 
	border: 2px solid #6A9196;
	padding-top: 8px;
	padding-bottom: 8px;
} 
.button-border {
	background-color: #fff;
	color: #6A9196;
	border: 2px solid #6A9196;
	padding-top: 8px;
	padding-bottom: 8px;
} 
.button-border:hover {
	background-color: #6A9196;
	color: #fff;
}

/* Hover shadows
===============================================================*/
.button-shadow {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button-shadow:hover {
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

/* Arrow
===============================================================*/
.button-arrow {
	background-color: #6A9196;
	padding: 10px 20px;
	transition: all 0.3s;
}

.button-arrow span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.3s;
}

.button-arrow span:after {
	content: '»';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.3s;
}

.button-arrow:hover {background-color: #6A9196; color:#fff;}
.button-arrow:hover span {padding-right: 25px;}
.button-arrow:hover span:after {opacity: 1;	right: 0;}

.orderDesc:after {content: "\25bc"}
.orderAsc:after {content: "\25b2"}

/* Positions buttons at the botton of their container
===============================================================*/
.absolute-button {
	position: absolute;
	left:-10px;
	right:-10px;
	bottom:30px;
	text-align:center;
}
/* A DIV that creates a margin to account for the buttons height
===============================================================*/
.abslute-margin {height: 60px;}


/*===============================================================
	PAGANATION AND PRIVIOUS-NEXT BUTTONS
===============================================================*/

.pagination {text-align:center;}
.pagination ul {
    display: inline-block;
    padding: 0;
    margin: 0 auto;
}

.pagination li {
	display: inline;
	padding:0;
	margin:0;
}

.pagination li span,
.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    margin: 1px;
    text-decoration: none;
    border: 1px solid #ddd;
    transition: background-color 0.3s;
    cursor:pointer;
}
.pagination li:first-child a {
    border-radius: 7px 0 0 7px;
}
.pagination li:last-child a {
    border-radius: 0 7px 7px 0;
}

.pagination li.active span,
.pagination li.active a,
 pagination li.selected span,
.pagination li.selected a {
    background-color: #888;
    border: 1px solid #888;
    color: white;
}
.pagination li:not(.active) span:hover,
.pagination li:not(.active) a:hover,
.pagination li:not(.selected) span:hover,
.pagination li:not(.selected) a:hover {
	background-color: #ddd;
}

/* Transforms pagination from inline-block into table
************************************* */
ul.tbl {display: table; width:100%; margin: 0 0 10px 0; font-size:0.92em;}
ul.tbl li {display: table-cell; vertical-align:top; text-align:center;}
ul.tbl span,
ul.tbl a {display: block; float:none; padding: 8px 0;}
ul.tbl li:first-child a,
ul.tbl li:last-child a {padding: 8px 10px;}

/* ===============================================================
	PAGE NAVIGATION FOR ARCHIVES
=============================================================== */
.pageNavigation {
	text-align:center;
	border-top: 4px #ddd solid;
	padding-top:10px;
	margin-top: 20px;
	line-height: 100%;
}
.pageNavigation ul {
	display: inline-block;
	text-align:center;
	padding: 0;
	margin: 0 auto;
}
.pageNavigation li {
	display: inline-block;
	padding: 0;
	margin: 0;
}

.pageNavigation li span,
.pageNavigation li a {
	color: black;
	display: inline-block;
	padding: 10px 25px;
	margin: 1px 2px;
	text-decoration: none;
	border: 1px solid #ddd;
	transition: background-color 0.3s;
}
.pageNavigation li span {
	padding: 9px 20px;
	color:#ddd;
}

.pageNavigation li:first-child a {
	border-radius: 7px 0 0 7px;
}
.pageNavigation li:last-child a {
	border-radius: 0 7px 7px 0;
}

ul.pageNavigation li a.active {
	background-color: #888;
	border: 1px solid #888;
	color: white;
}
.pageNavigation li a:hover:not(.active) {
	background-color: #ddd;
}

.pageNavigation form {margin-bottom: 10px;}
.pageNavigation input {font-size: 1em; padding: 5px; width: 60px; height: 40px; border: 1px solid #ddd; border-radius:5px;}
.pageNavigation input[type=submit] {cursor: pointer;}
.pageNavigation input[type=submit]:hover {background: #06d; color:#eee; border: 1px solid #039;}



/* END
***************/