form { text-align: center; color:#474339 }
hr {color: #000000; height: 1px }
a:hover {color: #ff0000; text-decoration: none}
a img {border: none; }
body {background-image:url('austen.jpg'); margin-left: 15%; margin-right: 15%; margin-top: 1%; height: 101%;} 
p,h1,h2,h3, input, words { color:#474339}
footer { color:#474339;  font-size:80% }
l1 {font-size:130%; color:#474339 }

#overlay {
z-index:1000;
position:absolute;
top:10%;
width:30em;
height:34em;
left:30%;
margin: 0 auto; 
text-align: left;
border-style:double;
padding-left:20px;
padding-right:20px;
background-image:url('austen.jpg');
opacity:0.99;
-moz-opacity:0.99;
filter:alpha(opacity=99);
visibility:hidden;
}

#fadeout{
z-index:500;
position:absolute;
top:0;
bottom:0;
left:0;
width:100%;
height: 100%;
background:#000;
opacity:0.55;
-moz-opacity:0.55;
filter:alpha(opacity=55);
visibility:hidden;
}

.wrapper {
width: 189px;
height: 300px;
background: #000;
position: relative;
margin: 20px;
}

.ribbon-wrapper-blue {
width: 180px;
height: 172px;
overflow: hidden;
position: absolute;
top: -4px;
right: -4px;
}

.ribbon-blue {
  font: bold 14px;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 45px;
  width: 235px;
  background-color: ##99CCFF;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#99CCFF), to(#7AA3CC)); 
  background-image: -webkit-linear-gradient(top, #99CCFF, #7AA3CC); 
  background-image:    -moz-linear-gradient(top, #99CCFF, #7AA3CC); 
  background-image:     -ms-linear-gradient(top, #99CCFF, #7AA3CC); 
  background-image:      -o-linear-gradient(top, #99CCFF, #7AA3CC); 
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
    white-space: nowrap;
}

.ribbon-blue:before, .ribbon-blue:after {
  content: "";
  border-top:   7px solid #000066;   
  border-left:  7px solid transparent;
  border-right: 7px solid transparent;
  position:absolute;
  bottom: -7px;
}

.ribbon-blue:before {
  left: 0;
}
.ribbon-blue:after {
  right: 0;
}
#top, #bottom, #left, #right {
	background: #eeeeee;
	position: fixed;
	}
#left, #right {
		top: 0; bottom: 0;
		width: 8px;
		}
#left { left: 0; }
#right { right: 0; }
		
#top, #bottom {
		left: 0; right: 0;
		height: 8px;
		}
#top { top: 0; }
#bottom { bottom: 0; }
@media 
/* Fairly small screens including iphones */
only screen and (max-width: 500px),

/* iPads */
only screen and (min-device-width: 768px) and (max-device-width: 1024px) 
{
	#top, #bottom, #left, #right { display: none; }
}