body {

        background-color: rgba(240,248,255,0.3);
	width:650px;
	font-family:"Myriad Pro", Myriad, Helvetica, Arial, sans-serif;
        font-weight:bold;
	text-align:center;
	line-height:1.4em;
        border:0px;

}

h4 { color: blue; } 

a:link, a:visited {
	font-family:georgia, times, serif;
	font-weight:bold;
	color:#c17086;
	text-decoration:none;

	font-size:.8em;
}

a:hover {
	border-bottom:1px dotted #91476c;
}

a img {
	border:none;
}

header, section, article, footer {
	padding:10px 20px 20px;
	margin:1%;
        background-color: rgba(240,248,255,0.3);
	border:2px solid #e7e2d7;

}

header {
	display:block;
	position:relative;
	text-align:center;
	border:2px solid #e7e2d7;
}

header img {
	position:absolute;
	left:20px;
	top:18px;
}



section#left {
	float:left;
	width:15%;
	text-align:center;
}

section#right {
	float:right;
	width:15%;
	text-align:center;
}

section ul {
	padding:0px;
	list-style:none;
	border-top:1px solid #e7e2d7;
	margin:14px 0px;
}

section li {
	margin:0px;
	padding:0px;
	list-style:none;
}

section li a:link, section li a:visited {
	float:left;
	width:96%;
	padding:3px 1%;
	border-bottom:1px solid #e7e2d7;
}



article {
	float:left;
	width:53%;

}

footer {
	display:block;
	clear:both !important;
	margin:10px;
}

footer a {
	margin:0px 5px;
}


#gallery {
  display:inline-block;
  list-style-type:none;
  position:relative;
  margin: 0px auto;
  padding: 0;
}
#gallery li {
  position: relative;
  float: left;
  display: block;
  margin: 10px;   
}
#gallery li:nth-child(5n+1) {clear: left}
 
#gallery li:focus {
  outline:0;
}
#gallery li img {
  width: 200px;
  display: block;
  cursor: pointer;
  padding: 5px;
  background: #fff; 
  position: relative;                              
  -webkit-box-shadow: #000 0px 0px 20px;
  -webkit-transition-property: width;
  -webkit-transition-duration:0.5s;
  -moz-box-shadow: #000 0px 0px 20px;
  -moz-transition-property: width;
  -moz-transition-duration:0.5s;  
  -o-transition-property: width;
  -o-transition-duration:0.5s;
  box-shadow: #000 0px 0px 20px; 
}
#gallery li:hover img {
  -webkit-box-shadow: #fff 0px 0px 3px;
  -moz-box-shadow: #fff 0px 0px 3px;
  box-shadow: #fff 0px 0px 3px;
}
#gallery li:focus img {
  width: 1000px;
  z-index: 5;
  -webkit-box-shadow: #000 0px 0px 20px;
  -moz-box-shadow: #000 0px 0px 20px;
  box-shadow: #000 0px 0px 20px;
}
#gallery li:focus div:before {
  content:attr(title);
  display:block;
  position: absolute;
  bottom:5px;
  right:5px;
  padding: 5px 15px;
  background: rgba(0,0,0,.8);
  color:#fff;
  z-index: 9;
}
 
.absolute #gallery li {width: 210px; height: 160px;}
.absolute #gallery div  {
  -webkit-transition-property: width;
  -webkit-transition-duration:0.5s;
  -moz-transition-property: width;
  -moz-transition-duration:0.5s;
  -o-transition-property: width;
  -o-transition-duration:0.5s;
}
.absolute #gallery li:focus div {
  position:absolute;
  z-index:3;
  -moz-box-shadow: rgba(0,0,0,.7) 0px 0px 20px 2000px;
  -webkit-box-shadow: rgba(0,0,0,.7) 0px 0px 20px 2000px;
  box-shadow: rgba(0,0,0,.7) 0px 0px 20px 2000px;
} 
 
.absolute.center #gallery li:focus div {
  position:fixed;
  top: 30%;
  left: 50%;                
  margin-left: -215px;
  box-shadow: none;
}


.cssbutton{
background-color: #;
border: 2px #d1ec4c outset;
padding: 1px 4px;
color: black;
text-decoration: none;
font: bold 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}

.cssbutton:visited{
color: black;
}

.cssbutton:hover{
border-style: inset;
background-color: #;
padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/
}

.cssbutton:active{
color: black;
}

table
{
	text-align:left;
        width: 650px;

}