/* reset styles */

html * {
    margin: 0;
    padding: 0;
}
body {
    font: 62.5% helvetica, arial, sans-serif;
    overflow: hidden;
}
h1, h2, h3, h4, h5, p {
    margin: 0 0 1em 0;
}
ul, ol , li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
a img, fieldset {
    border: none;
}
table {
    border-collapse:collapse;
}

/* layout */

#scroller {
	position: fixed;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}

/* controls */

.button {
    width: 54px;
    height: 18px;
    border: none;
    background: url(images/button.gif) no-repeat;
    color: #999;
    cursor: pointer;
    font-size: 1.1em;
}
a.button {
    text-align: center;
    line-height: 18px;
    text-decoration: none;
}
.button:hover {
    background-position: bottom left;
    color: #fff;
}
.text-field,
.select-field,
.autocomplete-field {
	height: 36px;
}
.text-field input,
.autocomplete-field input {
    width: 184px;
    height: 14px;
    border: none;
    background: url(images/text-field-190.gif) no-repeat bottom right;
    padding: 2px 3px;
    font-size: 1em;
}
.text-field input.short,
.autocomplete-field input.short {
	width: 137px;
    background-image: url(images/text-field-143.gif);
}
.text-area {
    background-image: url(images/text-area-top.gif);
    width: 448px;
    margin: 0 0 12px 0;
}
.text-area label {
    display: block;
    font-size: 1.1em;
    color: #666;
    font-weight: bold;
    padding: 0 12px;
    line-height: 32px;
    height: 28px;
}
.text-area div {
    background: url(images/text-area-bottom.gif) no-repeat bottom;
    overflow: hidden;
    position: relative;
    top: 2px;
    padding-bottom: 7px;
}
.text-area div.submit {
    background-image: url(images/post-form-bottom.gif);
    padding-bottom: 0;
}
.text-area textarea {
    margin: 2px 15px;
    min-height: 70px;
    max-height: 400px;
    width: 416px;
    max-width: 416px;
    border: none;
    background: none;
}
.text-area .button {
    float: right;
    margin: 7px 12px;
}

/* form errors */

label.field-error {
    position: absolute;
    height: inherit !important;
    background: url(images/field-error-right.png) no-repeat top right;
    _background-image: url(images/field-error-right.gif);
    padding: 0 11px 0 0 !important;
    margin: -3px 0 0 -2px !important;
    border: none !important;
    font-size: 1.1em !important;
    width: auto !important;
}
label.field-error span {
    height: 28px!important;
    _height: 26px!important;
    color: #dd0000;
    line-height: 18px!important;
    font-weight: normal;
    padding: 0 0 0 11px;
    float: left;
    background: url(images/field-error-left.png) no-repeat top left;
    _background-image: url(images/field-error-left.gif);
}
.text-field-error {
    background-image: url(images/text-field-error-190.gif);
}

/* facebook login */

.facebook-login {
    display: block;
    border: none;
    background: url(images/facebook-connect.gif);
    width: 75px;
    height: 18px;
    overflow: hidden;
    text-indent: -10000px;
    cursor: pointer;
}
.facebook-logout {
    display: block;
    border: none;
    background: url(images/facebook-connect-small.gif) no-repeat 1px 1px;
    height: 18px;
    overflow: hidden;
    color: #666;
    font-weight: bold;
    padding: 0 0 0 22px;
    cursor: pointer;
    text-decoration: none;
    line-height: 18px;
}

/* content panels */

.half-panel {
    float: left;
    width: 448px;
    margin-top: 10px;
    background: url(images/half-panel-top.gif) no-repeat;
}
.half-panel .content {
    min-height: 130px;
    background: url(images/half-panel-bottom.gif) no-repeat bottom;
    padding: 0 15px 17px 10px;
    overflow: hidden;
}
.full-panel {
    float: left;
    width: 896px;
    margin-top: 10px;
    background: url(images/full-panel-top.gif) no-repeat;
}
.full-panel .content {
    min-height: 130px;
    background: url(images/full-panel-bottom.gif) no-repeat bottom;
    padding: 0 15px 17px 10px;
    overflow: hidden;
}
.page-panel {
    float: left;
    width: 895px;
    margin: 10px 0 2px 0;
    background: url(images/page-panel-background.gif) repeat-y;
}
.page-panel .header {
    background: url(images/page-panel-top.gif) no-repeat;
}
.page-panel .content {
    background: url(images/page-panel-bottom.gif) no-repeat bottom;
    min-height: 300px;
    overflow: hidden;
}
.half-panel h2,
.full-panel h2,
.page-panel h2 {
    line-height: 40px;
    font-size: 2em;
    color: #ccc;
    padding: 4px 10px 0 10px;
    height: 40px;
    margin: 0;
}
.page-panel h2 {
    height: 37px;
}
.half-panel h2 .even,
.full-panel h2 .even,
.page-panel h2 .even {
	padding-left:2px;
    color: #666;
}

/* panel paging */

.half-panel .paging,
.full-panel .paging {
    margin: -35px 15px 0 0;
    height: 27px;
    float: right;
}
.half-panel .paging *,
.full-panel .paging * {
    float: left;
    width: 27px;
    height: 27px;
    margin: 0 0 0 3px;
    text-indent: -10000px;
    overflow: hidden;
    border: none;
    cursor: pointer;
}
.half-panel .paging .next,
.full-panel .paging .next {
    background: url(images/panel-next-button.gif);
}
.half-panel .paging .back,
.full-panel .paging .back {
    background: url(images/panel-back-button.gif);
}

/* inner panels */

.half-panel .content .inner,
.half-panel .content li {
    background: url(images/half-inner-panel-top.gif) no-repeat;
    margin: 5px 0 5px 5px;
}
.half-panel .content .inner div,
.half-panel .content li div {
    background: url(images/half-inner-panel-bottom.gif) no-repeat bottom;
    min-height: 40px;
    position: relative;
    top: 5px;
}

/* inappropriate  content */

.inappropriate-content {
    background: url(images/alert.gif) no-repeat right center;
    padding: 0 20px 0 0;
    font-size: 1em;
    font-weight: normal;
    color: #999;
    text-decoration: none;
    font-style: normal;
    float: right;
    line-height: 25px;
}
.inappropriate-content:hover {
    text-decoration: underline;
    color: #666;
}

/* more link */

a.show-more {
    clear: both;
    color: #5daf0e;
    padding: 0 0 0 10px;
    margin: 0 0 0 10px;
    background: url(images/more-arrow.gif) no-repeat left center;
    text-decoration: none;
}
a.show-more:hover {
    text-decoration: underline;
}