body {
	background-color: rgb(131, 210, 231);
	background-color: #f0f0f0;

	/*font-family: 'Oleo Script', 'Open Sans', sans-serif;*/
	font-family: 'Open Sans', sans-serif;

	/*
	font-family:"Lucida handwriting", "Snell Roundhand", "Helvetica Neue",Arial,Helvetica,sans-serif;

	color: #333;
	font-size: 16px;
	*/

	/*margin: 4px 4px 4px 4px;
	border: 2px solid rgb(255, 0, 0);*/
}


.links {
	margin: 80px 80px 10px 40px;
  display: inline-table;
}


.eduLink {
   font-size: 26px;
}

.link-desc {
   font-size: 12px;
}


#footer {
   margin:0px;
   position:absolute;
   left:0%;
   right:0%;
   bottom:0%;
   height:60px;
   background:#6cf;
   font-size: 13px;
   padding-left: 10px;
}

span.RPi {
	font-size: 13px;
}

.photo-album {
	position: relative;
	width:768px;
	right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;

	height: 300px;
	/*border: 1px solid rgb(0, 26, 255);*/
	/*display: inline-table;*/
}

img {
	border: 1px solid #000000;
}


.photo-album .landscape, .portrait {
    position: absolute;
	text-decoration: none;
	border: 1px solid #BFBFBF;
	background-color: rgba(255, 255, 255, 0.8);
	/*font-size: 0.7em;*/
	-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
	-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
	box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);

	/*-webkit-transition: border 0.15s;
	-moz-transition: border 0.15s;
	transition: border 0.15s;*/

	/*-webkit-transition: transform 0.5s, width 0.5s, left 0.5s, top 0.5s, font 0.5s, box-shadow 0.5s, z-index 0.5s, padding 0.5s;
	-moz-transition: transform 0.5s, width 0.5s, left 0.5s, top 0.5s, font 0.5s, box-shadow 0.5s, z-index 0.5s, padding 0.5s;
	transition: transform 0.5s, width 0.5s, left 0.5s, top 0.5s, font 0.5s, box-shadow 0.5s, z-index 0.5s, padding 0.5s;*/

	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}


/*.photo-album .landscape:not:hover, .portrait:not(:active):hover{*/
.photo-album .landscape:hover, .photo-album .portrait:hover{
	z-index: 999;
	border-color: #6F6F6F;
    border: 2px solid #0A0AFC;
	-webkit-box-shadow: 6px 6px 15px rgba(0,0, 0, 0.95);
	-moz-box-shadow: 6px 6px 15px rgba(0,0, 0, 0.95);
	box-shadow: 6px 6px 15px rgba(0,0, 0, 0.95);
}


.toggle {
	display:none;
}

/*.photo-album .landscape:active{*/
.photo-album .toggle:checked + .landscape {
	z-index: 999;
	border: 1px solid #6A6A6A;
	-webkit-box-shadow: 20px 20px 30px rgba(0,0, 0, 0.5);
	-moz-box-shadow: 20px 20px 30px rgba(0,0, 0, 0.5);
	box-shadow: 20px 20px 30px rgba(0,0, 0, 0.5);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
	width:560px;
	left:12%;
	top:30%;
	padding: 3.5% 3.5% 4.5% 3.5%;
	font-size: 21pt;
	border-radius: 16px;
}

/*.photo-album .portrait:active{*/
.photo-album .toggle:checked + .portrait {
	z-index: 999;
	border: 1px solid #6A6A6A;
	-webkit-box-shadow: 20px 20px 30px rgba(0,0, 0, 0.5);
	-moz-box-shadow: 20px 20px 30px rgba(0,0, 0, 0.5);
	box-shadow: 20px 20px 30px rgba(0,0, 0, 0.5);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
	width:500px;
	left:12%;
	top:2%;
	padding: 3.5% 3.5% 4.5% 3.5%;
	font-size: 19pt;
	border-radius: 16px;
}


.photo-album .small {
	width: 120px;
	padding: 0.75% 0.8% 0.96% 0.75%; /* Some round off issue maybe, so 0.8 asymmetry is required*/
	font-size: 4.6pt;
	border-radius: 5px;
}
.photo-album .small:hover {
	border-radius: 6px;
}


.photo-album .medium {
	width: 160px;
	padding: 1.0% 1.0% 1.5% 1.0%;
	font-size: 6pt;
	border-radius: 5px;
}
.photo-album .medium:hover {
	border-radius: 6px;
}


.photo-album .large {
	width: 220px;
	padding: 1.25% 1.25% 1.5% 1.25%;
	font-size: 8pt;
	border-radius: 7px;
}
.photo-album .large:hover {
	border-radius: 8px;
}


.photo-album .img1 {
	left: -2%;
	top: 5%;
	-webkit-transform: rotate(-25deg);
	-moz-transform: rotate(-250deg);
	transform: rotate(-22deg);
	z-index:10;
}


.photo-album .img2 {
	left: -2%;
	top: 50%;
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	transform: rotate(-4deg);
	z-index:32;
}

.photo-album .img3 {
	left: 12%;
	top: 2%;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	transform: rotate(2deg);
	z-index:30;
}


.photo-album .img4 {
	left: 25%;
	top: 14%;
	-webkit-transform: rotate(-26deg);
	-moz-transform: rotate(-26deg);
	transform: rotate(-26deg);
	z-index:31;
}


.photo-album .img5 {
	left: 37%;
	top: 2%;
	-webkit-transform: rotate(9deg);
	-moz-transform: rotate(9deg);
	transform: rotate(9deg);
	z-index:2;
}


.photo-album .img6 {
	left: 14%;
	top: 47%;
	-webkit-transform: rotate(19deg);
	-moz-transform: rotate(19deg);
	transform: rotate(19deg);
	z-index:93;
}

.photo-album .img7 {
	left:41%;
	top:35%;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	transform: rotate(-5deg);
	z-index:95;
}

.photo-album .img8 {
	left: 62%;
	top: 24%;
	-webkit-transform: rotate(-8deg);
	-moz-transform: rotate(-8deg);
	transform: rotate(-14deg);
	z-index:78;
}

.photo-album .img9 {
	left: 60%;
	top: 61%;
	-webkit-transform: rotate(18deg);
	-moz-transform: rotate(18deg);
	transform: rotate(28deg);
	z-index:94;
}

.photo-album .img10 {
	left: 76%;
	top: 2%;
	-webkit-transform: rotate(21deg);
	-moz-transform: rotate(21deg);
	transform: rotate(-18deg);
	z-index:80;
}

.photo-album .img11 {
	left:25%;
	top: 72%;
	-webkit-transform: rotate(-8deg);
	-moz-transform: rotate(-8deg);
	transform: rotate(-19deg);
	z-index:94;
}

.photo-album .img12 {
	left: 56%;
	top: -2%;
	-webkit-transform: rotate(18deg);
	-moz-transform: rotate(18deg);
	transform: rotate(18deg);
	z-index:2;
}

.photo-album .img13 {
	left:77%;
	top: 53%;
	-webkit-transform: rotate(18deg);
	-moz-transform: rotate(18deg);
	transform: rotate(14deg);
	z-index:82;
}

.photo-album .img14 {
	left:43%;
	top: 105%;
	-webkit-transform: rotate(-12deg);
	-moz-transform: rotate(-12deg);
	transform: rotate(-12deg);
	z-index:96;
}

.photo-album .img15 {
	left:73%;
	top: 113%;
	-webkit-transform: rotate(-28deg);
	-moz-transform: rotate(-28deg);
	transform: rotate(-28deg);
	z-index:83;
}

span.RPi {
	display: block;
	align-items: right;
	text-align: right;
	align-content: right;
	align-self: right;
}

img.RPi {
	width: 100px;
}
