/**
 * Project:     West Vancouver Concert Band
 * Date:        2019-06-10
 * revised:     2018-11-05
 * File name:   westvanband.css * Description: main style sheet for all pages (excludes nav style)
 */

/*--- selectors ---*/
html {
	font-size: 62.5%; /* Resets 1em to 10px, or does it */
	font-weight: normal;
	overflow: scroll; /* Firefox: force vertical scrollbar to display on short pages */
}

body {
	margin-top: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #b9c4b8;
}

h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #466E78;
	font-size: 1.6em;
	font-weight: bolder;
	margin: 0 0 15px 0;
}

h2, h3 {
	font-family: Arial, Helvetica, sans-serif;
	color: #466E78;
	font-size: 1.2em;
	margin: 0;
	padding: 10px 0 10px 0 !important;
}

h3 {
	font-size: 1.0em;
}

p {
	line-height: 160%;
	padding: 0;
	margin: 0 0 15px 0;
}

#sub-head {
	font-size: 1.3em;
	font-style: italic;
	margin: -5px 0 5px -15px;
}

img {
	border: none;
}

caption {
	text-align: left;
}

table {
	border-collapse: collapse;
	font-size: 0.8em;
}


/* --- Page Layout --- */
#page-wrapper {
	width: 960px;
	margin: 0 auto;
	background-color: #b9c4b8;
}

#page-header {
	width: 960px;
	height: 145px;
	background: #909984 url("../images/header/wvb-header.jpg") no-repeat;
}

#content-wrapper {
	width: 960px;
	margin: 15px 0;
	padding: 0;
	text-align: left;
}

#sidebar {
	position: relative;
	float: left;
	width: 195px;
	padding: 10px 0 25px 0;
	font-size: 1.5em;
	background-color: #d4c88e;
}

#content {
	width: 690px;
	margin-left: 210px;
	padding: 30px;
	background-color: #f4f6c7;
	font-size: 1.7em;
	line-height: 150%;
}


/* site into */
p.intro-tag {
	font-size: 24px;
	font-weight: bold;
	color: #466E78;
}


div#intro {
	position: relative;
	margin-bottom: 30px;
}

div#intro-text-1 {
	position: absolute;
	top: 80px;
	left: 40px;
}

div#intro-text-1 h1 {
	font-size: 30px;
	line-height: 120%;
	color: #fff;
}

div#intro-text-1 p {
	font-size: 26px;
	padding-left: 350px;
	color: #fff;
}

div#intro-text-2 {
	position: absolute;
	top: 350px;
	left: 240px;
	margin-bottom: 0;
}

div#intro-text-2 p {
	margin-bottom: 0;
	font-size: 26px;
	line-height: 130%;
	font-style: italic;
	color: #fff;
}


/* radii and drop-shadows */
div#page-header,
div#sidebar,
div#content,
div#page-footer {
	border-radius: 12px;
	-webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.40);
	-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.40);
	box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.40);
}

/* --- image bullets --- */
.image-bullet ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.image-bullet li {
	background: url("../images/bullets/note-bullet.png") no-repeat;
	background-position: 0 -3px;
	padding-left: 25px;
	padding-bottom: 10px;
}

/* --- section formatting --- */

/* Page Footer */
div#page-footer {
	margin: 0;
	padding: 1.5em;
	text-align: center;
	font-style: normal;
	font-size: 1.5em;
	line-height: 120%;
	color: #505028;
	background-color: #b7b493
}


/* Sidebar */
#sidebar-content {
	padding: 10px 5px;
}

#next-concert, #sidebar-extra {
	font-size: 0.9em;
	color: #6E5A1E;
}

#next-concert #concert-details {
	margin-top: 5px;
}

#next-concert #no-concert-msg {
	padding-top: 0;
	margin-top: -5px;
}

#sidebar-content h2,
#sidebar-content ul,
#sidebar-content li {
	padding-left: 0;
	margin-left: 0;
}

#sidebar-extra ul {
	padding-left: 15px;
}


/* instruments page */
#info {
	margin: 30px 20px 0 20px;
	padding: 10px 0 0 0;
	border-top: 1px dotted #64643C;
	line-height: 140%;
}

#links {
	margin-left: 270px;
}

#instruments-left {
	width: 300px;
	margin: 0 0 0 20px;
	padding: 0;
}

#instruments-right {
	width: 300px;
	margin: 0 0 0 365px;
}

.instruments li {
	padding-bottom: 2px;
}

li.instruments {
	margin-bottom: 14px;
}

.instruments ul {
	padding-bottom: 10px;
}

.instruments p {
	margin: 0 0 5px 0;
	background-color: #f3dcaa;
	padding-left: 25px;
}

.instruments h1, h2, h3 {
	padding-left: 20px;
}

/* the band page */
div#the-band-images img {
	margin-bottom: 5px;
}

/* home page concerts */
1#concert-intro {
	margin: 30px 0 20px 0;
}

.concert-1,
.concert-2 {
	font-style: italic;
	font-weight: bold;
	color: blue;
}

.concert-1 {
	color: red;
}


/* --- images --- */
figure, caption {
	margin: 0;
	padding: 0;
}

figure img {
	display: block;
}

div.images {
	margin: 15px 0;
}

/* float images with captions */
figure.fig-left {
	float: left;
	margin-right: 10px;
	/* background-color: violet; */
}

figure.fig-right {
	float: right;
	margin-left: 10px;
}

/* center image with caption */
figure.fig-center img {
	margin: 0 auto ;
}

/* center figcaption text */
figcaption {
	text-align: center;
	padding: .4em 0 .6em 0;
}


/* float images without captions */
img.float-right {
	margin-left: 10px;
}

img.float-left {
	margin-right: 10px;
}

/* center images without captions */
img.center {
	margin: 0 auto;
	display: block;
}

/* image border */
img.image-border {
	border: 1px solid #999;
	background-color: #EEE;
	-webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.30);
	-moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.30);
	box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.30);
}

img.image-border {
	padding: 10px;
}

.center {
	margin: 10px auto 0 auto;
}


/* --- tables --- */
#concert-schedule, #practice-schedule {
	width: 735px;
	margin: 0 -25px 5px -25px;
	line-height: 120%;
}

/* table header for all tables */
th {
	background-color: #c7a486;
	font-weight: bold;
	text-align: center;
}

td, th {
	padding: 7px 4px;
}

#practice-schedule #th1 {
	width: 12%;
}

#practice-schedule #th2 {
	width: 8%;
}

#practice-schedule #th3 {
	width: 40%;
}

#practice-schedule #th4 {
	width: 39%;
}

#practice-schedule td{
	border-right: 1px solid #C8C8A0;
}

/* row colors */

/* every 2nd row starting at 2rd row */
table#concert-schedule tr:nth-child(2n+2),
table#directors tr:nth-child(2n+2) {
	background-color: #DCDCB4;
}


/* every 2nd row starting at 3rd row */
table#concert-schedule tr:nth-child(2n+3),
table#directors tr:nth-child(2n+3) {
	background-color: #D2D2AA;
}

table#directors {
	margin: 30px auto 20px auto;
	box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.30);
}

#directors td {
	padding: 5px 20px;
}

table#contact {
	font-size: 1em;
	margin: 0 0 20px 20px;
}

table#contact td {
	padding: 0;
	line-height: 170%;
}

table#contact td:first-child {
	text-align: right;
	padding-right: 10px;
}


/* --- flotsam & jetsam --- */
.image-text {
	margin: 0;
	padding: 0;
	text-align: center;
}

p#nojs {
	line-height: 180%;
	padding: 5px;
	border: 1px solid #42647a;
	background-color: #f4b364;
	border-radius: 4px;
	text-align: center;
}

figcaption, caption, .small-text, #info {
	font-size: 0.9em;
	color: #777;
	line-height: 140%;
}

.join {
	text-align: right;
	margin-top: -10px;
	padding-left: 25px;
	font-weight: bold;
	color: #5544A3;
}

.float-right {
	float: right;
}

.float-left {
	float: left;
}

.clear-both {
	clear: both;
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

.contain-float {
	overflow: auto;
}

.ph {
	display: inline-block;
	margin-bottom: -2px;
}