/*
Creates an image in a box with text below and shadowed outline 
Use as follows:
<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>The Troll's tongue in Hardanger, Norway</p>
  </div>
</div>

*/
div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.container {
  text-align: center;
  padding: 10px 20px;
}

div.noshow{
	display: none;
}

/* 
Styling the buttons of the courses
*/


.googleform {
	background-color: #95d097;
	color: black;
	padding: 2px 6px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	transition-duration: 0.4s;
	border-width: 0;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.22), 0 2px 2px 0 rgba(0,0,0,0.17);
}

.googleform:hover {
	background-color: #5fb963;
}

/*
Creates an R2 did you know box; a table containing header with R2D2 image
*/
div.r2didyouknow table {
	border-collapse:collapse;
	border-left:solid 1px black;
	border-right:solid 1px black;
	border-top:solid 1px black;
	border-bottom:solid 1px black;
	margin:auto;
	background-color:#f2f2f2;
	width: 85%; 
	padding: 6px;
}

div.r2didyouknow th {
	color:#C45A58;
	height: 32px;
	border-bottom:solid 1px black;
	background-image: url("../images/R2d2_logo.png");
	background-repeat: no-repeat; 
	background-position: left; 
}
.course_button {
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
    border-left: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.22), 0 2px 2px 0 rgba(0,0,0,0.17);
}

.course_button:hover {
	box-shadow: 0 5px 5px 0 rgba(0,0,0,0.28), 0 2px 2px 0 rgba(0,0,0,0.21);
}

.course_permalink {
    font: 16px Arial;
    text-decoration: none;
    background-color: #EEEEEE;
    color: #333333;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
    border-left: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: 0 5px 5px 0 rgba(0,0,0,0.28), 0 2px 2px 0 rgba(0,0,0,0.21);
}

.course_permalink:hover {
    background-color: #DDDDDD;
    box-shadow: 0 5px 5px 0 rgba(0,0,0,0.28), 0 2px 2px 0 rgba(0,0,0,0.21);
}
/* 
Images are parsed into an reference external class; we want these centered and block just
like their annotation text in strong

a.reference.external strong{
	display: block;
	text-align: center;
  	padding: 10px 10px;	
}


img{
	display: block;
    margin-left: auto;
    margin-right: auto; 
  	padding: 10px 10px;	
}
*/
/*
Except for the logo
*/
img {
	border: lightblue solid 1px;
}


img[src="_images/R2d2_logo.png"]{
	display: inline;
	float: left;
	border: #333333;
}

.citation_txt{
	font: italic 10px Arial;
	color: #AAAAAA;
}