/* Pretoria Riempies stylesheet */
body {background-image:url(../images/bg-light.jpg);}
.center {text-align:center; margin-left:auto; margin-right:auto;}
/* use the following when we don't know the size of the element to be centered*/
/*.centered { position: relative; left: 50%; transform: translate(-50%, -50%); } */
.left {float:left; margin-left:3%;}
.right {float:right; margin-right:3%;}
.clear{clear:both;}
.picture { border: 2px solid #cccccc; padding:5px; box-shadow: 5px 5px 15px #cccccc;}
/* .grow is used to create an image grow effect on hover */
.grow {transition: all 0.6s; overflow:hidden;}
.grow:hover {transform: scale(1.05);}
.idnumber {display:none;}
.button-colored {background: #bbbb55; /*#ff7f01;*/ border-radius:8px;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 5px #cccccc;} /* orange */
textarea, input {width:229px;}
footer {border-top: 1px solid #888888;font-style: italic;font-size: 0.95em;}
/* accordion */
.accordion { 
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: 2px solid #888888;
    border-radius: 8px;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
	width:60%;
	display:block;
	margin: 0 auto 12px auto;
	text-align:center;
}

/*.active, .accordion:hover { background-color: #ccc; }*/

.panel {
    padding: 0 18px;
    background-color: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
	font-size:0.9em;
}
.panel p {
	margin-top: 0px;
}
/* /accordion */

header img { background-color:#eeeeee; padding:1%; border-radius:8px; }

input, textarea { color: #444444; }