/* 
 * CSS for Sailboat Whachamacallit Flowchart
 *
 * Created by Wade J. Love
 *
 * Sailboat Whachamacallit Flowchart, its source code, and all related images
 * are released under the Creative Commons Attribution-NonCommercial-ShareAlike 
 * 4.0 International License. (http://creativecommons.org/licenses/by-nc-sa/4.0/)
 *
 * This means you are free to share and adapt this work as long as you give appropriate credit,
 * do not use any material for commercial use, and distribute your contributions under the same
 * license.  See the links for details.</p>
 *
 */
 
/* Generic properties */
html, body {
	font-family: Calibri, Arial, sans-serif;
	margin: 0;
	height: 100%;
	background-color: #202050;
	overflow: auto;
}

#centerContainer {
	background-color: #CCCCCC;
	min-height: 100%;
}

#centerContainer h1,h2,p {
	padding-left: 3%;
	padding-right: 3%;
}

#header h1 {
	margin: 0px;
}

#breadcrumbWrapper {
	background-color: #757575;
	color: #FFFFFF;
	border-radius: 5px;
	padding-left: 0.4ch;
	width: 99.5%;  /* No, I don't know why.  But 100% causes it to spill over the right edge */
	display: inline-block;
}

.breadcrumb, .aftercrumb {
	vertical-align: middle;
}
.breadcrumb {
	padding: 6px;
}
.aftercrumb {
	margin: 0px;
	padding: 0px;
}


#main {
	background-color: #FFFFFF;
	padding-top: 1em;
	padding-bottom: 2em;
}

#footer {
	padding-bottom: 1em;
}

#stepWrapper {
	padding-left: 3%;
	padding-right: 3%;
	text-align: center;
}

.stepFigure {
	display: inline-block;
	vertical-align: top;
}

.stepImage, .stepCaption, .endFlowImage {
	border: solid 3px #000088;
	border-radius: 10px;
}
.stepImage, .endFlowImage {
	background-color: #CCCCCC;
	width: 100%;
}
.stepCaption {
	width: 94%;
	padding: 3%;
}

.disabled img, .disabled figcaption {
	background: rgba(255,0,0,.05);
	color: #CC0000;
}

#bragIcons {
	text-align: center;
}
#bragIcons a {
	text-decoration: none;
}

/* device specific properties */
/* large */
@media all and (min-device-width: 1025px) {
	h1 {font-size: 2.2em;}
	h2 {font-size: 2.0em;}
	p,span,figcaption   {font-size: 1.1em;}
	#closeX {font-size: 1.5em;}
	#footer p {font-size: 1.0em;}
	
	#centerContainer {
		margin-left: 25%;
		width: 50%;
	}
	
	#aboutWrapper {
		position: fixed;
		top: 0;
		left: 0;
	}
	
	.stepFigure {
		margin: 2%;
		width: 29%;
	}
	.endFlowImage {
		width: 45%;
	}
}

/* medium */
@media all and (min-device-width: 481px) and (max-device-width: 1024px) {
	h1 {font-size: 2.8em;}
	h2 {font-size: 2.2em;}
	p,span,figcaption  {font-size: 1.6em;}
	#closeX {font-size: 2.0em;}
	#footer p {font-size: 0.8em;}
	
	#centerContainer {
		margin-left: 10%;
		width: 80%;
	}
	
	#aboutWrapper {
		postion: absolute;
		bottom: 0;
		left: 10%;
	}
	
	.stepFigure {
		margin: 1%;
		width: 29%;
	}
	.endFlowImage {
		width: 60%;
	}
	
	#aboutModal {
		height: 100%;
		overflow: scroll;
	}
}

/* small */
@media all and (max-device-width: 480px) {
	h1 {font-size: 3.2em;}
	h2 {font-size: 2.8em;}
	p,span,figcaption   {font-size: 2.5em;}
	#closeX {font-size: 2.8em;}
	#footer p {font-size: 0.8em;}
	
	#centerContainer {
		margin-left: 3%;
		width: 94%;
	}
	
	#aboutWrapper {
		postion: absolute;
		bottom: 0;
		left: 10%;
	}
	
	.stepFigure {
		margin: 2%;
		width: 44%;
	}
	.endFlowImage {
		width: 80%;
	}
	
	#aboutModal {
		height: 100%;
		overflow: scroll;
	}
}

/* Extra classes for focus */
.stepImage.isfocus, .stepCaption.isfocus {
	border-style: dotted
}