/* ---------------------------------------------------------------------- */
/* All page                                                               */
/* ---------------------------------------------------------------------- */
* 
{
	box-sizing: border-box;
}
/* ---------------------------------------------------------------------- */
/* Header                                                                 */
/* ---------------------------------------------------------------------- */
.header
{
	width: 100%;
	padding: 10px;
	background-color:yellow;
	text-align: center;
}
/* ---------------------------------------------------------------------- */
/* Page layout                                                            */
/* ---------------------------------------------------------------------- */
.column 
{
	float: left;
	width: 33.33%;
	padding: 10px;
    max-height:400px;
    overflow-y:auto;
}
.left
{
	width: 15%;
}
.middle 
{
	width: 50%;
}
.right 
{
	width: 35%;
}
/* ---------------------------------------------------------------------- */
/* Responsive layout - makes the three columns stack on top of each other */
/* instead of next to each other                                          */
/* ---------------------------------------------------------------------- */
@media screen and (max-width: 600px) 
{
	.column 
	{
		width: 100%;
	}
}
/* ---------------------------------------------------------------------- */
/* Left column                                                            */
/* ---------------------------------------------------------------------- */
ul, li 
{
    list-style:none;
    padding:0;
    margin:0;
}
li
{
    font-size: 18px;	
    font-weight: bold;
}
li:nth-child(odd) 
{ 
background: #aaa; 
}
.listWrapper 
{
    max-height:100px;
    overflow-y:auto;
}
/* ---------------------------------------------------------------------- */
/* middle section                                                         */
/* ---------------------------------------------------------------------- */
.widthSet 
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.heightSet 
{
    max-height: 375px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
/* ---------------------------------------------------------------------- */
/* Right column                                                           */
/* ---------------------------------------------------------------------- */
.photolabel
{
    font-size: 20px;	
    font-weight: bold;
	text-align: center;
	padding: 10px;
}
.phototext
{
    font-size: 18px;	
    font-weight: bold;
	width: 100%;
	height: 200px;
	resize: none;
}
.parent 
{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
}
.buttonSave
{
	box-shadow:inset 0px 1px 0px 0px #54a3f7;
	background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
	background-color:#007dc1;
	border-radius:3px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:19px;
	font-weight:bold;
	padding:10px 40px;
	text-decoration:none;
	text-shadow:0px 1px 0px #154682;
}
.buttonSave:hover 
{
	background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
	background-color:#0061a7;
}
.buttonSave:active 
{
	position:relative;
	top:1px;
}
.buttonBack 
{
	box-shadow:inset 0px 1px 0px 0px #54a3f7;
	background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
	background-color:#007dc1;
	border-radius:3px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:19px;
	font-weight:bold;
	padding:10px 14px;
	text-decoration:none;
	text-shadow:0px 1px 0px #154682;
}
.buttonBack:hover 
{
	background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
	background-color:#0061a7;
}
.buttonBack:active 
{
	position:relative;
	top:1px;
}
.buttonForward 
{
	box-shadow:inset 0px 1px 0px 0px #54a3f7;
	background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
	background-color:#007dc1;
	border-radius:3px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:19px;
	font-weight:bold;
	padding:10px 14px;
	text-decoration:none;
	text-shadow:0px 1px 0px #154682;
}
.buttonForward:hover 
{
	background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
	background-color:#0061a7;
}
.buttonForward:active 
{
	position:relative;
	top:1px;
}
/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */
.footer
{
	width: 100%;
	padding: 2px;
	background-color:yellow;
}
.footer_p
{
    font-size: 14px;	
    font-weight: bold;
}
/* ---------------------------------------------------------------------- */
/* other                                                                  */
/* ---------------------------------------------------------------------- */
.row:after 
{
	content: "";
	display: table;
	clear: both;
}