@charset "utf-8";

body { font-family: Arial,Helvetica,sans-serif; font-size: 12px; padding: 15px; color: #000; }
h1,h2,h3,h4 { font-weight: 400; margin-top: 0; }
ul,div,code,a { font-size: 14px; }
li { line-height: 20px; }
a { color: #00008b; }
.none { display: none; }
.center { text-align: center; }

/*-----Menu-----*/
.navi { margin-bottom: 20px; }
.navi a { display: inline-block; padding: 5px 10px; background: #00008b; color: #fff; text-decoration: none; }
.navi a:hover,.navi a.active { background: #fff; color: #000; }

/*-----Example 1 and Example 2-----*/
.box { padding: 20px; margin-bottom: 10px; background: #eee; }
.highlight { background: #00008b; color: #fff; }

/*-----Grid-----*/
.grid { float: left; }
.grid .content { color: #fff; background: darkblue; margin: 10px; padding: 10px; }
.span1 { width: 100%; }
.span2 { width: 50%; }
.span4 { width: 25%; }

/*-----Navigation-----*/
.navigation { padding: 5px 10px; background: none; text-align: center; }
.navigation li { display: inline-block; padding: 10px; background: darkblue; margin-bottom: 5px; }
.navigation a  { text-decoration: none; color: #fff; }
.tabnavigation li { width: 40%; }
.mobnavigation li { display: block; }

/*-----Form-----*/
.form { width: 50%; margin-left: 15px; }
.form label { display: inline-block; width: 20%; margin-top: 12px; text-align: right; margin-right: 10px; }
.form input[type="text"],.form textarea { width: 70%; padding: 5px; font-family: Arial,Helvetica,sans-serif; border: solid 1px #ccc; margin: 5px 0; vertical-align: top; }
.tabform { width: 100%; }
.tabform label { display: block; width: 100%; text-align: left; }
.tabform input[type="text"],.tabform textarea { width: 92%; }
.mobform { width: 100%; }
.mobform label { display: none; }
.mobform input[type="text"],.mobform textarea { width: 92%; }
.form input[type="submit"] { display: block; }