/* test contrasts here: 
http://leaverou.github.com/contrast-ratio/#%23812-on-%23EEE3C6
http://leaverou.github.com/contrast-ratio/#%2362583C-on-%23EEE3C6
contrast max = 21
 */
html { 
	color: #222;
	background: #EEE9DB;
	}
/*
body {}
*/

a, a:link { /* putting transition here affects all styles of links regardless of later styling */
	color: #22a;/* indigo */
	text-decoration: none;
	transition: all 0.3s ease;
	}
a:visited {color: purple;}/*#306 standard purple */
html body a:hover, html body a:focus, html body a:active {color: red;} /* #812 burgundy */
	/* using html body will overide the a:link, a:visited styles below */

main a:link, main a:visited {
	text-decoration: none; 
	padding-bottom: 1px; 
	border-bottom: 1px dotted;
	}/*border color inherited, and the dotted focus box overlaps it. */
h1 a:link, h1 a:visited  {
	color: #62583C;
	padding-bottom: 0; 
	border-bottom: 0;
	}/* cancel previous rule for main */
nav a:link, nav a:visited , nav strong {
	color: #716D29;
	padding-bottom: 0; 
	border-bottom: 0;
	}/* cancel previous rule for main */

/* 
Increasing line-height does not add any space between text and default underline.
alistapart.com replaces underline with border bottom for legibility.
Change padding-bottom to adjust the space. This padding does not add to the line height.
Potential problem: linked images will get the underline also?
But this doesn't seem to be the case? [test more]
*/
header[role="banner"] li.thispage a {
	background: #fff;/*fallback, IE8 etc*/
	/* for reverse colors use these: color: #EEECC6; background: #62583C;*/ 
	background: rgba(255,255,255,0.7);
	}
header[role="banner"] nav a:hover,
header[role="banner"] nav a:focus,
header[role="banner"] nav a:active {
	background: #fff;/*fallback, IE8 etc*/
	background: rgba(255,255,255,0.55); 
	}
header[role="banner"] li.thispage a:hover,
header[role="banner"] li.thispage a:focus,
header[role="banner"] li.thispage a:active {
	background: #fff;
	}

main nav a:hover, main nav a:focus {
	background: #fff;/*fallback, IE8 etc*/
	background: rgba(255,255,255,0.3);
	}/* transparent enough not to destroy rounded corners */

#breadcrumbs { /* you are here navigation  */
	color: #716D29;
	}
/* background: #EEE3C6; */

h1, h2, h3, h4, h5, h6 {
	color: #827A66;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
	}

header input[type="text"] {
	background: #EEE9DB;
	padding: 3px 5px;
	border-radius: 6px;
	}

header[role="banner"] {
	color: #62583C; 
	background: #EEE3C6 url(../img/triccali970.png) left top no-repeat;
	border-top: 1px solid #ACA97C;
	box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
	}

header[role="banner"] nav {
	border: solid #ACA97C;
	border-width: 1px 0 1px 0;
	background: #EEE3C6;/* color with no image */
	font-weight: bold;
	}
header[role="banner"] nav a {
	border-left: 1px solid #ACA97C;
/* transition on basic links above */
	}



main { box-shadow: 0 1px 0 rgba(0,0,0,0.2);
	background: #fff;
/* padding-bottom: 1em; without padding here the lowermost contained element's bottom margin is ignored */
	border-bottom-left-radius: 2em;
	}

main header h1 {
	background: #EEE9DB;
	}

main footer {color: #827A66;}

main aside {
	color: #714929;
	padding-top: 25px;
	}

aside figure blockquote {
	border-bottom: 2px solid #EED8C6;
	}
main aside .box {box-shadow: 0 1px 0 rgba(0,0,0,0.2);
	border-color: #EED8C6;
	background: #eee4db url(../img/triccali300_eee4db.png) left top no-repeat;
	}
main aside .box h3 { 
	color: inherit; /* inherit from Aside color not h3 */
	border-color: #EED8C6;
	}


/* rounded tabs code -- note: NOT floated!
modified from: http://css-tricks.com/examples/RoundOutTabs2/ */

main nav {
	background: #EEE9DB; /* match color to html */
/*	padding-top: 10px; */
	}

main nav ul {
	padding-left: 40px; /* left indent */
	line-height: 25px;
	height: 27px;
	overflow: hidden;
	position: relative;
	font-size: 0.9em;
	}/* Warning: Using height with padding can sometimes make elements larger than you expect.*/

main nav ul li { /* the little vertical line on right side of the last link is a browser glitch in Firefox, not present in Chrome */
	border: 1px solid #716D29;
	background: #EEECC6;
	background: -o-linear-gradient(top, #EEEDDB 50%, #EEECC6 100%);
	background: -ms-linear-gradient(top, #EEEDDB 50%, #EEECC6 100%);
	background: -moz-linear-gradient(top, #EEEDDB 50%, #EEECC6 100%);
	background: -webkit-linear-gradient(top, #EEEDDB 50%, #EEECC6 100%);
	background: linear-gradient(top, #EEEDDB 50%, #EEECC6 100%);
	display: inline-block;
	position: relative;
	z-index: 0;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
	text-shadow: 0 1px #FFF;
/*	margin: 0 -3px;  fixes space problem between inline-block elements, if they are not inline in HTML code  ....</li><li>....... If they are on separate lines than need negative margin fix. */
	margin: 0 -1px; /* -1px makes the 1px borders overlap */
	/* padding: 0 22px; Moved this to a */
		}
main nav a, main nav strong  {
	border: 0;
	padding: 0 22px;
	}


main nav ul li.thispage {
    background: #FFF;
    color: #333;
    z-index: 2;
    border-bottom-color: #FFF;
	}
main nav ul:before {
    position: absolute;
    content: " ";
    width: 100%;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #716D29;
    z-index: 1;
	}
main nav ul li:before,
main nav ul li:after {
    border: 1px solid #716D29;
    position: absolute;
    bottom: -1px;
    width: 7px;
    height: 7px;
    content: " ";
	}/* Warning: Using height with border can sometimes make elements larger than you expect.*/

main nav ul li:after {
    right: -8px;
    border-bottom-left-radius: 8px;
    border-width: 0 0 1px 1px;
    box-shadow: -2px 2px 0 #EEECC6;
	}
main nav ul li:before {
    left: -8px;
    border-bottom-right-radius: 8px;
    border-width: 0 1px 1px 0;
    box-shadow: 2px 2px 0 #EEECC6;
	}

main nav ul li.thispage:before {
    box-shadow: 2px 2px 0 #FFF;
	}
main nav ul li.thispage:after {
    box-shadow: -2px 2px 0 #FFF;
	}

/* ============== HOME PAGE ============== */
/*#home header[role="banner"] {
	color: #827A66; 
	background: #EEE9DB; match color html	} */

#homepic {
	display: block;
	float: right;
	border: 4px solid #EED8C6;
	padding: 0;
	margin: 0 0 0 20px;
	}
.badge {opacity: 0.5; transition: all 0.3s ease;}
.badge:hover, .badge:focus {opacity: 1;}