html, body {height: 100%;}

body {text-align: center; background-color: #fff}

h1, h2, h3, h4, h5, h6 {font-family: Muli, Arial, Georgia, Helvetica, Times, serif; font-weight: bold; color: #c00; margin-bottom: 10px; letter-spacing: -2px}

p, li, td, th, caption, legend, address, cite, blockquote, a, label, form span {font-family: Muli, Arial, Helvetica, sans-serif;}
.bodytext-post span {font-family: Muli, Arial, Helvetica, sans-serif !important;}

input, textarea, select {font-family: Arial, Helvetica, sans-serif;}

strong {font-weight: bold}
em {font-style: italic}

#container {
	max-width: 960px; 
	min-height: 100%;
	margin: 0 auto; text-align: left;
	padding: 0 10px;
}
#header {width: 100%; padding: 30px 0 10px 0}
#content {width: 100%; padding-bottom: 105px}
#nav {background-color: #fff; margin-bottom: 10px}
#footer {background-color: #666; position: relative; width: 100%; height: 105px; margin: -105px auto 0 auto; text-align: center; clear: both}
#footer-top {background-color: #eee; padding: 5px 0}
#footer-bottom {padding: 15px 0}

br.clear {clear: both}

/* header */
#header h1 {float: left}
#header h1 a {
	font-size: 45px;
	color: #444;
	text-decoration: none;
}
#header h1 a:hover {color: #666}
#header .follow {float: right}
#header .follow li {float: right; margin: 0 0 0 10px}
#header .follow img {width: 50px; height: 50px; border: 0}

@media screen and (max-width:720px) {
	#header h1 {width: 100%}
	#header .follow {float: left; margin-bottom: 10px}
	#header .follow li {float: right; margin: 0 10px 0 0}
}

/* navigation */

#nav ul {}
#nav li {display: inline-block; padding: 5px 6px}
#nav a {font-size: 14px; color: #000; text-decoration: none}
#nav a:hover {color: #f20}
#nav li.current_page_item {background-color: #f20}
#nav li.current_page_item a {color: #fff}

/* header-pic */
#header-pic {width: 100%; height: 300px; min-height: 100px}

@media screen and (max-width:720px) {
	#header-pic {height: 100px}
}

/* body text */
#bodytext-container.non-home {max-width: 620px}
#bodytext-container.home {max-width: 500px}
#bodytext-container.news {max-width: 600px}
#comments {max-width: 920px; padding: 0 20px 30px 20px;}

.bodytext {float: left; padding: 30px 40px 30px 20px; min-height: 400px; word-wrap: break-word}
.bodytext-post {max-width: 600px}

.bodytext p, .bodytext li {font-size: 15px; color: #444; margin-bottom: 15px; line-height: 1.5em}

.bodytext h1 {font-size: 48px; margin: 30px 0 15px 0}
.bodytext h2 {font-size: 36px; margin: 30px 0 15px 0}
.bodytext h3 {font-size: 24px; margin: 30px 0 15px 0}
.bodytext h4 {font-size: 20px; margin: 30px 0 15px 0}
.bodytext h5 {font-size: 18px; margin: 30px 0 15px 0}
.bodytext h6 {font-size: 16px; margin: 30px 0 15px 0}

.bodytext h1:first-child, .bodytext h2:first-child, .bodytext h3:first-child, .bodytext h4:first-child, .bodytext h5:first-child, .bodytext h6:first-child {margin-top: 0}

.bodytext ul {list-style-type: disc; margin: 15px 25px 25px 25px}
.bodytext ol {list-style-type: decimal; margin: 15px 25px 25px 25px}

.bodytext a {color: #19b}
.bodytext a:hover {text-decoration: none; color: #f20}

.bodytext img {border: 1px solid #ccc}
.bodytext .top-link {margin-top: 30px}

/* side bar */
#side-bar {float: left; width: 380px; padding: 40px 0 0 20px}
#side-bar.news {width: 280px}
#side-bar p {font-size: 15px; color: #333; margin-bottom: 15px; line-height: 1.5em}
#side-bar h3 {font-size: 24px; color: #999; margin-bottom: 10px}
#side-bar ol {list-style-type: decimal; margin: 15px 25px 25px 20px}
#side-bar ul {list-style-type: disc; margin: 15px 25px 25px 20px}
#side-bar li {font-size: 12px; color: #333; margin-bottom: 10px; line-height: 1.0em}
#side-bar li a {color: #19b; font-size: 13px; line-height: 1.1em; text-decoration: none}
#side-bar a:hover {color: #f20}
#side-bar > div {margin-bottom: 20px}

#twitter-feed {margin-bottom: 30px}

@media screen and (max-width:1000px) {
	#bodytext-container.non-home {max-width: 92%}
	#bodytext-container.home {max-width: 97%}
	#bodytext-container.news {max-width: 97%}
	.bodytext {padding: 30px 5px 30px 5px}
	#comments {max-width: 97%}
	#side-bar {width: 97%; border-top: 1px solid #ccc}
	#side-bar.news {width: 97%}
	#twitter-feed iframe {max-width: 93% !important}
}


#tag-cloud a {color: #19b; text-decoration: none}

/* blog posts */

#postmeta {
	background-color: #f8f8f8;
	padding: 10px;
	margin-bottom: 25px;
	border: 1px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
	
#comments ul {
	list-style-type: none;
}

#comments li {
	background-color: #f8f8f8;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.comments_reply textarea {
	font-size: 16px;
	color: #333;
	width: 97%;
	max-width: 600px;
}

.comments_reply input {
	font-size: 16px;
	color: #333;
}

.comments_reply input.textbox {
	width: 300px;
}

/* form */
#contact-form {
	background-color: #f8f8f8;
	border: 1px solid #ccc;
	padding: 10px;
	overflow: auto;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-top: 40px;
	max-width: 600px;
}
#contact-form label {float: left; width: 80px; font-size: 14px; padding-top: 5px; text-align: right; margin-right: 10px}
#contact-form .textbox {float: left; width: 200px; font-size: 16px}
#contact-form .textbox.long {width: 400px}
#contact-form textarea {float: left; width: 400px; font-size: 16px}
#contact-form .required {float: left; color: #000; font-size: 14px; padding: 5px 0 0 5px}
#contact-form .submit {float: left; font-size: 16px; margin-left: 90px}
#contact-form div {float: left; width: 100%; margin-bottom: 10px}
#contact-form .error, #contact-form .invalid {float: left; color: #f00; font-size: 14px; padding: 5px 0 0 5px; display: none}
#contact-form .wait {float: left; font-size: 16px; margin-left: 90px; display: none}

/* footer */
a.top-link {color: #19b; text-decoration: none; font-size: 13px}
a.top-link:hover {color: #f20}

#footer-bottom p {color: #eee; font-size: 12px; margin-bottom: 10px}
#footer-bottom p:last-child {margin-bottom: 0}
#footer-bottom p span {color: #bbb}
#footer-bottom a {color: #fff}
#footer-bottom a:hover {text-decoration: none}

@media screen and (max-width:720px) {
	#contact-form {width: 96%}
	#contact-form label {text-align: left; margin: 0}
	#contact-form .span {clear: both}
	#contact-form .textbox {width: 94%; clear: both}
	#contact-form .textbox.long {width: 94%; clear: both}
	#contact-form textarea {width: 99%; clear: both}
	#contact-form .submit {margin: 0}
	
	#footer {height: auto}
	#footer-bottom p span.mobile {display: block; visibility: hidden}
}

ul.gallery {
	list-style-type: none !important;
	margin: 20px 0 0 0 !important;
	padding: 0 !important;
}

ul.gallery li {
	float: left;
	padding: 8px;
	margin: 0 20px 20px 0 !important;
	background-color: #fff;
	border: 1px solid #ccc;
	
	box-shadow: 3px 3px 10px #ddd;
	-moz-box-shadow: 3px 3px 10px #ddd;
	-webkit-box-shadow: 3px 3px 10px #ddd;
}

ul.gallery li:hover {
	border: 1px solid #900;
}

ul.gallery img {
	width: 80px;
	height: 80px;
}