/*
Theme Name: Africville Heritage Trust
Theme URI: http://www.africvilleht.org/
Author: Media Mechanics
Version: 1.0
*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 80%; -webkit-text-size-adjust: 80%; -ms-text-size-adjust: 80%; }
html, button, input, select, textarea { font-family: sans-serif; color: #4c4136; }
body { margin: 0; font-size:16px; line-height: 1.4; background:#f1efee; font-family: 'Asap', sans-serif;}

::-moz-selection { background: #009fdd; color: #fff; text-shadow: none; }
::selection { background: #009fdd; color: #fff; text-shadow: none; }

h1, h2, h3, h4{margin:0; font-family: 'Oswald', sans-serif; font-weight:normal; line-height:1.2;}
h1 span ,h2 span, h3 span, h4 span{color:#52adcc;}
h1{font-size:48px; margin-bottom:40px;}
h2{font-size:24px; margin-bottom:20px;}
h3{font-size:20px;}
h4{font-size:18px;}

a { color: #52adcc; text-decoration:none; }
a:visited { color: #52adcc; }
a:hover { color: #287a95; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; color:#287a95; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr {display: block; border: 0; height: 9px; background: url(img/hr.png) 50% 0 no-repeat; margin: 4em 0; padding: 0;}
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0;  list-style: none;}
ul li{background:url(img/bullet.png) 0 4px no-repeat; padding-left:20px;}

ol{ counter-reset:li; margin:20px 0 0 50px; padding-left:0;}
ol > li { position:relative; margin:0 0 25px 2em; padding:4px 8px; list-style:none;}
ol > li:before {
    content:counter(li);
    counter-increment:li;
    position:absolute;
    top:-2px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:60px;
    height:60px;
    margin-right:15px;
    padding:4px;
    color:#f4f4f4;
    background: url(http://africvillemuseum.ca/wp-content/uploads/2013/01/ol.png) 0 0 no-repeat;
	font-size:40px;
	line-height:1.3;
    font-family:"Times New Roman", Times, serif;
    text-align:center;
}

dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0;}
nav ul li{ background:none; padding-left:0;}

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; background:#fff; width:100%; border:10px solid #fff;}
table tr th, table tr td{text-align:center; padding:5px 10px;}
table thead tr td{font-size:24px; color:#cc7a29; font-family: 'Oswald', sans-serif;  padding:10px; border-bottom:1px solid #ccc; text-align:left;}
td { vertical-align: top; }

.container{position:relative; max-width:960px; margin:0 auto;}

header{background: url(img/bg_header.png) 0 0 repeat;}
header #spotlight{background:url(img/sporlight.png) top center repeat-y; padding-bottom:30px;}
header #logo{float:left; margin-left:30px;}

header #global{float:right; margin:40px 20px 0 0;}
header #global #share{color:#b5aaa8; text-shadow: 2px 2px 0 rgba(0, 0, 0, 1); margin-right:20px; padding-right:20px; border-right:1px solid #837a6b; display:inline-block;}
.lt-ie8 header #global #share{float:right;}
header #global #share .addthis_button_twitter{margin-left:20px;}
header #global form{display:inline;}
header #global .donate_btn{
   border:0;
   border-top: 2px solid #cf8f53;
   border-bottom: 2px solid #995c1f;
   background: #b86e25;
   background: -webkit-gradient(linear, left top, left bottom, from(#cc7a29), to(#b86e25));
   background: -webkit-linear-gradient(top, #cc7a29, #b86e25);
   background: -moz-linear-gradient(top, #cc7a29, #b86e25);
   background: -ms-linear-gradient(top, #cc7a29, #b86e25);
   background: -o-linear-gradient(top, #cc7a29, #b86e25);
   padding: 9.5px 19px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #fff;
   font-family: 'Oswald', sans-serif; 
   font-size:16px;
   text-transform:uppercase;
   text-decoration: none;
   vertical-align: middle;
}
.lt-ie8 header #global .donate_btn{float:right;}
header #global .donate_btn:hover{
   border-bottom: 2px solid #cf8f53;
   border-top: 2px solid #995c1f;
   background: #cc7a29;
   background: -webkit-gradient(linear, left top, left bottom, from(#b86e25), to(#cc7a29));
   background: -webkit-linear-gradient(top, #b86e25, #cc7a29);
   background: -moz-linear-gradient(top, #b86e25, #cc7a29);
   background: -ms-linear-gradient(top, #b86e25, #cc7a29);
   background: -o-linear-gradient(top, #b86e25, #cc7a29);
}

header nav{padding:20px 0 0 40px; clear:both;}
header nav img{float:left; margin-top:3px;}
header nav .nav_header, header nav ul{display:inline;}
header nav ul li{display:inline-block; width:80px; text-align:center; margin:0 20px;}
.lt-ie8 header nav ul li{float:left;}
header nav ul li.menu-item-207, header nav ul li.menu-item-182{width:110px;}
header nav ul li.menu-item-221{margin-right:0;}
header nav ul li a, header nav ul li a:visited{ font-family: 'Oswald', sans-serif; font-size:16px; color:#cfcfcf; text-transform:uppercase; text-shadow: 1px 1px 1px rgba(000, 000, 000, 0.5); line-height:1;}
header nav ul li a:hover, header nav ul li.current_page_item a, header nav ul li.current_page_parent a, header nav ul li.current-page-ancestor a{color:#e58a2e;}

#masthead{
	position:relative;
	width:930px; 
	height:320px; 
	margin-top:-110px;
	background-image: linear-gradient(bottom, rgb(242,242,242) 0%, rgb(255,255,255) 67%);
	background-image: -o-linear-gradient(bottom, rgb(242,242,242) 0%, rgb(255,255,255) 67%);
	background-image: -moz-linear-gradient(bottom, rgb(242,242,242) 0%, rgb(255,255,255) 67%);
	background-image: -webkit-linear-gradient(bottom, rgb(242,242,242) 0%, rgb(255,255,255) 67%);
	background-image: -ms-linear-gradient(bottom, rgb(242,242,242) 0%, rgb(255,255,255) 67%);
	background-image: -webkit-gradient(	linear,	left bottom, left top, color-stop(0, rgb(242,242,242)), color-stop(0.67, rgb(255,255,255)));
	border:5px solid #fff;
	-webkit-box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.3);
	-moz-box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.3);
	box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.3);
	bottom:-160px;
	z-index:200;
}
.ie #masthead{background:transparent url(img/bg_masthead.png) bottom left repeat-x;}
#masthead #rotator{width:930px;height:358px;top:-78px;z-index:201;background:url(img/slider_bg.png) bottom right no-repeat;overflow:hidden;position:relative;}
.safari #masthead #rotator{top:-37px;}
.chrome #masthead #rotator{top:-37px;}
.lt-ie8 #masthead #rotator{top:-37px;}
#masthead #rotator .slide{width:930px;height:358px;float:left;}
#masthead #rotator img{float:left;}
#masthead #prev, #masthead #next{
	position:absolute; 
	top:130px; 
	left:-16px; 
	display:block; 
	width:40px; 
	height:50px;
	background:url(img/slider_nav.png) 0 0 no-repeat;
	color:#e6bd94;
	font-family: 'Oswald', sans-serif;
	font-size: 30px;
	line-height:1;
	text-align:center;
	z-index:5000;
}
#masthead #next{background-position:top right; left:auto; right:-16px;}
#masthead .copy{float:left; width:330px; margin:60px 0 0 30px;}
#masthead h1{margin:0;font-family: 'Oswald', sans-serif; font-weight:700; letter-spacing:0; font-size:40px; text-transform:uppercase;}
#masthead h1 span{font-size:60px; color:#4c3f36; display:block;}
#masthead p{margin:10px 0 20px 0; width:330px; font-family: 'Oswald', sans-serif; font-weight:300; font-size:14px; text-transform:uppercase; color:#000;}

.notification-wrapper{margin-top:120px; margin-right:20px; text-align:center; font-weight:bold; font-size:16px; border-top:2px solid #cc7a29; border-bottom:2px solid #cc7a29;}
.notification p{margin:0;}
.notification{margin:3px 0; background:#f6f6f6; padding:10px 0; width:940px; overflow:hidden;}


.spacer{height:100px;}

.widget_text{display:block; float:left; width:300px; margin:30px 20px 0 0; font-size:14px; line-height:1.8;}
.widget_text h2{text-transform:uppercase; font-size:20px;}
.widget_text img{margin-bottom:20px;}
.widget_text#text-3{margin-right:0;}
.widget_text#text-3 img{margin-top:-4px;}
.widget_text#text-2 img{margin-top:-10px;}

div[role=main]{ 
	clear:both;
	position:relative;
	z-index:100;
	background-image: linear-gradient(bottom, rgb(242,242,242) 0%, rgb(255,255,255) 90%);
	background-image: -o-linear-gradient(bottom, rgb(242,242,242) 0%, rgb(255,255,255) 90%);
	background-image: -moz-linear-gradient(bottom, rgb(242,242,242) 0%, rgb(255,255,255) 90%);
	background-image: -webkit-linear-gradient(bottom, rgb(242,242,242) 0%, rgb(255,255,255) 90%);
	background-image: -ms-linear-gradient(bottom, rgb(242,242,242) 0%, rgb(255,255,255) 90%);
	background-image: -webkit-gradient(	linear,	left bottom, left top, color-stop(0, rgb(242,242,242)), color-stop(0.90, rgb(255,255,255)));
	-webkit-box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.3);
	-moz-box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.3);
	box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.3);
	padding:60px 0;
}

div[role=main] article{float:left; width:620px; line-height:1.8;}
div[role=main] article img.alignleft{border:1px solid #ccc; background:#fff; padding:4px; float:left; margin:0 20px 20px 0;}

div[role=main].events article, div[role=main].news article{border-top: 1px solid #e6e6e6; padding-top:20px; margin-bottom:8px; margin-top: 12px;}
div[role=main].events article .description{width:380px; float:left;}
div[role=main].events article .description p{margin-top:0;}
div[role=main].events article .details{float:right; width:200px;}
div[role=main].events article .details strong{display:block;}
div[role=main].events article .details .date, div[role=main].events article .details .time{float:left; margin-right:30px;}
div[role=main].events article .details .location{display:block; clear:both; padding-top:20px;}

div[role=main] .thumbnail{border: 1px solid #e6e6e6; padding:5px; float:left; margin:0 20px 0 0;}
div[role=main] .map{border: 1px solid #e6e6e6; padding:5px; margin:0 20px 0 0;}
div[role=main] .excerpt{float:left; width:440px;}
div[role=main] .excerpt h2{margin-bottom:5px;}
div[role=main] .excerpt .meta{color:#999; font-size:11px;}

div[role=main] .member{border-top:1px solid #ccc; padding-top:20px; margin-bottom:20px;}
div[role=main] .member em{margin-right:30px; font-size:14px;}
div[role=main] .member a{font-size:14px;}

div[role=main] #directions{text-align:center; padding:20px 0;}
div[role=main] #directions input{margin-right:10px;}

aside{float:right; width:240px;}

#sidenav{width:240px; margin-bottom:40px}
#sidenav ul{border-top:1px dotted #cbc8c5; list-style:none; padding:0;}
#sidenav ul li{border-bottom:1px dotted #cbc8c5; padding:1px 0; background:none;}
#sidenav ul li a{color:#4d4136; text-decoration:none; display:block; padding:8px; font-size:14px;}
#sidenav ul li.current_page_item a{background:#e7e6e5;}

#faces{position:relative; width:240px; text-align:center; background:url(img/bg_faces.png) center 185px no-repeat; margin-bottom:40px;}
#faces img{padding:20px 0;}
#faces h3{text-transform:uppercase;}
#faces h4{font-family: 'Asap', sans-serif; color:#009fdd; font-weight: 700; }
#faces #faces_prev, #faces #faces_next, #faces #faces_prev:visited, #faces #faces_next:visited{
	position:absolute; 
	top:175px; 
	left:0; 
	z-index:5000;
	display:block; 
	width:30px; 
	height:30px; 
	background:url(img/faces_nav.png) 0 0 no-repeat;
	font-family: 'Oswald', sans-serif;
	font-size: 26px;
	line-height:0.8;
	color:#fff;
}
#faces #faces_next{left:auto; right:0;}

#contact{font-size:14px; line-height:1.8; margin-bottom:40px;}

footer{clear:both;background: url(img/bg_footer.png) 0 0 repeat; padding:30px 0; font-size:12px;}
footer nav li{display:inline-block; margin:0 20px 20px 0;}
.lt-ie8 footer nav li{float:left;}
footer #logo{float:left;}
.lt-ie8 footer #logo{clear:left;}
footer #address{float:left; margin:0 30px;}
footer #address .street{display:inline-block; padding-bottom:5px;}
footer #copyright{float:right;}

.phone{background:url(img/phone.png) 0 0 no-repeat; padding:3px 0 3px 25px; margin-right:20px;}
.fax{background:url(img/fax.png) 0 0 no-repeat; padding:3px 0 3px 25px; margin-right:20px;}
.email{background:url(img/email.png) 0 3px no-repeat; padding:3px 0 3px 25px;}

.caption{font-size:16px; font-family: 'Asap', sans-serif; font-style: italic; margin-bottom:30px; line-height:1.5;}

.btn, .btn:visited{
	font-family: 'Oswald', sans-serif; 
	font-size:16px;
	text-transform:uppercase;
	background:#cc7a29;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color:#fff;	
	padding:7px 10px;
	display:inline-block;
	vertical-align:middle;
}
div[role=main] .btn, div[role=main] .btn:visited{font-size:14px; font-family:'Asap', sans-serif; text-transform:none; padding:2px 10px;}

input[type="text"]{border:1px solid #f5f5f5; color:#999; padding:5px; height:20px;}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-device-width : 320px) and (max-device-width : 480px) {

}

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clear{clear:both;}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } 
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}