/*
Theme Name: Monthly Design Review
Theme URI: http://monthlydesignreview.com
Description: The default theme for Monthly Design Review.
Author: Pak-Kei Mak, 2010
Version: 1.0
Tags: private
*/


@font-face {font-family: MDR; src: url(images/mdr-light.otf);}
@font-face {font-family: MDR; src: url(images/mdr-bold.otf); font-weight: bold;}

body, p {font: 12px Lucida Sans Unicode, Lucida Grande, sans-serif; line-height: 1.5;}
#content p + p, li + li {padding-top: 20px;}
h2 {font: 24px MDR, Century Gothic, Arial, Helvetica, sans-serif; color: #BA6D00;}
h3, .entry-utility, .entry-category, .gathering-rsvp, #footer p, .widget-title, .gathering-place span, .comment-author, .comment-meta, .widget-utility {
	font: bold 14px MDR, Century Gothic, Arial, Helvetica, sans-serif; text-transform: uppercase; color: white;}
.entry-utility a, .entry-category a, .gathering-rsvp a, .comment-meta a, .widget-utility a {color: white;}
.gathering-time {font: bold 48px MDR, Century Gothic, Arial, Helvetica, sans-serif; color: white; text-transform: uppercase;}
.gathering-desc {font: 24px MDR, Century Gothic, Arial, Helvetica, sans-serif; color: black;}
a {color: #BA6D00; text-decoration: none;}


body {background-image: url('images/back.jpg');}

#whole {position: relative; margin-left: auto; margin-right: auto; width: 840px;}

#header {position: relative; height: 300px;}
#header #logo {position: absolute; top: 0; left: 0; width: 248px; height: 264px; background: url('images/logo.png') no-repeat;}
#header #desc {position: absolute; top: 0; left: 300px; width: 522px; height: 183px; z-index: 2; background: url('images/header-desc.png') no-repeat;}
#header #story {position: absolute; top: 0; left: 290px; width: 125px; height: 221px; background: url('images/header-learnmore.png') no-repeat;}

#container {position: relative; margin-left: 300px;}
#container-page {position: relative;}

.post {position: relative; width: 460px; padding: 30px; margin-bottom: 96px; background: white; text-align: justify;}
.type-page {position: relative; width: 760px; padding: 30px; margin-bottom: 96px; background: white; text-align: justify;}

.entry-category {background: black; position: relative; float: left; padding: 7px 10px 7px 10px; margin: 0 10px 0 -40px;}
.widget-title {background: black; position: absolute; top: 30px; padding: 7px 10px 7px 10px; margin: 0 10px 0 -40px; z-index: 3;}
.entry-title {padding: 1px 0 20px 0;}
.entry-utility, .widget-utility, .comment-meta {background: #FF9500; position: absolute; left: 9px; bottom: -36px; width: 490px; height: 36px; line-height: 34px; padding-left: 21px;}
.widget-utility {width: 210px;}
.type-page .entry-utility {width: 790px;}

.entry-photo {position: relative; border: 1px solid #888; width: 499px; margin: 10px 0 30px 0;}
.entry-photo img {width: 500px; display: block;}
.entry-photo .right-wedge {margin-bottom: -58px;}

.left-wedge {position: absolute; left: 0; bottom: 0; width: 10px; height: 41px; margin-bottom: -41px; background-image: url('images/grey-left-wedge.png');}
.right-wedge {position: absolute; right: 0; bottom: 0; width: 10px; height: 57px; margin-bottom: -59px; background-image: url('images/grey-right-wedge.png');}
.orange-wedge {position: absolute; left: -9px; top: 0; width: 9px; height: 36px; background-image: url('images/orange-wedge.png');}
.orange-triangle {position: absolute; top: 0; right: 0; width: 20px; height: 36px; background: url('images/orange-triangle.png') no-repeat right bottom;}

#sidebar {position: absolute; top: 300px; left: 0; width: 240px;}
.widget {position: relative; background: white; padding: 80px 30px 30px 30px; margin-bottom: 96px;}

.gathering-map {position: absolute; top: 0; left: 0;}
.gathering-time {position: absolute; top: 170px; right: -10px; padding: 4px 15px 7px 15px; background: black;}
.gathering-place {position: absolute; top: 230px; right: -10px; text-align: right;}
.gathering-place span {padding: 4px 10px 4px 10px; background: black;}
.gathering-desc {position: relative; margin-top: 240px; left: -30px; width: 180px; padding: 85px 30px 20px 30px; margin-bottom: -30px; background: #FF9500;}
.gathering-desc .orange-triangle {position: absolute; padding-bottom: 36px; right: 0; width: 100%; height: 100%; background: url('images/orange-triangle.png') no-repeat right bottom;}
.gathering-rsvp {position: absolute; bottom: 0; margin-bottom: -24px; z-index: 2;}

#comments-title {position: relative; right: 20px; padding-bottom: 60px; text-align: right;}
#comments-title span {background: black; padding: 7px;}
.comment {position: relative; width: 460px; padding: 30px 30px 30px 30px; margin-bottom: 96px; background: white; text-align: justify;}
.comment-author .avatar {position: absolute; top: 2px; left: 2px;}
.comment-author {background: black; position: relative; display: inline; padding: 7px 10px 7px 35px; margin: 0 0 0 -40px;}
.comment-text {margin-top: 20px;}

#respond {position: relative; width: 460px; padding: 30px; margin-bottom: 96px; background: white; text-align: justify;}
#reply-title {position: relative; display: inline; right: 20px; padding: 7px 10px 7px 10px; margin: 0 0 0 -20px; background: black;}
#respond form {margin-top: 20px;}

#footer {position: relative; right: 20px; padding-bottom: 60px; text-align: right;}
#footer p span {background: black; padding: 7px;}
#footer p + p {padding-top: 7px;}

#logo-bni {background: black; padding: 5px 7px 3px 7px; vertical-align: middle;}