/*
========================================================================
Filename:		styles.css
Date Created:	2008-05-19
Description:	CSS stylesheet for component structure and typography
				for layout width >= 800px
Project:		Parents Know How
Author:			Manmath Rajput (manmath.rajput@atticmedia.com)
========================================================================
*/

/*-----------------------------------------------------------------
 Default Styles 
----------------------------------------------------------------- */
html, body
{
    height: 100%;
}
body
{
    margin: 0px;
    text-align: left;
    font-family: Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
    font-size: 80.01%;
    background-image: url(../images/backgrounds/background_withoutgradient.jpg);
    background-position: left -3px;
}
a
{
    text-decoration: none;
    color: #000;
}
a:hover
{
    text-decoration: underline;
}

img
{
    border: none;
}
p
{
    margin: 3px 0 3px 0;
    padding: 5px 0 0 0;
}
ul
{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    width: auto;
}
ul li
{
    float: left;
    padding: auto;
}
input.submitbtn
{
    background: url(../images/generic/button_bg.jpg) repeat-x top left;
    padding: 3px 5px 3px 5px;
    border: solid 1px #c1ec6c;
    margin: 5px 0 5px 5px;
    float: right;
    color: #000;
    text-decoration: none;
    font-size: 85%;
    font-weight: bold;
}
input.submitbtn:hover
{
    background-image: none;
    background-color: #ebc10d;
    color: #000;
}

input.icon
{
    padding-left: 25px !important;
}
fieldset
{
    border: none;
    padding: 0px;
}
label, .label
{
    font-weight: bold;
    font-size: 80%;
}
select, input.textbox
{
    font-size: 80%;
    font-family: Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
    color: #666666;
    max-width: 250px;
    margin: 5px 0 5px 0;
}
form
{
    padding: 0px;
    margin: 0px;
}
.modalbackground
{
    filter: alpha(opacity=50);
    background-color: #000;
    opacity: 0.5;
}
.display_inline
{
    display: inline;
}
.no-margin
{
    margin: 0px;
}
.updatemodalbackground
{
    filter: alpha(opacity=0);
    background-color: #000;
    opacity: 0;
}
textarea{
    resize: none; /* Safari's resizing problem */
}
/*-----------------------------------------------------------------
 Typograpgy
----------------------------------------------------------------- */
h1
{
    font-size: 85%;
    font-weight: bold;
    color: #000;
    text-transform: uppercase;
    line-height: 24px;
    padding: 3px 0 2px 0;
    margin: 1px 0 0 0;
}
h2
{
    font-size: 90%;
    font-weight: bold;
    margin: 5px 0 0 0;
    padding: 10px 0 0 0;
    clear: both;
}
h3
{
    font-size: 85%;
    font-weight: bold;
    display: block;
    margin: 15px 0 0 0;
}

/*-----------------------------------------------------------------
 Common Classes
----------------------------------------------------------------- */
.display_all
{
    display: block;
}
.display_none
{
    display: none;
}
.hidden
{
    margin-top: -9999px !important;
    position: absolute !important;
    display: none;
}
.no-border
{
    border: none !important;
}
.height1
{
    min-height: 50px !important;
}
.height2
{
    min-height: 110px !important;
}
.height3
{
    min-height: 400px !important;
}
.spacer
{
    height: 10px;
    clear: both;
}
.spacer2
{
    height: 30px;
    clear: both;
}
.bold
{
    font-weight: bold;
}
.component-border
{
    border: solid 4px #e4e4e4;
}
.center
{
    text-align: center;
}
.float_left
{
    float: left !important;
}
.float_right
{
    float: right !important;
}
.clear_right
{
    clear: right !important;
}
.clear
{
    clear: both !important;
}
.divider
{
    background-color: #d4d4d4;
    height: 1px;
    margin: 0 2px 0 2px;
}
.spacer_horz
{
    display: inline-block;
    padding-left: 100px;
}
.counter
{
    float: left;
}
.error
{
    color: #ff0000;
}
.hyperlink
{
    color: #000 !important;
    background-color:#fff;
    text-decoration:underline;
}
.component .unread
{
    color: purple;
}
.component .overflow_scroll
{
    overflow: auto;
    height: 500px;
    overflow-x: hidden;
}


/*-----------------------------------------------------------------
 Containers 
----------------------------------------------------------------- */
.outer-wrapper
{
    background: url(../images/backgrounds/header_bg.jpg) repeat-x top left;
    min-width: 984px;
    min-height: 100%;
    float: none;
}
.content-wrapper
{
    display: block;
    min-height:850px;
    width: 894px;
    float: none;
    clear: both;
    margin: 0 auto;
}
#main-wrapper
{
    min-height: 400px;
    padding: 10px 24px 10px 24px;
    width: 722px;
    float: left;
    clear: both;
}
/*-----------------------------------------------------------------
 Header & It's Elements
----------------------------------------------------------------- */
.header
{
    background: url(../images/generic/header_image.jpg) no-repeat top right;
    padding: 0px;
    clear: both;
    width: auto;
    height: 179px;
}
.header .logo
{
    width: 103px;
    height: 96px;
    margin: 45px 0 0 10px;
    float: left;
    clear: left;
}
.header ul.utilitynav
{
    clear: both;
    color: #fff;
}
.header ul.utilitynav a
{
    color: #fff;
    margin: 0 3px 0 7px;
}
.header .online-status
{
    float: right;
}
.header .online-status .frame
{
    width: 89px;
    max-height: 76px;
    float: left;
    margin-top: 20px;
    clear: both;
}
.header .online-status .user_avatar
{
    filter: alpha(opacity= 50);
    -moz-opacity: 0.50;
    opacity: 0.50;
    -khtml-opacity: 0.50;
    
}
.header .online-status .image-bg
{
    background-color:#000;
    width:59px !important;
    margin:0 auto;
    border:solid 1px #fff;
}
.header .online-status img
{
    display:block;
    max-width: 67px;
    max-height: 55px;
    margin:0px auto;
    border:solid 2px #fff !important;
}
.header .online-status .status-message
{
    background-color: #0a570f;
    float: left;
    clear: both;
    width: 89px;
    text-align: center;
    color: #fff;
    padding: 2px 0 2px 0;
}

/*-----------------------------------------------------------------
 Main Navigation
----------------------------------------------------------------- */
.nav-container
{
    text-align: center;
    height:47px;
    width:auto;
    margin:-40px 0px 30px 0px;
}
.main-navigation
{
    display: table;
    height: 47px;
    margin: -10px auto 0px;
    clear: both;
    min-width: 50px;
    text-align: center;  
}
.main-navigation ul
{
    height: 47px;
    background: url(../images/generic/main_nav_center.gif) repeat-x;
    clear: right;
    float: left;
}
.main-navigation li
{
    padding: 1px 2px 1px 2px;
    margin: 3px 0 0 0;
    float: left;
    text-align: center;
    display: inline;
    font-size: 85%;
}
.main-navigation li a
{
    color: #000;
    font-weight: bold;
    padding: 13px 15px 13px 15px;
    min-width: 50px;
    display: block;
}
.main-navigation li a:hover
{
    text-decoration: none;
    background-color: #ebc10d;
}
.main-navigation li.active
{
    background: url(../images/generic/main_nav_active.gif) repeat-x;
    background-position: center 1px;
    cursor: default;
}
.main-navigation li.active a:hover
{
    text-decoration: none;
    background-color: Transparent;
}
.main-navigation li.active a, .main-navigation li a:hover
{
    color: #fff;
}
.main-navigation .start
{
    background: url(../images/generic/main_nav_left.gif) no-repeat;
    width: 8px;
    height: 47px;
    float: left;
}
.main-navigation .end
{
    background: url(../images/generic/main_nav_right.gif) no-repeat;
    width: 8px;
    height: 47px;
    float: left;
}

/*-----------------------------------------------------------------
 Crumbtail
----------------------------------------------------------------- */
.crumbtrail
{
    clear: both;
    width: 100%;
}
.crumbtrail ul
{
    list-style-type: none;
    padding: 0px;
    margin: -10px 0 0 0;
    color: #2b6459;
}
.crumbtrail ul li
{
    display: inline;
    padding: 0 2px 0 2px;
    font-size: 95%;
}
.crumbtrail ul li p
{
    display: inline;
    font-weight: bold;
}
.crumbtrail ul li a
{
    color: #2b6459;
    text-decoration: none;
}
.crumbtrail ul li a:hover
{
    color: #e58900;
    text-decoration: underline;
}
.crumbtrail .welcome
{
    float: right;
    margin-right: 10px;
}
/*-----------------------------------------------------------------
 Content Columns Definition
----------------------------------------------------------------- */
/*---- 3 Column layout : Width specification -----*/
.col-layout3, .col-layout2, .col-layout1
{
    width: 894px;
    clear: both;
    margin: 20px 0 0 0;
    min-height: 100px;
    float: left;
}
.col-layout3 .col1
{
    width: 284px;
    margin-right: 21px;
    float: left;
}
.col-layout3 .col2
{
    width: 284px;
    margin-right: 21px;
    float: left;
}
.col-layout3 .col3
{
    width: 284px;
    float: left;
}
.col-layout3 .component
{
    float: left;
    width: 284px;
}
.col-layout3 .component .header-body, .col-layout3 .component .footer-body
{
    width: 262px;
}
/*---- 2 Column layout : Width specification -----*/
.col-layout2 .col1
{
    width: 589px;
    margin-right: 21px;
    float: left;
}
.col-layout2 .col2
{
    width: 284px;
    float: left;
}
.col-layout2 .col1 .component
{
    float: left;
    clear: both;
    width: 589px;
}
.col-layout2 .col1 .component .header-body, .col-layout2 .col1 .component .footer-body
{
    width: 567px;
}
.col-layout2 .col2 .component
{
    float: left;
    clear: both;
    width: 284px;
}
.col-layout2 .col2 .component .header-body, .col-layout2 .col2 .component .footer-body
{
    width: 262px;
}
/*---- 1 Column layout : Width specification -----*/
.col-layout1 .col1
{
    width: 893px;
    clear: both;
}
.col-layout1 .component
{
    float: left;
    clear: both;
    width: 893px;
}
.col-layout1 .component .header-body, .col-layout1 .component .footer-body
{
    width: 871px;
}
/*-----------------------------------------------------------------
 Components
----------------------------------------------------------------- */
/*---- Component Header -----*/
.component .component-header
{
    background: url(../images/generic/component_top_left.gif) left top no-repeat;
    clear: both;
    height: 29px;
}
.component .component-header .header-body
{
    background: url(../images/generic/component_top_center.gif) left top repeat-x;
    margin: 0 0 0 11px;
    float: left;
    clear: right;
    height: 29px;
}
.component .component-header .header-body ul
{
    float: right;
}
.component .component-header .header-body .heading-block
{
    float: left;
    width: auto;
    margin-right: 10px;
}
.component .component-header .header-body span
{
    font-size: 85%;
    float: left;
    margin: 5px 0 0 0;
}
.component .component-header .header-body .heading-block .component-heading
{
    display: inline;
}
.component .component-header .header-body .heading-block .component-heading-bigger
{
    display: inline;
    font-size: 120%;
}
.component .component-header .header-body ul li
{
    font-size: 85%;
    padding: 0 2px 0 2px;
    margin: -2px 0 0 0;
}
.component .component-header .header-body ul li p a
{
    color: #000;
}
.component .component-header .header-body ul li p a:hover
{
    color: #fff;
}
.component .component-header .end
{
    background: url(../images/generic/component_top_right.gif) left top no-repeat;
    width: 11px;
    height: 29px;
    float: left;
}
/*---- Component Body -----*/
.component .component-body
{
    background-color: #99cc33;
    clear: both;
    padding: 10px;
    float: left;
}
.col-layout3 .component .component-body
{
    width: 264px;
}
.col-layout2 .col1 .component .component-body
{
    width: 569px;
}
.col-layout2 .col2 .component .component-body
{
    width: 264px;
}
.col-layout1 .component .component-body
{
    width: 873px;
}

.component .component-body .subcomponent
{
    background-color: #fff;
    border: solid 4px #e4e4e4;
    padding: 5px;
    float: left;
}
.component .table-layout
{
    display: block;
    margin: 20px 0 20px 0;
}


.col-layout3 .component .component-body .subcomponent
{
    width: 244px;
}
.col-layout2 .col1 .component .component-body .subcomponent
{
    width: 549px;
}
.col-layout2 .col2 .component .component-body .subcomponent
{
    width: 244px;
}
.col-layout1 .component .component-body .subcomponent
{
    width: 853px;
}

.component .component-body p, .component .component-body .subcomponent p
{
    padding: 5px 0 5px 0;
    font-size: 85%;
}
/*---- Component Footer -----*/
.component .component-footer
{
    background: url(../images/generic/component_footer_left.gif) left top no-repeat;
    clear: both;
    height: 10px;
}
.component .component-footer .footer-body
{
    background: url(../images/generic/component_footer_center.gif) left top repeat-x;
    margin: 0 0 0 11px;
    float: left;
    clear: right;
    height: 10px;
}
.component .component-footer .end
{
    background: url(../images/generic/component_footer_right.gif) left top no-repeat;
    width: 11px;
    height: 10px;
    float: left;
}
/*-----------------------------------------------------------------
 Sub-Component Paging
----------------------------------------------------------------- */
.component .paging
{
    border: solid 1px #e6e6e6;
    height: 25px;
    margin: 10px -4px -4px -4px;
    clear: both;
    float: left;
    text-align: center;
    width: 102%;
}
.component .paging .pages
{
    height: 25px;
    text-align: center;
    margin: 2px auto 2px;
    float: left;
    min-width: 10px;
}
.component .paging .next, .component .paging .next_disabled
{
    border-style: none;
    border-color: inherit;
    border-width: medium;
    float: right;
    background: url( '../images/icons/paging_next.gif' ) no-repeat left top;
    width: 28px;
    height: 25px;
}
.component .paging .next_disabled
{
    background: url(../images/icons/arrow_right.gif) left top no-repeat;
}
.component .paging .previous, .component .paging .previous_disabled
{
    border-style: none;
    border-color: inherit;
    border-width: medium;
    float: left;
    background: url( '../images/icons/paging_prev.gif' ) no-repeat left top;
    width: 28px;
    height: 25px;
}
.component .paging .previous_disabled
{
    background: url(../images/icons/arrow_left.gif) left top no-repeat;
}
.component .paging ul
{
    margin: 3px 0 0 20px;
    min-width: 20px;
}
.component .paging ul li
{
    width: 15px;
}
.component .paging a
{
    color: #000;
    font-size: 80%;
    font-weight: bold;
}
.component .paging span
{
    color: #72a015;
    font-weight: bold;
}
.component .button-box
{
    float: right;
    margin: 3px 0 0 0;
}
.component .button-box a
{
    color: #000;
    display: block;
    float: left;
    background-color: #99CC33;
    border: solid 1px #BFEB6A;
    padding: 3px 0px 3px 30px;
    font-size: 85%;
    font-weight: bold;
    min-width: 45px;
    margin: 0 2px 0 2px;
    background-repeat: no-repeat;
    background-position: 5px 2px;
}
.component .button-box a:hover, .component .button-box a.active, .component .button-box a.active:hover
{
    background-color: #EBEBEB;
    text-decoration: none;
    color: #000;
}
.component .button-box .inbox
{
    background-image: url(../images/icons/inbox.gif);
}
.component .button-box .sent
{
    background-image: url(../images/icons/sent.gif);
}
/* Paging for .net pager control --------------------------------*/
.component .pager
{
    border: solid 1px #e6e6e6;
    height: 22px;
    margin: 10px -4px -4px -4px;
    clear: both;
    float: left;
    text-align: center;
    width: 102%;
    font-size: 100%;
    padding: 3px 0px 0px 0px;
}
.component .pager span
{
    color: #72a015;
    font-weight: bold;
    display: block;
    width: 250px;
}
.component .pager span span
{
    display: inline;
    width: auto;
    font-size: 85%;
    padding: 0 1px 0 1px;
    margin: 3px 0 0 0;
}
.component .pager .next, .component .pager .next_disabled, .component .pager span span.next
{
    border-style: none;
    float: right;
    background: url( '../images/icons/paging_next.gif' ) no-repeat left top;
    width: 28px;
    height: 25px;
    margin: -19px 0 0 0;
}
.component .pager .next_disabled, .component .pager span span.next
{
    background: url(../images/icons/arrow_right.gif) left top no-repeat;
}

@media screen and (-webkit-min-device-pixel-ratio:0){/* CSS hack for Safari */
.component .pager .next,.component .pager .next_disabled
{
    margin-top:-3px;
}}
.component .pager .previous, .component .pager .previous_disabled, .component .pager span span.previous
{
    border-style: none;
    border-color: inherit;
    border-width: medium;
    float: left;
    background: url( '../images/icons/paging_prev.gif' ) no-repeat left top;
    width: 28px;
    height: 25px;
    margin: -3px -28px 0 0;
}
.component .pager .previous_disabled, .component .pager span span.previous
{
    background: url(../images/icons/arrow_left.gif) left top no-repeat;
}
.component .pager .page
{
    display: inline;
    color: #000;
    background-color: transparent;
    border: none;
    font-weight: bold;
    font-size: 85%;
    padding: 0 1px 0 1px;
    margin: 3px 0 0 0;
}
/*-----------------------------------------------------------------
 Chat/Mail
----------------------------------------------------------------- */
.col-layout3 .component .chat
{
    overflow: auto;
    height: 250px;
    overflow-x: hidden;
}
.col-layout2 .component .chat
{
    overflow: auto;
    height: 238px;
}
.col-layout1 .component .chat
{
    overflow: auto;
    height: 350px;
}
.component .chat-messages{
    width:262px;
}
.predefined-messages{
    width:250px !important;
}
.message-box{
    width:350px;
    float:left;
}
.user-message-box{  
    position:relative;
    float:right;
    text-align:center;
    border:solid 1px #d2d4d4;
    color:#fff;
    margin:-200px 37px auto auto;
    padding:5px;
    width:187px;
    height:134px;
    word-wrap:break-word;
}

.component .chat p
{
    padding: 0px !important;
}
.component .chatbox
{
    font-family: Verdana, Arial, Tahoma, Helvetica, Sans-Serif;
    overflow: hidden;
    font-size: 80%;
    border: solid 4px #e4e4e4;
    color: #666666;
}
.col-layout3 .component .chatbox
{
    width: 254px;
}
.col-layout2 .col1 .component .chatbox
{
    width: 557px;
}
.col-layout2 .col2 .component .chatbox
{
    width: 254px;
}
.col-layout1 .component .chatbox
{
    width: 863px;
}
.chatdropdown-controls-holder{
    width:350px !important;
    float:left;
}
.chat-textbox
{   
    font-family:Verdana, Arial;
    width:250px;
    color:#000;
    font-size:80% !important;
    padding:5px !important;
    border:solid 1px #666;
}
.chat-dropdown-wrapper
{       
    width:260px;
    max-height:300px;
    overflow:auto;
    overflow-x: hidden;
    border:solid 1px #666;
}
.photopop-component .chat-dropdown-wrapper{
    margin:-10px 10px 0 0px !important;    
    height:100px;
}
.chat-dropdown
{       
    font-size:80%;
    background-color:#fff;
    width:245px;
}
.chat-dropdown a
{   
    display:block;
    padding:5px;
    min-height:15px;
    color:#000 !important;
}
.chat-dropdown a:hover
{   
    background-color:#666;
    color:#fff !important;
    text-decoration:none;
    cursor:default;
}
.component .new-message
{
    border: 1px solid red;
    width: 230px;
    border-color: #ff0000 !important;
}
.buddy-icon
{
    max-width: 93px;
    max-height: 73px;
    float: left;
    margin: 0 10px 5px 0;
}
.component .subcomponent .buddy, .component .subcomponent .buddy-mail
{
    display: block;
    color: #666666;
    margin: 0px 0 -2px 0;
}
.component .subcomponent .buddy
{
    width: 100%;
    clear: both;
}
.component .subcomponent .message
{
    margin: 5px 0 15px 0;
    word-wrap: break-word;
}
.component .subcomponent .subject
{
    margin: 5px 0 0 0;
    font-weight: bold;
}

.component .component-body .mailsubjectbox
{
    width: 500px !important;
    overflow: hidden;
    padding: 3px;
}
.component .subcomponent .alternate
{
    color: #d00001 !important;
}
.component .subcomponent .alternate-mail
{
    color: #810bad !important;
}
.mail-headers
{
    padding: 0px 0px 3px 0px;
}
.mail-label
{
    float: left;
    font-weight: bold;
    width: 100%;
}
.mail-body
{
    width: 550px;
    background-color: #fff;
    border: solid 4px #e4e4e4;
    padding: 3px;
    clear: both;
    height: 300px;
    overflow: auto;
    color:#000;
}
.paging-links
{
    background-color: #eee;
    font-size: 85%;
    cursor: auto;
    color: #000;
    margin: 10px 0 0 0;
}
.component .subcomponent .message img
{
    float: left;
    padding: 0 5px 0 0;
}
.component .chat .mailseperator
{
    clear: both;
    background: url(../images/generic/msg_icon_bg.gif) right top no-repeat;
    border-top: solid 1px #d4d4d4;
    width: 830px;
    height: 28px;
    margin: 10px 0 -20px 0;
}
.component .chat .mail-contents
{
    width: 780px;
    float: left;
}
.component .chat .action-icons
{
    width: 50px;
    float: left;
    margin: -7px 0 0 0;
}
.component .chat .action-icons img, .component .chat .action-icons .icons
{
    float: left;
    padding: 5px;
}
.component .subcomponent .viewmail
{
    background-color: #e5e5e5;
    font-size: 80%;
    padding: 3px;
    min-width: 54px;
    margin: 40px 0px 0px -11px;
    text-align: center;
}
.component .subcomponent .viewmail a
{
    color: #000;
}
.add, .send, .fav, .del
{
    background: url(../images/icons/add_messages.gif) no-repeat right;
    display: block;
    float: right;
    width: 100px;
    margin: 10px -25px 0 0;
    height: 13px;
}
.send
{
    background: url(../images/icons/send_messages.gif) no-repeat right;
}
.fav
{
    background: url(../images/icons/fav_button_icon.gif) no-repeat right;
    width: 30px;
}
.del
{
    background: url(../images/icons/del_button_icon.gif) no-repeat right;
    width: 20px;
}
.component .remaining-counter, .component .remaining-label
{
    background-color: Transparent;
    border: none;
    font-size: 85%;
    width: 25px;
    margin: 0px 0 0 0;
}
.component .remaining-label
{
    font-size: 85%;
    width: auto;
    margin-top: -2px;
}
/*-----------------------------------------------------------------
 Emoticons
----------------------------------------------------------------- */
.component .emoticon{
    width:260px !important; 
}
.component .mail .emoticon{
    width:180px !important; 
}
.component .emoticon .select-emoticon{
    clear:both;
    float:right;
    max-width:30px;
    margin:0 0 5px 0;
}
.component .mail .emoticon .select-emoticon{
    margin:-206px 0 0 0; 
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* CSS hack for Safari */
.component .mail .emoticon .select-emoticon{
    margin:-191px 0 0 0; 
}
}

.component .emoticon .select-emoticon input{
    float:right;
    border:solid 1px #e2e1dd;
}
.component .emoticon .select-emoticon:hover input{
    border:solid 1px #333;
}
.component .emoticons-wrapper{
    background-color:#fff;
    width:130px;
    height:105px;
    padding:2px;
    float:right !important;
    margin:-116px 0px 0 122px;
    border:solid 3px #e4e4e4;
    z-index: 12313132;
    position: absolute;   
}
.component .mail .emoticons-wrapper{
    margin:-328px 0 0 165px !important;
}
.component .emoticons-wrapper .icon{
    width:auto;
    float:left;
    margin:2px;  
    border:solid 1px #e2e1dd;
}
.component .emoticons-wrapper .icon:hover{
border:solid 1px #333;
}
.component .emoticons-wrapper .icon a:hover img{
    
}
.component .emoticon-text
{
}

.component .emoticon-icon
{
    display:block;
    float:left;
    vertical-align:middle;  
}
.component .emoticon-icon-mail{  
    display:inline-block !important;
    float:none !important;
}
.component .text-block{
width:200px;
}
.component .text-block p{
width:auto;
display: block;
float:left;
}
/*-----------------------------------------------------------------
 Personalize
----------------------------------------------------------------- */
.component .section_heading
{
    display: block;
    background-color: #E4E4E4;
    height: 30px;
    color: #000;
    margin: -5px -5px 10px -5px;
    padding: 5px 0 0 0;
    font-weight: bold;
    clear: both;
}
.component .divider2
{
    display: block;
    background-color: #e4e4e4;
    height: 1px;
    margin: 10px -5px 10px -5px;
    clear: both;
}
.component .theme_label
{
    display: block;
    float:left;
    width: 170px;
    font-weight: bold;
    font-size: 85%;
}
.component .avatar_selection
{
    width: 100px !important;
}
/*-----------------------------------------------------------------
 Challenges
----------------------------------------------------------------- */
.component .challenges select
{
    float: left;
    max-width: 100px;
}
.component .challenges .submitbtn
{
    margin: 0px 0 0 0;
}
/*-----------------------------------------------------------------
 Message Space
----------------------------------------------------------------- */
/*---- Component Header  -----*/
.message-space .component-header
{
    background-image: none;
    background-color: #99cc33;
    clear: both;
    height: 50px;
}
.message-space .component-header .header-body
{
    background-image: none;
    background-color: #99cc33;
    margin: 0 0 0 11px;
    float: left;
    height: 50px;
}
.message-space .component-header .end
{
    background-image: none;
    background-color: #99cc33;
    width: 11px;
    height: 50px;
    float: left;
}
.message-space .component-heading
{
    font-size: 150%;
    text-transform: capitalize;
    font-weight: normal;
    line-height: 55px;
}
.message-space label, .message-space .label
{
    font-size: 90%;
    line-height: 20px;
}
/*-----------------------------------------------------------------
 Photo
----------------------------------------------------------------- */
.component .photo-container
{
    padding: 7px 5px 5px 8px !important;
}
.component .subcomponent .photo
{
    background: url(../images/generic/photo_bg.jpg) no-repeat;
    width: 103px;
    height: 140px;
    padding: 5px 0 0 7px;
    margin: 0px 4px 0px 1px;
    float: left;
    position: relative;
}
.component .subcomponent .photo .photo-frame
{
    height: 77px;
    width: 95px;
    text-align: center;
}
.component .subcomponent .photo p
{
    padding: 2px 0 2px 0;
}
.component .subcomponent .photo .photo-frame img
{
    max-width: 95px;
    max-height: 77px;
    margin: 0 0 2px 0;
}

.component .subcomponent .photo .caption
{
    color: #000;
    clear: both !important;
    display: block;
    height: auto;
    width: 90px;
    float: left;
    overflow: hidden;
    font-size: 90%;
}
/*-----------------------------------------------------------------
 Add Comment/Delete popup elements
----------------------------------------------------------------- */
.component .pop-up
{
    background-color: #99CC33;
    border: solid 10px #292929;
    color: #000;
    padding: 5px;
    width: 265px;
    clear: both;
    min-height: 70px;
}
.component .big
{
    width: 500px !important;
}
.component .pop-up .title
{
    font-size: 90%;
    background-color: #292929;
    color: #fff;
    padding: 0 0 10px 0;
    margin: -6px -5px 5px -5px;
}
.component .flexi-width
{
    width: auto;
    min-width: 400px;
    max-width: 600px;
    left: 20%;
}
.component .pop-up textarea
{
    margin: 10px 0 10px 0;
}
.component .pop-up .message
{
    font-size: 95%;
    margin: 10px;
}
.component .pop-up .action_row
{
    margin: 0px 0 5px 0;
    padding: 0 5px 0 0;
}
/*-----------------------------------------------------------------
 Home Page elements
----------------------------------------------------------------- */
.component .subcomponent .user-photo
{
    background: url(../images/generic/avatar_bg.jpg) no-repeat;
    float: left;
    clear: right;
    width: 110px;
    height:110px;
    margin:10px 10px 0 0;
}
.component .subcomponent .user-photo img
{
    display:list-item;
    list-style-type:none;
    line-height:100px;
    vertical-align:middle;
    max-width:103px;
    max-height:100px;
    margin:auto;
    margin-top:5px;
}
.component .subcomponent .current-state
{
    float: left;
    clear: right;
    width: 600px;
}
.component .subcomponent .current-state ul
{
    display: block;
}
.component .subcomponent .current-state ul li
{
    display: block;
    clear: both;
    margin: 0px 0 5px 0;
    width: 100%;
}
.component .subcomponent .current-state ul li img
{
    padding: 0 5px 0 3px;
    margin-bottom: -3px;
    vertical-align:middle;
}
.component .subcomponent .current-state ul li a
{
    color: #000;
    font-size: 85%;
    margin: -10px 0 0 0;
    width:100%;
}
.component .subcomponent .current-state .game-notification
{
    background: url(../images/generic/gamenotification_bg.gif) no-repeat;
    display: block;
    width: 261px;
    height: 73px;
    clear: both;
    font-size: 110%;
    font-weight: bold;
    color: #747474;
    margin: 10px 0 10px 0;
}
.component .subcomponent .current-state .game-notification img
{
    display: block;
    float: left;
    margin: 5px 5px 0 10px;
}

.component .subcomponent .notes
{
    float: left;
    width: 349px;
    border: solid 1px #d4d4d4;
    padding: 1px;
}
.component .subcomponent .notes p
{
    padding: 5px;
}
.component .subcomponent .notes .heading
{
    background-color: #e7e7e7;
    padding: 5px 0 0 5px;
    font-weight: bold;
    font-size: 85%;
    height: 22px;
}
/*-----------------------------------------------------------------
 Home Page elements
----------------------------------------------------------------- */
.component .games
{
    padding: 0 10px 0 10px;
    float: left;
    clear: both;
}
.component .game-container
{
    border: solid 1px #d4d4d4;
    padding: 1px;
    float: left;
    text-align: center;
    margin: 5px 0 5px 0;
    width: 217px;
}
.singleplayer .game-container
{
    width:100px;
    margin:5px 5px 5px 2px;
    min-height:100px;
}
.singleplayer .game-container h1
{
    display:block;
   width:70px;
    margin:5px 5px 5px 2px;
}
.singleplayer .game-container h1 img
{
    max-width: 100px;
}
.singleplayer .game-container .action_row
{
    width:95px !important;
    padding:0px 0 10px 0 !important;

}
.component .game-container img
{
    max-width: 215px;
    float: left;
    margin: 1px;
}
.component .game-container .action_row
{
    background-color: #e7e7e7;
    float: left;
    width: 212px;
    clear: both;
    margin: 0px 1px 1px 1px;
    padding: 0 3px 0 0;
}
.component .game-container .action_row p
{
    display: inline-block;
    float: left;
    padding: 4px 0 0 4px;
    text-align: left !important;
}
.component .game-container .action_row .submitbtn
{
    background: url(../images/generic/game_button_bg.jpg) repeat-x;
    border: none;
    height: 17px;
    padding: 0 5px 0 5px !important;
    font-weight: normal;
    font-family: Verdana, Arial, Tahoma;
}
.component .inline-gamecontainer{
	border:solid 5px #fff; 
	width:505px;
}
.component .inline-boardgamecontainer{
	border:solid 5px #fff; 
	width:560px;
}
/*-----------------------------------------------------------------
 Photo Pop-up & It's Elements
----------------------------------------------------------------- */
.component .add-photo
{
    float: left;
    min-height: 350px;
}
.component .container
{
    display: block;
    float: left;
    background-color: #8cc023;
    border: solid 2px #a5d546;
    clear: both;
    padding: 5px;
    width: 250px;
    margin: 10px 0 10px 0;
}
.component .container img
{
    display: block;
    margin: 0 auto;
}
.component .container input.textbox
{
    width: 160px;
    margin: 7px 5px 5px 5px;
    float: left;
}
.component .err_msg
{
    float: inherit;
    clear: both;
    background-color: #fff;
    color: #cc0000;
    border: solid 2px #cc0000;
    padding: 5px;
    margin: 15px 0 15px 0 !important;
}
/*-----------------------------------------------------------------
 Photo popup & It's Elements 
----------------------------------------------------------------- */
.photopop-component
{
    float: left;
    clear: both;
    width: 560px;
    padding: 15px;
    background-color: #99cc33;
    border: solid 10px #292929;
}
.ecards{
    width: 710px !important;    
}
.game{
    width: 650px !important;
}
.singleplayergame{
    width: 850px !important;
}
.photopop-component .wrapper
{
    border: solid 2px #666666;
    display: table-cell;
    clear: both;
    width: 556px;
    height: 376px;
    line-height: 376px;
    vertical-align: middle;
}
.ecards .wrapper{
    background-color:#fff !important;
    width:710px;
    height:429px;
}
.photopop-component .slideshow-caption
{
    display: block;
    float: left;
    word-wrap: break-word;
    width: 400px;
    height: 35px;
    overflow: hidden;
}
.photopop-component .wrapper img
{
    display: block;
    border: solid 10px #333;
    margin: auto;
}
.gifts .wrapper img{
        border:solid 15px #fff !Important;
}
.gifts .wrapper{
        padding-bottom: 6px;
}

.photopop-component p
{
    font-size: 80%;
    display: inline-block;
    float: left;
}
.photopop-component .seperator
{
    background-color: #000;
    float: left;
    clear: both;
    height: 1px;
    width: 560px;
    margin: 5px 5px 5px 5px;
}
.photopop-component .line
{
    background-color: #000;
    clear: both;
    height: 1px;
    margin: 2px 0 2px 0;
}
.photopop-component .container
{
    display: block;
    float: left;
    background-color: #fff;
    color: #000;
    border: solid 2px #a5d546;
    clear: both;
    padding: 0px 2px 12px 2px;
    width: 556px;
    height: 35px;
    margin: 3px 0 3px -2px;
    font-size: 105%;
    overflow: auto;
    overflow-x: hidden;
}

.photopop-component .divider
{
    background-color: #82ae2b;
    float: left;
    clear: both;
    height: 1px;
    width: 580px;
    margin: 10px 0 0 -15px;
}
.photopop-component .next_link, .photopop-component .prev_link
{
    float: left;
}

.photopop-component .prev_link a, .photopop-component .next_link a
{
    float: left;
    color: #000;
    font-weight: bold;
    font-size: 105%;
    margin: 10px 0 0 0;
}
.photopop-component .prev_link a
{
    background: url(../images/icons/prev_link.gif) left 2px no-repeat;
    padding: 0 0 0 18px;
}
.photopop-component .next_link
{
    float: right;
}
.photopop-component .next_link a
{
    background: url(../images/icons/next_link.gif) right 2px no-repeat;
    padding: 0 18px 0 18px;
    float: left;
}
.photopop-component .iconset
{
    padding-left: 20px;
}
.pop-close
{
    margin: -45px -15px 0 0;
    float: right !important;
    clear: both;
}

/*-----------------------------------------------------------------
 Login & It's Elements
----------------------------------------------------------------- */
#login .outer-wrapper, #login .header
{
    background-image: none;
}

#login .content-wrapper{
    background: url(../images/backgrounds/login_header.jpg) left top no-repeat;
    width: 950px;
    margin:0 auto;
}
#login .header
{
    margin: 0px 0 95px 0;
    height: 40px;
}
#login .utilitynav
{
    margin:0px 0 0 0;
    font-weight:bold;
}
#login .utilitynav a
{
    color: #fff;
}
#login .login-panel
{
    display:block;
    background: url(../images/backgrounds/login_bg.jpg) repeat-y;
    float:left;
    width:950px;    
    clear: both;
    margin:0px 0px 0px 0px;
    padding-bottom: 40px;
}
#login .login-panel .main-heading
{
    margin:10px 0 0 -5px;
}
#login .login-panel .wrapper
{
    width:650px;
    height: 100%;
    float: none;
    clear: both;
    margin:0 auto auto 167px;
}
#login .login-panel .intro-text
{
    margin:10px 0 10px 0;
}
#login .login-panel .login-credentials
{
    float: left;
    width: 400px;
    margin: 10px 45px 50px 0;
}
#login .login-panel .wrapper .dadspace-logo
{
    float: right;    
    margin-top: 40px;
}
#login .login-panel .login-credentials .textbox
{
    width: 150px;
    
}
#login .login-panel .login-credentials label
{
    width: 100px;
    display: inline-block;
    font-size: 90%;
    font-weight: normal;
    float: left;
    padding: 7px 0 0 0;
}
#login .login-panel .wrapper .submitbtn
{
    float: none;
    background: url(../images/generic/login_button.gif) left top no-repeat;
    border: none;
    width: 65px;
    height: 23px;
    color: #fff;
    font-weight: normal;
    padding: 0px;
    margin: 2px 0 0 4px;
}
#login .login-panel .wrapper p
{
    font-size: 90%;
}
#login .login-panel .wrapper p a
{
    color: #000;
    font-weight: bold;
}
#login .login-panel .wrapper .public-text
{
    margin:30px 0 30px 0;
}
#login .login-panel .wrapper .public-text .public-image
{
    float:right;    
    margin:-20px 0 0 30px;
}
#login .login-panel .wrapper .public-text .public-heading
{    
    margin:-20px 0 5px -5px;
}
#login .login-panel .wrapper .public-text p
{
    margin:15px 0 0 0 !Important;
}
#login .footer .footer-items
{
    width:1020px !important;
}
/* Bottom Component */
#login .login-panel .bottom-component
{
    margin: 170px 0 0 0;
    float: left;
    clear: both;
    width: 650px;
}
#login .login-panel .bottom-component a
{
    color: #1f3301 !important;
    font-size: 95%;
    text-decoration: underline;
}
#login .login-panel .new-dad, #login .login-panel .survival-guide
{
    float: left;
    width: 210px;
    clear: right;
}
#login .login-panel .register
{
    float: none;
}
#login .login-panel .bottom-component ul li
{
    clear: both;
    background: url(../images/icons/pin_icon.gif) no-repeat left 3px;
    padding: 0 0 0 15px;
    width: 180px;
}
#login .login-panel .bottom-component ul li a
{
    font-size: 85%;
}
#login .login-panel-footer
{
    background: url(../images/backgrounds/login_footer.jpg) repeat-y;
    float:left;
    width:950px;  
    height:173px;  
    clear: both;    
}
/* New login demo page style */
#login .login-panel .logo
{
    float:left;
    margin:10px 0 0 0;
}

#login .login-panel .content-block
{
    display:block;
    float:left;
    width:610px;
    font-family:Arial, Verdana;
}
#login .login-panel .content-block .line
{
    display:block;
    float:left;
    background: url(../images/generic/divider_green.gif) repeat-x;
    width:100%;
    height:10px;
    margin:5px 0 10px 0;
}
#login .login-panel .content-block p
{
    color:#2C7027;
    margin:10px 0 10px 0;
}
#login .login-panel .content-block .start
{
    display:block;
    float:left;
    width:320px;
    padding:0px 20px 20px 20px;
    color:#fff;
    margin:10px 0 0 0;
    background-color: #7DAF04;
}
#login .login-panel .content-block .start .generate-username,
#login .login-panel .content-block .start .generate-username p
{
    color:#000;
}
#login .login-panel .content-block .start .generate-username .progress
{
    position:absolute;
    display:block;
    float:left;
    
}

#login .login-panel .content-block .start p
{
    color:#fff;
}
#login .login-panel .content-block .start .line
{
    display:block;
    float:left;
    background: url(../images/generic/divider_2.jpg) repeat-x;
    width:100%;
    margin:5px 0 10px 0;
}
#login .login-panel .content-block .start .generate_button
{
    display:block;
    float:left;
    background: url(../images/generic/generate_login.jpg) no-repeat;
    width:319px;
    height:41px;
    border:solid 0px;
}
#login .login-panel .content-block .login
{
    display:block;
    float:left;
    clear: right;
    width:188px;
    background-color:#D1E89E;
    padding: 20px 9px 19px 8px;
    margin: 0 0 0 20px;
}
#login .login-panel .content-block .start h2
{
    color:#fff;
}
#login .login-panel .content-block .login .form_row
{
    display:block;
    float:left;
    margin:0px 0 0px 0px;
}
#login .login-panel .content-block .login .form_row span
{
    display:block;
    float:none;
    font-size:85%;
    width:100%;
    line-height:10px;
}
#login .login-panel .content-block .login .form_row label
{
    display:none;
}
#login .login-panel .content-block .login .form_row .textbox
{
    font-family:Arial, Verdana;
    font-size:100%;
    width:188px;  
    color:#2C7027;  
}
#login .login-panel .content-block .login .form_row .line
{
    display:block;
    float:left;
    background: url(../images/generic/divider_green.gif) repeat-x;
    margin:25px 0 12px 0;
    clear:both;
    width:188px;
}
#login .login-panel .content-block .login .form_row .login_button
{
    display:block;
    float:right;
    background: url(../images/generic/login.jpg) no-repeat;
    width:139px;
    height:41px;
    border:solid 0px;

}
#login .login-panel .content-block .login .form_row .spacer2
{
    display:block;
    float:left;
    width:100%;
    height:17px;
}
#login .login-panel .content-block .login .spacer
{
    display:block;
    float:left;
    width:100%;
    height:15px;
}
#login .login-panel .content-block .about
{
    display:block;
    float:left;
    width:345px;
    /*padding:15px 15px 15px 0;*/
    padding: 0 20px 15px 0;
}
#login .login-panel .content-block .contact
{
    display:block;
    float:left;
    width:235px;
    padding: 0 0 15px 0;
}
#login .login-panel .content-block a, 
#login .login-panel .content-block p a
{
    color:#E75201;
    text-decoration:underline;
}
#login .login-panel .content-block a:hover
{
    text-decoration:none;
}

/* Headings */
#login h1 {
    font-size: 1.4em;
    text-transform: none;
}
#login h2 {
    font-size: 1.4em;
    color: #2C7027;
    padding: 0;
    margin: 0;
}

/* Features */
#login .Features {
    margin: 10px 0; 
    float: left;
    clear: both;   
}
#login .Features li {
    margin-right: 19px;   
}

/* Pull Quotes */
#login .PullQuotes {
    float: left;
    clear: both;
    width: 101%;
}

/* Video */
#login .VideoLogin {
    clear: both;
    float: left;
    margin-bottom: 10px;
}
#login .Video {
    float: left;
    clear: right;
}


/*-----------------------------------------------------------------
 Moderator & It's Elements
----------------------------------------------------------------- */
#moderator .outer-wrapper
{
    background-image: none;
    background-image: url(../images/backgrounds/mod_header_bg.jpg);
}
#moderator .header
{
    height: 105px;
    background-image: none;
}
#moderator .header .moderator-heading, #moderator .header .moderator-heading p, #moderator .header .moderator-heading p a
{
    color: #fff;
    text-align: right;
}
#moderator .header .moderator-heading
{
    padding: 20px 0 0 0;
}
#moderator .main-navigation
{
    margin: 1px 0 0 0;
    width: 100%;
    padding: 0px;
    clear: both;
    height: 30px;
}
#moderator .main-navigation ul
{
    background: none;
    width: auto;
    margin: -14px 0 0 -20px;
    padding: 0px;
}
#moderator .main-navigation li
{
    padding: 9px 10px 0 10px;
    margin: 0 1px 0 1px;
}
#moderator .main-navigation li a
{
    color: #cdcdcd;
    height: 23px;
    margin: -2px 0 0 0;
    padding: 4px 10px 0 10px;
    font-weight: normal;
}
#moderator .main-navigation li.active, #moderator .main-navigation li:hover
{
    background-color: #333;
    background-image: none;
    height: 23px;
    margin: 3px 1px 0 1px;
    padding: 6px 10px 0 10px;
}
#moderator .main-navigation li.active a, #moderator .main-navigation li:hover a
{
    color: #b7db70;
}
#moderator .main-navigation li:hover a:hover
{
    background-color: Transparent;
}
#moderator .status
{
    font-size: 85%;
    font-weight: bold;
    margin: -3px 0 0 10px;
    float: left;
    clear: both;
    width: 100%;
}
#moderator .component .component-header
{
    background: url(../images/generic/mod_component_top_left.gif) left top no-repeat;
    height: 30px;
}
#moderator .component .component-header .header-body
{
    background: url(../images/generic/mod_component_top_center.gif) left top repeat-x;
    height: 30px;
}
#moderator .component .component-header .end
{
    background: url(../images/generic/mod_component_top_right.gif) left top no-repeat;
    height: 30px;
}
#moderator .nav-container
{
    margin-top: 0px;
}

/*---- Moderator Component Body -----*/
#moderator .component .component-body
{
    background-color: #5d5d5d;
}
#moderator .component .component-header .component-heading
{
    color: #fff;
    font-weight: normal;
    font-size: 100%;
}
#moderator .component .submitbtn
{
    background: url(../images/generic/mod_buttonbig_bg.jpg) left top repeat-x;
    border: solid 1px #666666;
    height: 22px;
    padding: 0px;
    color: #ccc;
    font-weight: normal;
    margin: 1px;
}
#moderator .component .submitbtn:hover
{
    background-image: none;
    background-color: #f3c91b;
    color: #000;
}
/*-----------------------------------------------------------------
 Moderator Paging
----------------------------------------------------------------- */
#moderator .sorting-panel
{
    height: 40px;
    margin: 20px 0 0px 0;
}
#moderator .sorting-panel .drop-down
{
    margin: 10px 0 0 0;
}
#moderator .paging-container
{
    margin: 10px 0 0 0;
    float: right;
}
#moderator .paging
{
    float: right;
    position: relative;
    clear: both;
    font-size: 85%;
    margin: 15px 0 15px 0;
}
#moderator .paging .prev_link
{
    background: url(../images/icons/mod_prev_page.gif) left 2px no-repeat;
    color: #000;
    padding: 0 4px 0 13px;
}

#moderator .paging .next_link
{
    background: url(../images/icons/mod_next_page.gif) right 2px no-repeat;
    color: #000;
    padding: 0 13px 0 4px;
    float: left;
}
#moderator .paging ul
{
    padding: 0 10px 0 10px;
    float: left;
}
#moderator .paging ul li
{
    padding: 0 2px 0 2px;
    float: left;
}
#moderator .paging ul li.active a
{
    color: #e78a00;
}
#moderator .paging ul li a
{
    color: #000;
}
#moderator .paging ul li a:hover
{
    color: #e78a00;
}
/*-----------------------------------------------------------------
 Moderate Photos
----------------------------------------------------------------- */
#moderator .component .photo-container
{
    padding: 10px;
}
#moderator .component .photo
{
    background-color: #6d6d6d;
    border: solid 2px #4f4f4f;
    background-image: none;
    float: left;
    padding: 5px 3px 5px 7px;
    margin: 6px 6px 6px 6px;
    width: 190px;
    height: auto;
}
#moderator .component .photo .wrapper
{
    height: 181px;
    width: 181px;
    text-align: center;
}
#moderator .component .photo img
{
    max-height: 181px;
    max-width: 181px;
}
#moderator .component .photo .photo-id
{
    font-size: 105%;
    font-weight: bold;
}
#moderator .component .photo p
{
    color: #fff;
    width: 170px;
}
#moderator .component .photo .action_row
{
    background-color: #4f4f4f !important;
    float: left;
    padding: 0 1px 0 0;
    height: 22px;
    margin: 0px -3px -10px -5px;
    width: 189px;
}
#moderator .component .divider
{
    width: 180px;
}
#moderator .component .photo .action_row .submitbtn
{
    background: url(../images/generic/mod_button_bg.jpg) left top repeat-x;
    border: solid 1px #666666;
    height: 17px;
    padding: 0px;
    height: 20px;
    color: #ccc;
    font-weight: normal;
    margin: 1px;
}
#moderator .component .photo .action_row .submitbtn:hover
{
    background-image: none;
    background-color: #f3c91b;
    color: #000;
}
#moderator .component .scroller
{
    height: 400px;
    overflow: auto;
    overflow-x: hidden;
}
#moderator .component .reject-description-1
{
    margin: 0 0 10px 0;
    height: 150px;
    overflow: auto;
    overflow-x: hidden;
    border: solid 2px #ccc;
}
#moderator .component .reject-description-2
{
    margin: 0 0 10px 0;
}
#moderator .pop-up
{
    background-color: #5D5D5D;
    color: #fff;
    border: #292929;
}
#moderator .pop-up .wrapper
{
    border: solid 2px #333;
    display: table-cell;
    clear: both;
    width: 545px;
    height: 357px;
    line-height: 357px;
    vertical-align: middle;
}
#moderator .pop-up .wrapper img
{
    display: block;
    border: solid 4px #000;
    max-width: 536px;
    max-height: 348px;
    margin: auto;
}
#moderator .subcomponent .user-group
{
    background-color: #fff;
    border: solid 2px #CCC;
    color: #000;
    padding: 15px;
    height: 30px;
    margin: 5px;
    width: 600px;
}
#moderator .subcomponent .user-group .buddy
{
    font-size: 90%;
    color: #000 !important;
    margin-top: 0;
    float: left;
    clear: right;
    width: 400px;
}
#moderator .component .photo .caption
{
    height: 50px;
    width: 170px;
    clear: both;
    color: #fff;
    font-size: 75%;
}
#moderator .photocaption
{
    height: 80px;
    color: #fff;
    font-family:Arial;
    background:transparent;
    background-color:#6d6d6d;
}
#moderator .photocaption textarea
{
    height: 80px;
    width: 180px;
    color: #fff;
    font-size: 90%;
    background:transparent;
    background-color:#6d6d6d;
    border:0px;
    border-color:#6d6d6d;
    overflow:hidden;
}
/*-----------------------------------------------------------------
 Moderate Message
----------------------------------------------------------------- */
#moderator .component .message-moderator .subcomponent
{
    width: 80% !important;
    margin: 0 1% 0 0;
}
#moderator .component .photo-moderation .subcomponent
{
    width: 80% !important;
    margin: 0 1% 0 0;
    background-color: #7d7d7d !important;
    border: solid 1px #000;
    color: #fff;
}
#moderator .component .photo-moderation .photopop-component .subcomponent
{
    background-color: #fff !important;
}
#moderator .component .message-moderator p
{
    font-size: 90%;
    padding: 15px 0 15px 0;
}
#moderator .component .message-moderator .divider
{
    width: auto;
}
#moderator .component .message-moderator .check-wrapper
{
    background-color: #d1d1d1;
    border: solid 1px #666666;
    float: left;
    padding: 0px 5px 0 5px;
    height: 24px;
    margin: 0 15px 0 0;
}
#moderator .component .message-moderator .thread, #moderator .component .message-moderator .thread a
{
    color: #000;
    margin: 2px 0 0 0;
    display: inline-block;
    line-height: 20px;
}
#moderator .component .message-moderator .mail-icon
{
    float: left;
    margin: 0 10px 10px 0;
}
#moderator .component .message-moderator .mail-icon img
{
    max-width: 50px;
    max-height: 50px;
}
#moderator .component .mail-moderation .submitbtn
{
    float: left !important;
}

#moderator .component .message-moderator .security-image
{
    width: 145px;
    height: 150px;
    background-color: #2DD400;
    border: solid 1px;
    text-align: center;
    float: right;
}

#moderator .component .message-moderator .reported
{
    background-color: #EBEAD8;
    padding: 10px;
    margin: 20px 0 20px 0;
}
#moderator .selected
{
    border: solid 3px #F7AA40;
    padding: 5px;
}
#moderator .pop-footer
{
    display: block;
    clear: both;
    width: 100%;
    height: 30px;
    margin: 3px 0 3px 0;
    border: solid 1px #000;
    background-color: #333;
}

#moderator .component .mail-moderation .pop-footer .submitbtn, #moderator .component .photo-moderation .pop-footer .submitbtn
{
    float: right !important;
    margin: 4px 5px 4px 0 !important;
}
/*-----------------------------------------------------------------
 Moderator Photopop component
----------------------------------------------------------------- */
#moderator .photopop-component
{
    background-color: #666666;
    color: #fff;
}

#moderator .photopop-component .component-body
{
    width: 535px;
}
#moderator .message-moderator .photopop-component .subcomponent
{
    width: 96.5% !important;
    margin: 0 1% 0 0;
    color: #000;
}
#moderator .message-moderator .photopop-component .content-scroller
{
    height: 500px;
    overflow: auto;
    overflow-x: hidden;
}

#moderator .photopop-component .component-header .header-body
{
    width: 540px;
}
#moderator .photopop-component .wrapper
{
    border: solid 2px #373333;
    width: 530px;
}
#moderator .photopop-component .seperator
{
    background-color: #ccc;
    background-image: none;
    height: 2px;
    width: 510px;
    margin: 10px 2px 10px 2px;
}
#moderator .photopop-component .container
{
    background-color: Transparent;
    border: none;
    margin: -5px 0 0 0;
}
#moderator .photopop-component .action_row
{
    background-color: #3d3d3d;
    float: left;
    width: 570px;
    margin: 0 0 0 -15px;
    padding: 0 10px 0 0;
}
#moderator .photopop-component .submitbtn
{
    background: url(../images/generic/mod_buttonbig_bg.jpg) repeat-x top left;
    border: solid 1px #666666;
    color: #c6c6c6;
    font-weight: normal;
}
#moderator .photopop-component .submitbtn:hover
{
    background-image: none;
    background-color: #f3c91b;
    color: #000;
}
#moderator .photopop-component .prev_link a
{
    background: url(../images/icons/mod_prev_link.jpg) left 2px no-repeat;
    color: #c6c6c6;
}
#moderator .photopop-component .download_link a
{
    color: #c6c6c6;
}
#moderator .photopop-component .next_link a
{
    background: url(../images/icons/mod_next_link.jpg) right 2px no-repeat;
    color: #c6c6c6;
}
#moderator .reject-reason{
    font-family:Arial;
    width:500px !important;
    height:100px;
}
/*-----------------------------------------------------------------
 Moderator Pop-up & It's Elements
----------------------------------------------------------------- */
#moderator .pop-up .component .component-header .header-body
{
    width: 600px;
}
#moderator .pop-up .component .component-body
{
    width: 602px;
}
/*-----------------------------------------------------------------
 Admin & It's Elements
----------------------------------------------------------------- */
.admin .component-body
{
    color: #fff;
}
.admin .component-body p
{
    font-size: 90%;
}
.admin .holder
{
    background-color: #EBEAD8;
    padding: 3px;
    margin: 10px 0 0 0;
    color: #000;
}
.admin .component-body .header
{
    background-color: #E4E4E4;
    font-size: 100%;
    font-weight: bold;
    color: #000;
    height: 30px !important;
    padding: 10px;
    clear: both;
}
.admin .component-body .open
{
    background-color: #FFE401 !important;
}
.admin .component-body .header h1
{
    width: auto;
    display: inline-block;
    min-width: 200px;
    float: left;
}
.admin .component-body .header .submitbtn
{
    float: none;
    border: none;
    font-size: 90%;
    min-width: 90px;
    text-align: left;
    padding: 0 0 0 10px !important;
}
.admin .component-body .details
{
    display: table;
    width: 848px;
    background-color: #fff;
    color: #000;
    padding: 10px;
    clear: both;
}

.admin .action
{
    display: block;
    height: 23px;
    background-color: #383838;
    margin: 10px 0 10px 0;
    padding: 10px;
}
.admin .search
{
    padding: 0 10px 0 0;
    width: 500px;
    height: 38px;
}
.admin .search .searchlabel
{
    font-size: 90%;
    display: inline-block;
    float: left;
    margin: 8px;
}
.admin .textbox
{
    font-size: 85%;
    font-family: Verdana, Arial;
    color: #333;
    width: 200px;
    float: left;
}
.admin .search .submitbtn
{
    float: left;
    margin: -12px 0px 0px 20px !important;
}
.admin .user_label
{
    display: block;
    font-weight: bold;
    min-width: 100px;
    float: left;
    margin-right: 10px;
}
.admin label.user_label
{
    display: block;
    font-weight: bold;
    min-width: 170px;
    margin-right: 10px;
    font-size: 85%;
}
.admin .info-container
{
    margin: 10px;
}
.admin .security-image
{
    float: left;
    margin: 0 10px 10px 10px;
}
.admin .security-image img
{
    max-width: 120px;
    max-height: 150px;
}
.admin .users_scroller
{
    height: 300px;
    overflow: auto;
    overflow-x: hidden;
    border: solid 7px #000;
}
/*-----------------------------------------------------------------
 Feedback, Forgot & It's Elements
----------------------------------------------------------------- */
.feedback .chatbox
{
    width: 254px !important;
}
.forgot-button-row{
    width:210px;
}
/*-----------------------------------------------------------------
 Footer & It's Elements
----------------------------------------------------------------- */
.footer
{
    background: url(../images/backgrounds/pagefooter_bg.jpg) center top no-repeat;
    clear: both;
    margin: 50px auto 0;
    width: 100%;
    min-height: 100px;
}
.footer .footer-items{
    width:900px;
    margin:0 auto;
}
.footer ul
{
    margin: 20px 0px 0 0;
    width: 500px;
    float:left;
}
.footer li p
{
    padding: 0 5px 0 5px;
    font-family: Arial, Verdana, Tahoma, Helvetica, Sans-Serif;
}
.footer li a
{
    color: #000;
}
.footer .producer
{
    float: left;
    width:450px;
    margin: 20px 0 0 70px;
    font-size:90%;
}
.footer .producer img
{
    margin: -5px 15px 0 2px;
}