/* this modifications are to create the effect of the top bar staying fixed on scroll */
body, #header, #headerContainer
{
    background: white url('hdr-bg.png') repeat-x top left;
}

#headerContainer
{
    position: fixed;
    width: 100%;
    z-index: 999;
}

#behindHeader
{
    height: 88px;
}

#header
{
    background-color: #ebebeb;
    height: 88px;
    width: 996px;
    border-bottom: 1px solid #cccccc;
    margin: 0 auto;
    position: relative;
}
/* until here */
#header a, #header a:link
{
    color: White;
    text-decoration: none;
}
/* this is to paint the menus right, because otherwise they inherit other looks */
#header .toolsPopup .ns a
{
    color: #3399CC;
    text-decoration: none;
}

#header #toolsNotifications div.notPicture, #header #toolsNotifications div.notContent
{
    float: left;
}
/* until here */
#topHeader
{
    width: 996px;
    height: 42px;
    background-color: #2896e0;
    color: white;
    float: left;
}




#p4pLogo
{
    display: block;
    float: left;
}

#search
{
    float: left;
    width: 246px;
    height: 25px;
    line-height: 25px;
    margin: 9px 3px 0px 3px;
    padding: 0px;
    background: White url("searchbg.png") no-repeat;
}

#search input
{
    background: transparent;
    border: none;
    height: 20px;
    padding: 0 6px;
    float: left;
    margin: 2px;
    display: block;
}

#search input[type="text"]
{
    width: 198px !important;
}

#search input[type="submit"]
{
    margin-left: 3px;
    width: 23px;
    height: 19px;
    padding: 0px;
    background: transparent url('magnifier-small.png') no-repeat center;
}




#usr
{
    padding:1px;
    float: left;
    height: 37px;
    line-height: 37px;
    width:150px;
    overflow:hidden;
     z-index:999;
     position:absolute;
}
.usrHover
{
     overflow:visible !important;
     height: auto !important;
    
     background-color:#2896e0;
}
.usrHover a:hover
{
    background-color:#07b4df;
}
#usr a
{
    display:inline-block;
    height: 37px;
    line-height: 37px;
    width:auto;
    max-width:135px;
    padding-right:15px;
    overflow:hidden;
    white-space:nowrap;
}
#usr a.open
{
    background:url('usrArrow.png') no-repeat right 0%;
}
#usr a.close
{
    background:url('usrArrow.png') no-repeat right 100%;
}
#usr img
{
    width: 35px;
    height: 35px;
    margin: 1px 4px 0px 0px;
    float: left;
}

#tools
{
    margin:2px 0px 0px 0px;
    height: 37px;
    width: 260px;   /* this was changed too, I just don't remember now :( */
    float: right;
    overflow: hidden;
}

#tools ul
{
    float: left;
}


#tools ul li
{
    height: 35px;
    line-height: 35px;
}

#tools ul li a.l
{
    display: block;
    float: left;
    height: 35px;
    line-height: 35px;
    padding: 0px 5px;
    margin: 2px 0px 0px 0px;
}

#tools ul li a.l:hover
{
    background-color: White;
    color: #3399cc;
}

#tools ul li a.login, #tools ul li a.register
{
    font-weight: bold;
    background-color: #07b4df;
}

#tools ul.i, #tools ul.anu
{
    float: right;
}

#tools ul.i li a.menuIcon /* added the menuIcon class so tahat it wont conflict with child a elements*/
{
    width: 25px;
    height: 18px;
    display: block;
    padding: 3px;
    float: right;
    margin-top: 5px;
    background-color: transparent;
}
#tools ul.i li a:hover
{
    background-color: #07b4df;
}
#tools ul li a.i-notify
{
    background: url('icon-notify.png') no-repeat center;
}
#tools ul li a.i-msg
{
    background: url('icon-mail.png') no-repeat center;
}
#tools ul li a.i-settings
{
    background: url('icon-settings.png') no-repeat center;
}

.hnum
{
    position: absolute;
    height: 16px;
    line-height: 16px;
    padding: 0px 2px;
    background-color: #da072f;
    margin: -4px 20px;
}

#bottomHeader
{
    height: 47px;
    width: 996px;
    float: left;
}


ul.servicesTop
{
    display: block;
    float: right;
    height: 47px;
    margin: 0px;
    overflow: hidden;
}

ul.servicesTop li
{
    height: 37px;
    margin: 8px 2px 0px 2px;
}

ul.servicesTop li:first-child
{
    margin-left:0px;
}


ul.servicesTop li a, ul.servicesTop li a:link
{
    display: block;
    height: 32px;
    line-height: 32px;
    padding: 0px 10px;
    color: #9b9b9b;
    border: 1px solid transparent;
    text-transform: uppercase;
}

ul.servicesTop li a:hover, ul.servicesTop li.selected a
{
    background-color: White;
    border: 1px solid #cccccc;
}


#petServicesTop
{
    width: 840px;   
}

body.anon-user #petServicesTop {
    width: 600px;   
}

#petServicesTop a
{
    color:#9b9b9b !important;
}

#userServicesTop a
{
    color:#2896e0 !important;
}

#bodyWrapper
{
    min-height: 430px;
}



/*main layouts*/

#page #footer
{
    margin: 0px 0px 0px 188px;
    padding-top: 10px;
    border-top: 1px solid #cccccc;
}

/*trhee bars layout*/
.l3, .l2
{
    width: 996px;
    padding: 0px;
    margin: 0px;
}

.l3 .sidebar, .l2 .sidebar
{
    width: 188px;
    float: left;
}

.l3 .content
{
    float: left;
    width: 555px;
    border: 1px solid #cccccc;
    border-top: none;
    border-bottom: none;
    min-height: 830px;
}


.l2 .content
{
    float: left;
    width: 806px;
    border: 1px solid #cccccc;
    border-top: none;
    border-bottom: none;
    min-height: 800px;
}

.l2 .content h1, .l3 .content h1
{
    font-size: 18px;
    font-weight: normal;
}

.l2text .sidebar, .sidebar .titledSidebar
{
    padding: 20px 0px;
}

.l2text .content
{
    padding: 20px;
    width: 766px;
    min-height: 430px;
}

.l2text .content h1
{
    /*reset*/
}

.l0
{
    width: 996px;
    padding: 0px;
    margin: 0px;
}

.l0text .content
{
    float: left;
    border: 1px solid #cccccc;
    border-top: none;
    padding: 20px;
    width: 956px;
    min-height: 430px;
    margin-bottom:-1px;
}

/*top tool hovers*/

.toolsPopup
{
    background-color: white;
    border: 4px solid #07b4df;
    padding: 0px;
}

#toolsSettings
{
    width: 160px;
}

#toolsSettings ul li a
{
    display: block;
    font-size: 12px;
    padding: 5px 10px;
    margin: 0px;
    color: #666666;
}
#toolsSettings ul li a:hover
{
    background-color: #dddddd;
}
#toolsSettings ul li.groupStart a
{
    margin-top: 10px;
}


#toolsMail
{
    width: 270px;
    min-height: 250px;
}

#toolsMail ul, #toolsNotifications ul
{
    height: 225px;
    overflow: scroll;
    overflow-x: hidden;
}

#toolsMail ul li a
{
    display: block;
    height: 45px;
    overflow: hidden;
    margin: 3px;
    padding: 2px 7px;
}

#toolsMail ul li a:hover, #toolsNotifications ul li:hover
{
    cursor: pointer;
    background-color: #f2f2f2;
}



#toolsMail .mailDate
{
    color: #cccccc;
    font-size: 10px;
    float: right;
}

#toolsMail li .mailHeadline
{
    color: #a3a3a3;
    line-height: 14px;
}

#toolsMail li.unread .mailHeadline
{
    color: #666666;
}
#toolsMail li.unread .mailHeadline, #toolsMail li.unread .mailSender, #toolsNotifications ul li.unread
{
    font-weight: bold;
}


#toolsNotifications
{
    width: 320px;
}


.toolActions
{
    height: 27px;
    line-height: 27px;
    background-color: #07b4df;
}
.toolActions a
{
    display: inline-block;
    color: White;
    padding: 0px 10px;
}
.toolActions a:hover
{
    text-decoration: underline;
}

.aside
{
    float: left;
    width: 250px;
}

.asideWin h3
{
    font-size: 14px;
    font-weight: normal;
    padding: 5px 0px;
}


/* added here to create the menu functionallity */

.toolsPopup {
    display: none;
    position: absolute;
    top: 30px;
    right: 0;
    overflow: visible !important;
}

.toolsPopup ul.ns{
    float: none !important;
}

li:hover > .toolsPopup {
    display: block;
    z-index: 999;
}

#toolsMail {
    right: 34px;
}

#toolsNotifications {
    right: 68px;
}