/* ========== Common ========== */
* { margin: 0; padding: 0; }
html { height: 100%; font-size: 62.5%; }
body { height: 100%; font: 1.2em Verdana, Arial, Helvetica, sans-serif; text-align: center; padding-bottom: 130px; }
p { line-height: 1.5; margin-bottom: 14px; }

/* ========== Layout ========== */
body { background: white url('../img/body-bg.png') no-repeat left top; }

#wrapper { width: 960px; margin: 20px auto; text-align: left; border: 1px solid gray;  background: #FFEF9E url('../img/header-bg.gif') no-repeat top left; border-radius: 10px 10px 0 0; }
#header { padding: 10px; height: 50px; text-align: center; border-bottom: 1px solid gray; border-radius: 10px 10px 0 0; }
#header, #footer { background-color: rgba(0, 0, 0, 0.5); }
#header img { border: none; }

div#lpanel { float: left; width: 75%; color: white; }
div#lpanel, div#rpanel { margin-top: 100px; }
div#rpanel { float: right; width: 24%; text-align: left; }
div#lpanel-in, div#rpanel-in { margin: 20px; }
div#rpanel-in { margin-left: 0; }

div#lpanel-in div.content-box { width: 190px; height: 170px; float: left; margin: 10px; padding: 5px; border: 1px silver solid; border-radius: 10px; overflow: hidden; background: white url('../img/content-box-bg.png') repeat-x bottom left; box-shadow: dimgray 0 0 20px; }
div#lpanel-in div.content-box:hover { box-shadow: white 0 0 20px; }
div#lpanel-in div.content-box h2 { display: block; height: 30px; text-align: center; line-height: 30px; font-size: 120%; text-shadow: silver 1px 1px 1px; padding: 5px; color: white; background-color: #E37C17; border-radius: 7px;  }
div#lpanel-in div.content-box p { padding: 10px; color: #272606;  }

div#contact { position: relative; margin: 20px auto; padding: 5px; width: 530px; background-color: rgba(0, 0, 0, 0.5); }
div#contact { border-radius: 20px 0;  }
div#contact h1 { margin: 10px; }
div#contact img { margin: 0px; border: none; position: absolute; left: 10px; top: 35px; }
div#contact div { float: left; width: 230px; height: 130px; margin: 20px 0 10px 20px; text-align: left; }
div#contact div ul { list-style-position: inside; }
div#contact div li { line-height: 20px; font-size: 110%; margin-bottom: 3px; }
div#contact div li span { display: inline-block; width: 50px; }
div#contact div li a { color: #DCFDFD; text-decoration: none; }
div#contact div li a:hover { text-shadow: white 1px 1px 1px; }

div#rpanel-in { position: relative; left: -10px; margin-top: -30px; text-align: left; padding: 10px; border-radius: 20px 0; box-shadow: black 0 0 2px; background-color: white; }
div#rpanel-in h3{ text-align: center; margin-bottom: 20px; text-shadow: gray 1px 1px 1px; }
div#rpanel-in label, input[type="text"], div#rpanel-in textarea, div#rpanel-in input[type="submit"]{ width: 150px; margin: 3px 10px; }
div#rpanel-in label{ font-size: 80%; font-weight: bold; color: #272606; }
div#rpanel-in input[type="text"], div#rpanel-in textarea, div#rpanel-in input[type="submit"]{ margin-bottom: 7px; }
div#rpanel-in input[type="text"], div#rpanel-in textarea { padding: 2px 5px; }
::-webkit-input-placeholder  { font-size: 90%; }
input:-moz-placeholder { font-size: 90%; }
div#rpanel-in div { text-align: center; }

.cleaner { clear: both; height: 0; font-size: 0; visibility: hidden; }
#footer { padding: 10px; border-top: 1px solid gray; text-align: center; color: white; }

div#rpanel-in input[type="submit"]{ color: white; text-align: center; font-weight: bold; background: transparent url('../img/btn.png') no-repeat left center; border: none; cursor: pointer; width: 100px; height: 47px; line-height: 47px; }
div#rpanel-in input[type="submit"]:hover { background: transparent url('../img/btn.png') no-repeat right center; }