/* ----- Body & Wrappers ----- */
body {
    font: 70%/1.5  "Trebuchet MS", "Lucida Grande", Verdana, sans-serif;
    margin: 0 auto;
    padding: 0px;
    width: 730px;
    background: #fff url(bg-striped.png);
}

/* ----- Header----- */
#header {
    height: 50px;
    position: relative;
    box-shadow: 0 0 10px 1px #000;
    border: 5px solid #80b3d4;
    border-top: 0;
    border-radius: 0 0 5px 5px;
    margin: 0 0 0px;
    background: #fff url(header-bg.png) center;
}

#header #showpanel {display: none; position: absolute; margin: 5px 5px 0;}
#header #showpanel a {display: block; font-size: 1.6em; height: 35px; width: 35px; position: relative; z-index: 101; background: #fff; border: 2px solid #C5DBEC; border-radius: 5px; text-align: center; line-height: 35px;}
#header #showpanel:hover a {border-color: #79B7E7;}

#header #logo {height: 50px; width: 210px; float: left; text-align: center;}
#header #logo a {height: 100%; width: 200px; display: inline-block; background: transparent url(logo.png) top left no-repeat; }
#header #logo a:hover {background-position: center !important;}
#header #logo h1 {display: none;}

#header #search {height: 50px; position: absolute; top: 0; left: 210px; right: 240px; z-index: 1000;}
#header #search .txt {margin: 13px 10px; display: block;}
#header #search .txt input {width: 100%; color: #aaa; font-size: 1.2em; padding: 2px;}
#header #search .txt input:focus {color: #000;}

.ui-autocomplete {z-index: 1000; border-radius: 5px; padding: 2px 2px 4px;}
.ui-autocomplete .ui-menu-item-wrapper {white-space: nowrap; border-radius: 5px; display: block; border-width: 2px;}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {margin: -2px 0; padding-left: 3px;}
.ui-autocomplete .ui-menu-item-wrapper img {display: inline-block; margin-right: 5px; vertical-align: middle;}
.ui-autocomplete .ui-menu-item-wrapper span {display: inline-block; vertical-align: middle; height: 30px; line-height: 30px; font-size: 1.2em; white-space: nowrap; overflow: hidden;}
.ui-autocomplete-category span {display: block; font-weight: bold; font-size: 1.0em; text-align: center;}
.ui-autocomplete-category {margin: 5px 0 0; border-top: 1px solid #ccc;}


#header #notifications {position: absolute; top: 0; right: 190px; margin: 5px 5px 0;}
#header #notifications a.counter {display: block; height: 35px; width: 35px; position: relative; z-index: 101; background: #fff; border: 2px solid #C5DBEC; border-radius: 5px; font-size: 1.5em; text-align: center; line-height: 35px;}
#header #notifications a.small_counter {display: none; height: 35px; width: 35px; position: relative; z-index: 101; background: #fff; border: 2px solid #C5DBEC; border-radius: 5px; font-size: 1.5em; text-align: center; line-height: 35px;}
#header #notifications ul {display: none; background: #fff; box-shadow: 0 0 10px 1px #000; border-radius: 0 5px 5px 5px;  border: 2px solid #79B7E7; width: 230px; z-index: 100; position: absolute; left: 0px; top: 35px;}
#header #notifications li {float: left; width: 100%; border-bottom: 1px solid #aaa;}
#header #notifications li img {float: left; margin: 3px; border: none; border-radius: 0; padding: 0;}
#header #notifications li .status {margin: 3px; display: none;}
#header #notifications li p {font-size: 1.0em; line-height: 12px; padding: 0 2px; height: 40px; overflow: hidden;}
#header #notifications li.all {font-size: 1.2em; text-align: center; line-height: 30px;}
#header #notifications li.all a {display: block;}
#header #notifications li.alert {background: #fee url(/icons/exclamation.png) no-repeat 5px center; text-align: center;}
#header #notifications li.alert a {display: block; padding: 5px;}
#header #notifications li.info {background: #eef url(/icons/information.png) no-repeat 5px center; text-align: center;}
#header #notifications li.info a {display: block; padding: 5px;}
#header #notifications li.old {background-color: #eee;}
#header #notifications li p .comment {font-style: italic; font-size: 0.9em;}
#header #notifications .age {font-size: 0.8em;}
#header #notifications .count {font-size: 0.9em; float: right; color: #888;}
#header #notifications .avatar {float: left;}

#header #notifications li:hover {background-color: #ffc !important;}
#header #notifications:hover a {border-color: #79B7E7;}
#header #notifications.show a {border-color: #79B7E7; border-bottom: none; border-radius: 5px 5px  0 0;}
#header #notifications.show ul {display: block;}

#header #credits {position: absolute; bottom: 6px; right: 130px;}
#header #credits a {color: #000; width: 50px; background: #fff; border: 2px solid #C5DBEC; border-radius: 5px; text-align: center; display: block;}
#header #credits:hover a {border-color: #79B7E7;}

#header #self {height: 50px; width: 190px; float: right;}
#header #self .links {float: left; text-align: right; padding: 0 5px;}
#header #self .links a {display: block; width: 130px; overflow: hidden; white-space: nowrap;}
#header #self .avatar {float: right;}

#header #login_signup {height: 50px; float: right;}
#header #login_signup .btn {margin: 8px; display: block;}
#header #login_signup .btn button span {background: url(/icons/key.png) no-repeat 3px center; padding-left: 25px !important;}

/* --- fixed head ---- */
#header {
    position: fixed;
    z-index: 500;
    top: 0;
    width: 720px;
}
#src {margin-top: 65px;}

@media (max-height:400px){
    #header {position: relative;}
    #src {margin-top: 0px;}
}

/* ------ Content ------ */
#sub {
    background: #e5f0f9;
    box-shadow: 0 0 10px 1px #000;
    border: 5px solid #80b3d4;
    border-radius: 5px;
    position: relative;
}

#main_content {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    z-index: 100;
    padding: 20px 17px 0;

    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/* ----- Menu ----- */
#main {position: relative;}
#menu {margin: 10px 0 -5px 0;}
/*#menu
{
    height: 55px;
    text-align: center;
    padding: 0 0;
    position: relative;
    width: 100%;
    margin: 10px 0 -5px 0;
}*/

#menu .right {float: right;}
#menu .right li {margin: 0 0 0 5px;}
#menu .right li:first-child {margin: 0px;}

#menu li {
    box-shadow: 0 0 10px 1px #000;
    float: left;
    margin: 0 5px 0 0;
    border-radius: 10px 10px 0 0;
    background-color: #80b3d4;
}

#menu li a {
    overflow: hidden;

    display: block;
    width: 50px;
    height: 50px;
    float: left;
    font-size: 1.5em;

    background: #e5f0f9;

    border: 5px solid #80b3d4;
    border-radius: 10px 10px 0 0;
    border-bottom: 0;
    position: relative;
}

#menu li a:hover {
    border-color: #7b799c;
    background-position: center;
}

#menu li.loading a {
    /* border-color: #f00;*/
    background-position: bottom;
}

#menu li.current a {
    z-index: 10;
    border-color: #80b3d4;
    background-position: top;
}

#menu li a span {display: none;}

#menu li .pets a {background-image: url(navigation/pets.png);}
#menu li .hatchery a {background-image: url(navigation/hatchery.png);}
#menu li .trading a {background-image: url(navigation/trading.png);}
#menu li .lab a {background-image: url(navigation/lab.png);}
#menu li .adoption_center a {background-image: url(navigation/adoption_center.png);}
#menu li .projects a {background-image: url(navigation/projects.png);}
#menu li .auctions a {background-image: url(navigation/auctions.png);}
#menu li .search a {background-image: url(navigation/search.png);}
#menu li .members a {background-image: url(navigation/members.png);}
#menu li .forum a {background-image: url(navigation/forum.png);}
#menu li .edit a {background-image: url(navigation/edit.png);}
#menu li .translation a {background-image: url(navigation/world.png);}
#menu li .calendar a {background-image: url(navigation/snowflake.png);}
#menu li .challenges a {background-image: url(navigation/challenges.png);}

#main_tabs {display: none;}

/* ----- Panel ----- */
#panel {position: fixed; z-index: 1000; left: -100px; top: 0; height: 0; width: 0; background-color: rgba(0,0,0,0.5);}
#panel.show {left: 0; width: 100%; height: 100%;}
#panel > div {border-right: 5px solid #80b3d4; position: relative; height: 100%; left: -250px; width: 250px; background: #fff; box-shadow: 0 0 10px 1px #000;}
#panel.show > div {transition: left 0.3s; left: 0;}

/*#panel {display: none;  position: fixed; z-index: 1000; left: 0; top: 0; height: 100%; width: 100%;}
#panel.show {display: block;}
#panel > div {border-right: 5px solid #80b3d4; position: relative; height: 100%; width: 250px; background: #fff; box-shadow: 0 0 10px 1px #000;}*/

#panel #pself {border-bottom: 1px solid #80b3d4; float: left; width: 100%; font-size: 1.2em;}
#panel #pself .avatar {margin-right: 10px; margin-bottom: 1px; float: left;}
#panel #pself .name {display: block; margin-top: 5px;}
#panel #pself .credits {display: block;}

#panel #psearch {padding: 5px; float: left; border-bottom: 1px solid #80b3d4;}
#panel #psearch input {color: #aaa; font-size: 1.8em;}

#panel ul {clear: both; border-bottom: 1px solid #80b3d4;}
#panel li a {padding: 5px 10px; display: block; font-size: 1.6em;}


#panel li a {background-repeat: no-repeat; background-size: 35px; padding-left: 40px;}
/*#panel li a:hover {background-position: center left;}*/
#panel li .pets {background-image: url(navigation/pets.png);}
#panel li .hatchery {background-image: url(navigation/hatchery.png);}
#panel li .trading {background-image: url(navigation/trading.png);}
#panel li .lab {background-image: url(navigation/lab.png);}
#panel li .adoption {background-image: url(navigation/adoption_center.png);}
#panel li .projects {background-image: url(navigation/projects.png);}
#panel li .auctions {background-image: url(navigation/auctions.png);}
#panel li .search {background-image: url(navigation/search.png);}
#panel li .calendar {background-image: url(navigation/snowflake.png);}
#panel li .challenges {background-image: url(navigation/challenges.png);}

/* ----- Footer ----- */
#footer #cpyrgt {float: left;}
#footer #lnks {float: right;}


.clear,.clearer {clear: both;}
.clearer {
    display: block;
    font-size: 0;
    line-height: 0;
}

table {width: 100%; border-collapse: collapse; border-spacing: 0px;}
table, td, th {border-color: #7ca8c6 !important;}

a {text-decoration: none; color: #5b88a7;}
a:hover {color: #4b77ff;}

.loading {text-align: center;}
.loading p span {display: none;}
.loading p {height: 100%; background: url('loading.gif') no-repeat center ;}

/* ----- UI Tabs ----- */
.ui-tabs {
    width: 100%;
    margin: 0 0 20px;
    background: rgba(255,255,255,0.7);

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.ui-tabs .ui-section .ui-section-head {display: none;}
.ui-tabs .ui-section {margin: -2px; border: none; background: transparent;}
.ui-tabs .ui-tabs-panel {padding: 0px;}

.ui-tabs .ui-tabs-active {margin-bottom: -2px !important; padding-bottom: 2px !important;}
.ui-tabs-nav li {border-bottom-width: 0 !important;}

.ui-tabs-nav-select {padding: 3px 10px;}
.ui-tabs-nav-select select {width: 100%; font-weight: bold;}

.ui-tabs-bottom {position: relative; padding-bottom: 35px;}
.ui-tabs-bottom .ui-section .ui-section-head {display: block;}
.ui-tabs-bottom .ui-tabs-nav { position: absolute !important; left: 0; bottom: 0; right:0; margin: -1px; padding: 0 0.2em 0.2em 0; }
.ui-tabs-bottom .ui-tabs-nav li { margin-top: -2px !important; margin-bottom: 1px !important; border-top: none; border-bottom-width: 1px; }
.ui-tabs-bottom .ui-tabs-selected { margin-top: -3px !important; }

/* ----- UI Section ----- */
.ui-section {
    width: 100%;
    margin: 0 0 20px;
    font-size: 12px;
    background: rgba(255,255,255,0.7);
    position: relative;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.ui-section .ui-section-head {position: relative; padding: 2px; margin: 2px; text-align: center;}
.ui-section .ui-section-title {margin: 0 2.3em; line-height: 1.8em; text-align: center; }

.ui-section .ui-section-prev {float: left; display: block;}
.ui-section .ui-section-next {float: right; display: block;}
.ui-section .ui-section-info {float: right; display: block;}
.ui-section .ui-section-prev span, .ui-section .ui-section-next span, .ui-section .ui-section-info span {margin: 3px;}
.ui-section .ui-section-prev.ui-state-hover, .ui-section .ui-section-next.ui-state-hover, .ui-section .ui-section-info.ui-state-hover { margin: -1px; }

.ui-section .ui-section-body {margin: 10px; position:relative;}

/* ----- UI Accordion ----- */
.ui-accordion .ui-accordion-content {padding: 10px;}
.ui-accordion .ui-accordion-header {border-width: 2px;}
.ui-accordion .ui-accordion-content {border-width: 2px; margin-top: -3px;}

/* ----- UI Fieldset ----- */
.ui-fieldset {
    border-width: 2px;
    padding: 5px;
    /*background: rgba(255,255,255,0.5);*/
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.ui-fieldset legend {padding: 0px 5px; text-align: left; font-size: 0.8em; color: #39D;}
.ui-fieldset .ui-fieldset-body {height: 100%;}

/* ----- UI Widget  ----- */
.ui-widget {border-width: 3px !important;}
.ui-widget.ui-widget-content {border-color: #a6c9e2}
.ui-widget-header {border-width: 2px;}
.ui-state-default {border-width: 2px !important;}
.ui-button {border-width: 2px !important; padding: 5px 8px; border-radius: 5px; margin: 0; outline: none; box-shadow: none;}
.ui-button span {line-height: 16px; display: inline-block;}
.ui-button .ui-icon {display: inline-block; width: 16px !important; height: 16px !important; padding-left: 4px;}
.ui-button-icon-only {padding: 5px 13px;}
.ui-checkboxradio-icon {display: none !important; box-shadow: none !important; border: none !important;}
.ui-widget-overlay {z-index: 1000;}

/* ----- Control group ----- */
.ui-controlgroup {
    vertical-align: middle;
    display: inline-block;
    white-space: nowrap;
    margin: 1px;
}
.ui-controlgroup .ui-input label {margin: 0;}
.ui-controlgroup .ui-input button {margin: 0;}
.ui-controlgroup .ui-input {
    margin-right: -2px;
}

.ui-controlgroup-horizontal .ui-input:first-child .ui-controlgroup-item {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.ui-controlgroup-horizontal .ui-input:last-child .ui-controlgroup-item {
    margin-right: 2px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.ui-controlgroup-horizontal .ui-input:not(:first-child):not(:last-child) .ui-controlgroup-item {
    border-radius: 0;
}

.ui-controlgroup .ui-controlgroup-item:hover,
.ui-controlgroup .ui-controlgroup-item:focus,
.ui-controlgroup .ui-controlgroup-item.ui-visual-focus,
.ui-controlgroup .ui-controlgroup-item.ui-state-active {
    z-index: 10;
}

/* ----- Form Elements ----- */
.ui-input {display: inline;}
.ui-input input::placeholder {color: #aaa;}
.ui-input textarea::placeholder {text-align: center; color: #aaa;}

.ui-input.btn button {outline: none; margin: 1px;}
.ui-input label {margin: 1px;}

.ui-input.txt input {border: 2px solid #c5dbec; border-radius: 5px; padding: 4px;}
.ui-input.txt input:focus {border-color: #79b7e7;}
.ui-input.txt .ui-autocomplete-loading {background: #fff url('ui-anim_basic_16x16.gif') 99% center no-repeat;}

.ui-input.pwd input {border: 2px solid #c5dbec; border-radius: 5px; padding: 4px;}
.ui-input.pwd input:focus {border-color: #79b7e7;}

.ui-input.nbr > span {border: none; padding: 0px; width: 100%;}
.ui-input.nbr .ui-spinner-up {right: 2px; top: 3px; height: 11px; padding: 0; border-radius: 0; border-top-right-radius: 4px;}
.ui-input.nbr .ui-spinner-down {right: 2px; bottom: 2px; height: 11px; padding: 0; border-radius: 0; border-bottom-right-radius: 4px;}
.ui-input.nbr input {border: 2px solid #c5dbec; border-radius: 5px; padding: 4px; margin: 1px 0 0; width: 100%;}
.ui-input.nbr input:focus {border-color: #79b7e7;}

.ui-input.dte input {border: 2px solid #c5dbec; border-radius: 5px; padding: 4px;}
.ui-input.dte input:focus {border-color: #79b7e7;}

.ui-input.sel select {border: 2px solid #c5dbec; border-radius: 5px; padding: 4px; background: #fff;}
.ui-input.sel select:focus {border-color: #79b7e7;}

.ui-input.are textarea {border: 2px solid #c5dbec; border-radius: 5px; padding: 4px; height: 70px;}
.ui-input.are textarea:focus {border-color: #79b7e7;}


.ui-input.clr input {
    cursor: pointer;
    color: transparent !important;
    border: 4px solid #c5dbec; border-radius: 5px; padding: 2px;
    width: 40px; height: 40px;
}
.ui-input.clr input:focus {border-color: #79b7e7;}
.cp-color-picker {z-index: 1002 !important;}

input, select, textarea {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
}

.ui-buttonset .ui-state-active {z-index: 2;}
.ui-buttonset .ui-state-hover {z-index: 1;}


.ui-widget.ui-progressbar {
    width: 100%;
    height: 25px;
    background: #3575b7;
    border: 3px solid #3575b7;
    border-radius: 10px;

    position: relative;
    text-align: center;
    overflow: visible;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.ui-progressbar-vertical {
    width: 25px;
    height: 100%;
}

.ui-progressbar-value.ui-corner-left {border-radius: 8px 0 0 8px;}
.ui-progressbar-value.ui-corner-right {border-radius: 8px;}
.ui-progressbar-value.ui-corner-bottom {border-radius: 0 0 8px 8px;}
.ui-progressbar-value.ui-corner-top {border-radius: 8px;}

.ui-progressbar-value {margin: 0px !important; border: none; position: absolute; background: #55a2f1 url(glass.png) center;}
.ui-progressbar-vertical .ui-progressbar-value {bottom: 0; background: #55a2f1 url(glass-vertical.png) center repeat-y;}

.ui-progressbar-title {
    color: #ffffff;
    text-shadow: 0 1px #3575b7;
    font-size: 0.9em;
    position: relative;
    white-space: nowrap;
}

.ui-progressbar-vertical .ui-progressbar-title{
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%) rotate(-90deg);
    transform-origin: 50% 50%;
    -ms-transform: translate(-32%,-50%) rotate(-90deg);
    -ms-transform-origin: 50% 50%;
    -webkit-transform: translate(-50%,-50%) rotate(-90deg);
    -webkit-transform-origin: 50% 50%;
    -moz-transform: translate(-50%,-50%) rotate(-90deg);
    -moz-transform-origin: 50% 50%;
    -o-transform: translate(-50%,-50%) rotate(-90deg);
    -o-transform-origin: 50% 50%;

}

.ui-progressbar-title .age {color: #fff;}

/* ----- Tooltips ----- */
/* Tipsy */
.ui-tooltip {opacity: 0.8; font-size: 10px; position: absolute; padding: 5px; z-index: 100000; border: none !important; background: none; box-shadow: none;}
.ui-tooltip-content {background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center;}
.ui-tooltip-content {border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}


/* ----- Dialog ----- */
.ui-dialog {box-shadow: 0 0 10px 1px #000; max-width: 90%; height: auto !important;}
#dialog .txt input {width: 100%;}
#dialog .sel select {width: 100%;}
#dialog textarea {width: 100%;}

/* ----- Loading ----- */
div.loading {
    box-sizing: border-box;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(200,200,200,0.3) url('loading.gif') no-repeat center;
    border-radius: 3px;
}

/* ----- Upload ------ */
#upload_progress {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
}

#upload_progress div {
    background: #80b3d4;
    height: 5px;
}

/* ----- Other ----- */
li, img {vertical-align: middle;}

a {outline: none;}
a.user.name, a.pet, a.group.name, a.project.name {font-weight: bold; color: #2e6e9e;}
a.user.name:hover, a.pet:hover, a.group.name:hover, a.project.name:hover {color: #1d5987; text-decoration: underline;}

a.user.name.staff {color: #0b9fbf;}
a.user.name.mod {color: #35d1a0;}
/*a.user.name.artmod {color: #a25dcd ;}*/

a.user.avatar {position: relative; display: inline-block;}
a.user.avatar img {margin: 0;}
a.user.avatar .status {position: absolute; right: 0; bottom: 0; display: block; border-top: 1px solid #fff; border-left: 1px solid #fff; width: 5px; height: 5px;}
a.user.avatar .status.online {background: #88CC5F;}
a.user.avatar .status.vacation {background: #F00;}
#self a.user.avatar .status {display: none;}

a.group.avatar {position: relative; display: inline-block;}
a.group.avatar img {margin: 0;}

.icon {background: #fff; border-radius: 5px; border: 2px solid #ccc; padding: 1px;}
.icon:hover {border-color: #aaa;}

abbr.age {color: #777; text-decoration: none;}
abbr.credits {text-decoration: none;}
abbr.credits span {color: #990; font-weight: bold; font-size: 0.9em; padding: 1px;}

.ui-section.empty {text-align: center;}

.pages {padding: 0 5px; clear: both;}
.pages a {margin: 0 1px;}
.pages .current {font-weight: bold; font-size: 1.1em;}
.pages a:hover {font-weight: bold; font-size: 1.1em;}

/* ------ Tipsy ------- */
.tipsy { font-size: 10px; position: absolute; padding: 5px; z-index: 100000; }
.tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }

/* Rounded corners */
.tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }

/* Uncomment for shadow */
/*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/

.tipsy-arrow { position: absolute; width: 0; height: 0; border: 5px solid transparent; }

/* Rules to colour arrows */
.tipsy-arrow-n { border-bottom-color: #000; }
.tipsy-arrow-s { border-top-color: #000; }
.tipsy-arrow-e { border-left-color: #000; }
.tipsy-arrow-w { border-right-color: #000; }

.tipsy-n .tipsy-arrow, .tipsy-nw .tipsy-arrow, .tipsy-ne .tipsy-arrow { top: 0; border-top: none; }
.tipsy-s .tipsy-arrow, .tipsy-sw .tipsy-arrow, .tipsy-se .tipsy-arrow { bottom: 0; border-bottom: none; }
.tipsy-n .tipsy-arrow, .tipsy-s .tipsy-arrow { left: 50%; margin-left: -5px; }
.tipsy-nw .tipsy-arrow, .tipsy-sw .tipsy-arrow { left: 10px; }
.tipsy-ne .tipsy-arrow, .tipsy-se .tipsy-arrow { right: 10px; }
.tipsy-e .tipsy-arrow, .tipsy-w .tipsy-arrow { top: 50%; margin-top: -5px; }
.tipsy-e .tipsy-arrow { right: 0; border-right: none; }
.tipsy-w .tipsy-arrow { left: 0; border-left: none;}


/* ----- Ad Banners ----- */
.adbanner {width: 100%; display: block; background: #fff; text-align: center; overflow: hidden;}
.adbanner iframe {display: inline-block; vertical-align: middle;}
.ad320x50 iframe {height: 50px; width: 320px;}
.ad468x60 iframe {height: 60px; width: 468px;}
.ad728x90 iframe {height: 90px; width: 720px;}
.ad300x250 iframe {height: 250px; width: 300px;}
.ad320x480 iframe {height: 480px; width: 320px;}

#banner_top {border-bottom: 2px solid #80b3d4;}
#banner_bottom {border-top: 2px solid #80b3d4;}
#banner_feed {}

#interstitial {position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 10000; background-color: rgba(0,0,0,0.5);}
#interstitial > div {border: 2px solid #80b3d4; display: inline-block; border-radius: 5px; background: #fff; padding: 2px; box-shadow: 0 0 10px 1px #000;}
#interstitial .ui-input.btn {position: absolute; top: 0; right: 0; padding: 4px;}

#interstitial.ad300x250 > div {position: absolute; left: 50%; top: 50%; margin-left: -154px; margin-top: -129px;}
#interstitial.ad320x480 > div {position: absolute; left: 50%; top: 50%; margin-left: -164px; margin-top: -244px;}
@media (max-height:480px){#interstitial.ad320x480 > div {top: 0; margin-top: 0;}}

/*#interstitial.ad300x250 > div {position: absolute; left: 50%; top: 50%; margin-left: -154px; margin-top: -150px;}
#interstitial.ad320x480 > div {position: absolute; left: 50%; top: 50%; margin-left: -164px; margin-top: -260px;}
@media (max-height:500px){#interstitial.ad320x480 > div {bottom: 0; top: auto; margin-top: 0;}}*/

/* ----- Overlay ----- */
body #overlay {display: none;}
body.overlay {overflow: hidden;}
body.overlay #overlay {display: block; background-color: rgba(0,0,0,0.5); position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000; margin: 0;}
body.overlay #overlay section {position: absolute; top: 0; left: 0; right: 0; width: 700px; margin: 80px auto; box-shadow: 0 0 10px 1px #000;  background-color: #FFF;}



#overlay .ui-section {background-color: #fff;}
#overlay .ui-section-head {display: none;}
#overlay .ui-section-body {margin: 0;}
#overlay .ui-fieldset {border-radius: 0; border-width: 2px 0 0 0; text-align: center; padding: 7px 5px;}
#overlay .ui-fieldset legend {text-align: center;}

#overlay .filter {border-radius: 0; border-width: 0 0 2px 0; border-bottom-style: dotted; text-align: center; padding: 7px 5px;}
#overlay .actions legend, #overlay .filter legend, #overlay .content legend {display: none;}
#overlay .content, #overlay .content fieldset {border-width: 0 !important; padding: 0;}
#overlay ul {height: 398px; overflow: auto; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;}
#overlay ul li {margin: 1px;}

@media (max-height: 620px){
    #overlay ul {height: 350px;}
}

@media (max-height: 550px){
    #overlay ul {height: 250px;}
}

@media (max-width: 730px), (max-height: 450px) {
    body.overlay #overlay section {top: 0; left: 0; right: 0; bottom: 48px; margin: 0; overflow: auto; position: fixed; width: auto; border: none;}
    #overlay ul {height: auto; position: fixed; bottom: 52px; top: 52px; left: 0; right: 0;}
    #overlay .actions {position: fixed; bottom: 0; left: 0; right: 0; height: 48px;}
}

#overlay .actions .ui-input.sel {display: inline-block;}

#overlay .login legend {display: none;}
#overlay .login {border-width: 0 !important;}
#overlay .login  .ui-fieldset-body {display:flex; flex-wrap: wrap; justify-content: center; align-items: center;}
#overlay .login .ui-input {margin: 5px 2px 0;}
#overlay .login .ui-input:last-child {width: 100%;}
#overlay .login .ui-input:last-child button {border: none; background: none; padding: 0;}

#overlay .sign_up legend {display: none;}
#overlay .sign_up {border-width: 0 !important;}
#overlay .sign_up  .ui-fieldset-body {display:flex; flex-wrap: wrap; justify-content: center; align-items: center;}
#overlay .sign_up .ui-input {margin: 5px 2px 0;}

#overlay .reset_password legend {display: none;}
#overlay .reset_password {border-width: 0 !important;}
#overlay .reset_password  .ui-fieldset-body {display:flex; flex-wrap: wrap; justify-content: center; align-items: center;}
#overlay .reset_password .ui-input {margin: 5px 2px 0;}

#overlay .account legend {display: none;}
#overlay .account {border-width: 0 !important; font-size: 1.2em; margin: 5px 0 0;}
#overlay .username input {font-size: 1.3em; max-width: 200px;}
#overlay .gender .rdo input[value=Female] + label .ui-icon {background: url(/icons/female.png) no-repeat left center; display: inline-block !important;}
#overlay .gender .rdo input[value=Male] + label .ui-icon {background: url(/icons/male.png) no-repeat left center; display: inline-block !important;}
#overlay .gender .rdo input[value=Other] + label .ui-icon {background: url(/icons/color_wheel.png) no-repeat left center; display: inline-block !important;}
#overlay .country___timezone .ui-input {margin: 5px 2px 0;}
#overlay .country___timezone select {background: url(/icons/world.png) no-repeat 5px center; padding-left: 25px; max-width: 250px;}
#overlay .country___timezone .ui-input:last-child select {background: url(/icons/time.png) no-repeat 5px center;}
#overlay .country___timezone .ui-fieldset-body {font-size: 1.2em; display:flex; flex-wrap: wrap; justify-content: center; align-items: center;}
#overlay .display_currency .rdo input[value=USD] + label .ui-icon {background: url(/icons/money_dollar.png) no-repeat left center; display: inline-block !important;}
#overlay .display_currency .rdo input[value=EUR] + label .ui-icon {background: url(/icons/money_euro.png) no-repeat left center; display: inline-block !important;}
#overlay .display_currency .rdo input[value=GBP] + label .ui-icon {background: url(/icons/money_pound.png) no-repeat left center; display: inline-block !important;}
#overlay .password .ui-fieldset-body {font-size: 1.2em; display:flex; flex-wrap: wrap; justify-content: center; align-items: center;}
#overlay .password .ui-input {margin: 5px 2px 0;}
#overlay .create_account legend {display: none;}
/*#overlay .entry {max-height: 400px; overflow: auto; min-height: 300px;}
#overlay .entry img.image {max-height: 370px;}*/

#overlay .btn button[onclick*='facebook'] span {background: url(icons/facebook.gif) no-repeat 3px center; padding-left: 25px !important;}
#overlay .btn button[onclick*='google'] span {background: url(icons/google.png) no-repeat 3px center; padding-left: 25px !important;}

/* ----- Edit Text ----- */
.edit_txt {cursor: pointer;}
.edit_txt:hover {cursor: pointer;}
.edit_txt textarea {display: none;}
.edit_txt.active textarea {display: block; height: 100%; width: 100%;}
.edit_txt.active .parsed_txt {display: none !important;}
.edit_txt div.empty {font-size: 1.2em; text-align: center; color: #aaa; line-height: 20px;}
.drag_drop.empty {font-size: 1.2em; text-align: center; color: #aaa; line-height: 0; position: absolute; bottom: 50%; left: 0; right: 0; padding: 0 20px;}

/* ----- Parse Text ----- */
span.action {font-style: italic;}
.parsed_txt h1 {font-size: 2em; display: inline-block;}
.parsed_txt h2 {font-size: 1.5em; display: inline-block;}
.parsed_txt h3 {font-size: 1.2em; display: inline-block !important;}

/*abbr.smiley {display: inline-block; padding: 0 12px;}*/
abbr.smiley {display: inline-block; width: 15px; height: 15px; margin: -1px 0; padding: 0;}
abbr.smiley span {display: none;}
abbr.smile {background: url(/icons/emoticon_smile.png) no-repeat center;}
abbr.laugh {background: url(/icons/emoticon_grin.png) no-repeat center;}
abbr.sad {background: url(/icons/emoticon_unhappy.png) no-repeat center;}
abbr.cheeky {background: url(/icons/emoticon_tongue.png) no-repeat center;}
abbr.surprised {background: url(/icons/emoticon_surprised.png) no-repeat center;}
abbr.wink {background: url(icons/emoticon_wink.png) no-repeat center;}
abbr.xd {background: url(icons/emoticon_XD.png) no-repeat center;}
abbr.heart {background: url(/icons/heart.png) no-repeat center; background-size: 12px;}

/*img.external {max-width: 99%;}*/
/*img.external {max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; contain: layout;}*/
img.external {max-width: 100%; max-height: 100%; height: auto; object-fit: contain;}
iframe.video {max-width: 500px; width: 100%; height: 300px;}

/*@media (max-width:700px){img.external {max-width: 400px;} iframe.video {height: 300px;}}
@media (max-width:650px){img.external {max-width: 350px;} iframe.video {height: 300px;}}
@media (max-width:600px){img.external {max-width: 300px;} iframe.video {height: 250px;}}
@media (max-width:550px){img.external {max-width: 250px;} iframe.video {height: 250px;}}
@media (max-width:500px){img.external {max-width: 200px;} iframe.video {height: 200px;}}
@media (max-width:450px){img.external {max-width: 150px;} iframe.video {height: 200px;}}
@media (max-width:400px){img.external {max-width: 100px;} iframe.video {height: 150px;}}*/

/*@media screen and (-webkit-min-device-pixel-ratio:0) {
    img.external {max-width: 99%;}
    iframe.video {max-width: 99%;}
}*/

#outdated_browser {border: 2px solid #F00; width: 100%; padding: 20px 0; position: absolute; top: 100px; left: 0px; z-index: 1000; background: #fff; font-size: 1.3em; font-weight: bold; text-align: center;}

/* ----- Responsive ----- */
@media (max-width:730px){

    body {width: 100%; min-width: 320px;}
    #header {width: 100%; min-width: 320px; left: 0; right: 0; border-width: 5px 0; border-radius: 0;}
    #header #search input {width: 100% !important;}
    #sub {border-width: 5px 0; border-radius: 0;}
    #wrapper {overflow: hidden;}

}

@media (max-width:599px){

    #header #search {display: none; background-color: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: auto;}
    #header #search.show {display: block;}
    #header #search .ui-input.txt{margin: 8px;}
    #header #search input{font-size: 2em !important;}
    /*.ui-autocomplete {position: fixed;}*/

    #main_content {padding: 20px 0 0;}
    .ui-tabs {border-width: 3px 0 !important; border-radius: 0;}
    .ui-section {border-width: 3px 0 !important; border-radius: 0;}

}

@media (max-width:599px){

    #header #showpanel {display: block;}
    #header #logo {width: 100%;}

    #header #notifications {right: 0;}
    #header #notifications.show {position: fixed; z-index: 1000; left: 0; top: 0; height: 100%; width: 100%; margin: 0; background-color: rgba(0,0,0,0.5);}
    #header #notifications ul {display: block; border: none; border-radius: 0; border-left: 5px solid #80b3d4; position: absolute; left: auto; top: 0; right: -270px; height: 100%; width: 250px; background: #fff; box-shadow: 0 0 10px 1px #000;}
    #header #notifications.show ul {transition: right 0.3s; right: 0;}
    #header #notifications.show ul li.all {font-size: 1.5em; line-height: 50px;}
    #header #notifications.show > div.ui-input {display: none;}

    #header #credits {display: none;}
    #header #self {display: none;}
    #header #login_signup {position: fixed; bottom: 0;  left: 0; right: 0; text-align: center; z-index: 100; box-shadow: 0 0 10px 1px #000; background: #fff; border-top: 2px solid #80b3d4;}

    #menu .right {display: none;}
    #menu .left :last-child {margin: 0 !important;}

    #src_pets #sub_overview .ui-tabs .ui-tabs-nav {display: none;}
    #src_pets #sub_overview .ui-tabs .ui-tabs-nav-select {display: block !important;}

    #src_pets #sub_profile .ui-tabs .ui-tabs-nav {display: none;}
    #src_pets #sub_profile .ui-tabs .ui-tabs-nav-select {display: block !important;}

}

.ui-tabs-tab, .ui-section-head, .pet.name {font-weight: 500 !important;}

.ui-section .ui-rotatable-handle {
    position: absolute;
    height: 19px;
    width: 19px;
    border: 2px solid #aaa;
    border-radius: 5px;
    cursor: pointer;
    background: url(/icons/arrow_rotate_clockwise.png);
    background-color: rgba(255,255,255,0.8);
    background-repeat: no-repeat !important;
    background-position: center !important;
    left: 1px;
    bottom: 1px;
}

.ui-section .ui-rotatable-handle:hover {border-color: #000;}

.ui-section .ui-icon-gripsmall-diagonal-se {
    height: 19px;
    width: 19px;
    border: 2px solid #aaa;
    border-radius: 5px;
    background: url(/icons/arrow_out.png) !important;
    background-color: rgba(255,255,255,0.8) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    right: 1px;
    bottom: 1px;
}

.ui-section .ui-icon-gripsmall-diagonal-se:hover {border-color: #000;}

.ui-section .ui-draggable-handle {
    cursor: move;
}