Menu van Site

body {
    background-color: #bce0ee;
    background-image: url( ../Images/bg2.png );
    font-size: 10px;
    font-family: Verdana;
}

a {
    color: #000;
    text-decoration:none;
}

div.contentBox {
    background-color: #ffffff;
    margin:0 auto 10px;
    border: 1px solid #000;
}

div.mainBox {
    background-color: #ffffff;
    width: 950px;
    margin: 0 auto;
    border: 1px solid #aaa;
}

div.mainBox > div.mid {
    overflow: hidden;
}

div.myOverview {
    height: 143px;
    width: 450px;
    background-image: url( ../Images/backdrop.png );
}

div.boxContent {
    padding:5px 5px 5px 5px;
}

/* header ---------------------- */

div.mainBox > div.top {
    height: 150px;
    width: 950px;
    background-image: url( ../Images/header.gif );
    overflow: hidden;
}

div.mainBox > div.top > a > img {
    float: left;
    border:0;
    padding:5px 0 0 5px;
}

div.boxHeader {
    padding:5px 0 5px 0;
    width:100%;
    background-color:#ccc;
    text-indent:10px;
    font-weight:bolder;
}

div.usersBox {
    background-color: #ffffff;
    margin:10px 10px;
    padding:10px 5px 10px 5px;
    border: 1px solid #000;
    text-align:center;
}

/* footer ---------------------- */

div.mainBox > div.bot > p {
    text-align: center;
}

div.mainBox > div.bot > p.copyright > a, div.mainBox > div.bot > p.copyright {
    color: #aaa;
}

/* navigation ---------------------- */

div.navBar {
    width:900px;
    min-height:25px;
    position:relative;
    padding: 5px 0 5px 0;
    top:122px;
    left: -70px;
}

div.navBar > div.navButton {
    background-color: #ffffff;
    margin:0 auto 0 5px;
    border: 1px solid #000;
    min-width:90px;
    min-height:12px;
    text-align:center;
    padding:5px 5px 5px 5px;
    float:left;
    cursor:pointer;
}

div.navBar > div.navButton:hover {
    background-color: #aaa;
    margin:0 auto 0 5px;
    border: 1px solid #000;
    width:90px;
    min-height:12px;
    text-align:center;
    padding:5px 5px 5px 5px;
    float:left;
    font-weight:bolder;
}

div.SubnavBar {
    width:900px;
    height:25px;
    position:relative;
    padding: 5px 0 0 5px;
    margin:0 0 0 0;
}

div.SubnavBar > div.navButton:first-child {
    border-left: none;
}

div.SubnavBar > div.navButton {
    margin:0 auto 0 5px;
    text-align:center;
    padding:5px 35px 0 35px;
    float:left;
    cursor:pointer;
    border-left:thin gray dotted;
}

div.SubnavBar > div.navButton:hover {
    margin:0 auto 0 5px;
    text-align:center;
    padding:5px 35px 5px 35px;
    float:left;
    font-weight:bolder;
}

div.navButton > a {
    text-decoration:none;
}

/* column division ---------------------- */

div.column {
    float: left;
}

#column1 {
    overflow: hidden;
    width:450px;
    padding:10px 5px 10px 5px;
}

#column2 {
    overflow: hidden;
    width:310px;
    padding:10px 0 10px;
}

#column3 {
    overflow: hidden;
    width:170px;
    padding:10px 5px 10px 5px;
}

body#news_body #column1 {
    overflow: hidden;
    width:230px;
    padding:10px 5px 10px 5px;
}

body#news_body #column2 {
    overflow: hidden;
    width:530px;
    padding:10px 0 10px;
}

body#news_body #column3 {
    overflow: hidden;
    width:170px;
    padding:10px 5px 10px 5px;
}

/* avatar widget ---------------------- */
#avatar-plate {
    background: url(../Images/misc/info_habbo_plate.png) no-repeat 2px -162px;
    height: 138px;
    width: 96px;
    position:relative;
    top: 45px;
    left: 15px;
    cursor:pointer;
}

#avatar-plate:hover {
    background-position: 2px 75px;
}

div.avatarinfo {
    height:60px;
    width:100%;
    background-color: #7B7B71;
}

div.avatarextrainfo {
    width:100%;
    background-color: #A0A097;
    margin:0 auto 10px;
}

div.avatarextrainfo > .content {
    padding:10px 15px 10px 15px;
    border-bottom:thin gray dotted;
}

input {
    border:0;
    font-size:10px;
    padding:1px 2px 1px 5px;
    margin:5px 0 5px 5px;
}

input:focus {
    background-color:#eee;
}

.MottoContainer {
    margin:5px 3px;
    width:323px;
    max-height:24px;
    float:right;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../Images/misc/motto_field.png);
    overflow:hidden;
}

.MottoContainer > .Usersname {
    float:left;
    font-weight:bold;
    padding:5px 2px 5px 5px;
}

.MottoContainer > .Usersmotto {
    float:left;
    padding:5px 2px 5px 5px;
    color:gray;
}

/* Link bar ----------------- */

div.link-bar {
    padding: 30px 0 5px 20px;    
    background-color: #7B7B71;
}

div.link-bar div {
    float: left;
    margin: 5pt 25px 0pt 7px;
    padding: 2px 0 2px 20px;
    line-height: 16px;
    float: left;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../Images/icons/info_icons.png);
}

div.link-bar > .change-looks   { background-position: 0 -976px; }
div.link-bar > .credits        { background-position: 0 -143px; }
div.link-bar > .club           { background-position: 0 -95px; }
div.link-bar > .vipclub        { background-position: 0 -1120px; }
div.link-bar > .activitypoints { background-position: 0 -1070px; padding-left: 18px }

/* feed container and items ---------------------- */

div.avatarextrainfo > .content {
    background: transparent url(../Images/icons/big_icons.png) no-repeat 10px 7px;
    min-height: 28px;
    padding:10px 15px 10px 45px;
    border-top:thin gray dotted;
}

div.avatarextrainfo > .smallcontent {
    background: transparent url(../Images/icons/small_icons.png) no-repeat 15px 7px;
    min-height: 15px;
    padding:10px 15px 10px 45px;
    border-top:thin gray dotted;
}

div.avatarextrainfo > .content:first-child {
    border-top: none;
}

div.avatarextrainfo > .content > .remove-feed-item {
    display: block;
    float: right;
    text-indent: -10000px;
    background: transparent url(../Images/icons/close_msg.png) no-repeat;
    width: 13px;
    height: 13px;
}

div.avatarextrainfo > .content:hover > .remove-feed-item {
    background-position: -118px 0;
}

div.avatarextrainfo > .content > .remove-feed-item:active,
div.avatarextrainfo > .content > .remove-feed-item:focus { outline: none; }

div.avatarextrainfo > .content#feed-birthday         { background-position: -3153px 6px; font-weight: bold; color: white; }
div.avatarextrainfo > .content#feed-notification     { background-position: -439px 6px;  }
div.avatarextrainfo > .content#feed-friends          { background-position: -892px 6px;  }
div.avatarextrainfo > .content#feed-item-giftqueue   { background-position: -2240px 6px; }
div.avatarextrainfo > .content#feed-item-dailygift   { background-position: -2240px 6px; }
div.avatarextrainfo > .content#feed-item-creditdonation { background-position: -1790px 6px; }
div.avatarextrainfo > .content#feed-item-productdonation { background-position: -2240px 6px; }
div.avatarextrainfo > .content#feed-item-hcgift      { background-position: -2690px 6px; }
div.avatarextrainfo > .content#feed-item-hc-reminder { background-position: -1339px 6px; }
div.avatarextrainfo > .content#feed-item-hc-expired  { background-position: -1339px 6px; }
div.avatarextrainfo > .content#feed-item-campaign    { background-image: none; }
div.avatarextrainfo > .smallcontent#feed-pending-members  { background-position: 15px -367px; }
div.avatarextrainfo > .smallcontent#feed-lastlogin        { background-position: 15px -297px; }
div.avatarextrainfo > .smallcontent#feed-group-discussion { background-position: 15px -456px; }
div.avatarextrainfo > .smallcontent#feed-trading-enabled  { background-position: 15px -825px; }
div.avatarextrainfo > .smallcontent#feed-trading-disabled { background-position: 15px -886px; }

/* Enter Hotel Submitbtn ---------------------- */

#enter-hotel {
    position: relative;
    top: -20px;
    right: 10px;
    float:right;
    padding:28px 0;
}

#enter-hotel div a, div.div.avatarinfo#enter-hotel div span {
    float: left;
    background: transparent url(../Images/misc/enter_button.png) no-repeat -9px 0;
    height: 49px;
    text-align: center;
    line-height: 47px;
    padding: 0 26px 0 19px;
    font-size: 14px;
    text-decoration:none;
    color:#fff;
    position: relative;
}

#enter-hotel div span {
    padding-right: 10px;    
    background-position: -9px -98px;
}
#enter-hotel div:hover a {
    background-position: -9px -49px;
    text-decoration: none;
}
#enter-hotel div:hover b {
    background-position: 0 -49px;    
}
#enter-hotel div a i {
    background: transparent url(../Images/misc/flashy_arrow.gif) no-repeat 0 50%;
    padding: 10px 10px;
    position: absolute;
    right: 0;
    top: 13px;
    line-height: 1px;
    height: 1px;
    font-size: 1px;
}
#enter-hotel div b {
    float: left;
    background: transparent url(../Images/misc/enter_button.png) no-repeat 0 0;
    height: 49px;
    width: 9px;
}

/* campaign widget ---------------------- */
div.campaigncontainer {
    padding:5px 5px 5px 5px;
}

div.campaigncontainer#odd {
    background-color: #aaa;
}
div.campaigncontainer#even {
    background-color: #bbb;
}


div.campaigncontainer > .image {
    padding:5px 5px 5px 5px;
    float:left;
    width:160px;
    height:62px;
}

div.campaigncontainer > .campaign {
    padding:0 5px 2px 5px;
    min-height:62px;
}

div.campaign > .title {
    padding:0 5px 2px 5px;
    font-weight:bolder;
}

div.campaign > .story {
    padding:0 5px 5px 5px;
}

div.campaign > .published {
    float:left;
}

div.campaign > .readmore {
    float:right;
}

/* news widget ---------------------- */
div.newsHeader {
    height: 187px;
    width: 300px;
    margin:0 5px 0 5px;
}

div.HeadlineStory {
    height: 187px;
    width: 300px;
}

div.HeadlineStory> p.Mainheadline {
    padding:10px 5px 0 15px;
    margin:0 0 0 0;
    color:#fff;
    font-size:large;
    font-weight:bolder;
}
p.Mainheadline > a {
    color:#fff;
}

div.HeadlineStory> p.Mainstory {
    padding:5px 5px 0 15px;
    margin:0 0 0 0;
    color:#fff;
    font-size: 11px;
}

div.storybox {
    width:300px;
    background-color: #7B7B71;
    margin:0 5px 0 5px;
    padding:5px 0 5px 0;
}

div.storybox#odd {
    background-color: #aaa;
}
div.storybox#even {
    background-color: #bbb;
}

div.storybox > p.headline {
    padding:0 5px 0 5px;
    margin:0 0 0 0;
}
div.storybox > p.date {
    padding:0 5px 0 5px;
    margin:0 0 0 0;
    color:#7B7B71;
}
#story {
    width:300px;
    padding:0 5px 0 5px;
}

div.storyboxEnd {
    width:300px;
    background-color: #7B7B71;
    padding:5px 0 5px 0;
    margin:0 5px 10px 5px;
    text-align:right;
}

div.storyboxEnd > .readmore {
    padding:0 10px 0 0;
}

/* staff widget ---------------------- */

div.StaffBox {
    height:110px;
    width:410px;
}

div.StaffBox > div.Usersname {
    padding-top:25px;
    font-weight:bolder;
}

div.StaffBox > div.OnlineStatus {
    padding-top:25px;
    float:right;
    font-weight:bolder;
}

div.OnlineStatus > div.Online {
    color:green;
}
div.OnlineStatus > div.Offline {
    color:maroon;
}

/* user home widget ---------------------- */

div.HomeBox {
    height:110px;
    width:410px;
}

div.HomeBox > div.UsersName {
    padding-top:25px;
    font-weight:bolder;
}

div.HomeBox > div.OnlineStatus {
    padding-top:25px;
    float:right;
    font-weight:bolder;
}

div.FriendsBox {
    text-indent:5px;
}

div.RoomBox#odd {
    background-color: #ddd;
    text-align: center;
    border-top: 1px solid #000;
    padding: 5px;
}
div.RoomBox#even {
    background-color: #fff;
    text-align: center;
    border-top: 1px solid #000;
    padding: 5px;
}

/* News Page ---------------------- */

div.contentBox > div.boxContent > a {
    text-decoration:none;
}

div.contentBox > div.boxContent > a:hover {
    font-weight:bold;
}

div.boxContent > div.story {
    padding:2px 10px 2px 10px;
}

div.boxContent > div.extrainfo {
    color:#BBB;
    height:17px;
}

div.boxContent > div.extrainfo > div.poster {
    padding:5px 15px 0 5px;
    float:left;
}

div.boxContent > div.extrainfo > div.date {
    padding:5px 15px 0 15px;
    float:right;
}

/* Fancy Triangle shit ---------------------- */

.triangle-border {
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    border:5px solid #cccccc;
    color:#333;
    background:#fff;
    
    /* css3 */
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

.triangle-border.left {
    margin-left:30px;
}

.triangle-border.right {
    margin-right:30px;
}

.triangle-border.staff {
    border:5px solid #3355AA;
}

.triangle-border:before {
    content:"";
    display:block; /* reduce the damage in FF3.0 */
    position:absolute;
    bottom:-40px; /* value = - border-top-width - border-bottom-width */
    left:40px; /* controls horizontal position */
    width:0;
    height:0;
    border:20px solid transparent;
    border-top-color:#cccccc;
}

/* creates the smaller  triangle */
.triangle-border:after {
    content:"";
    display:block; /* reduce the damage in FF3.0 */
    position:absolute;
    bottom:-26px; /* value = - border-top-width - border-bottom-width */
    left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
    width:0;
    height:0;
    border:13px solid transparent;
    border-top-color:#fff;
}

/* creates the larger triangle */
.triangle-border.left:before {
    top:10px; /* controls vertical position */
    left:-30px; /* value = - border-left-width - border-right-width */
    bottom:auto;
    border-width:15px 30px 15px 0;
    border-style:solid;
    border-color:transparent #cccccc;
}

/* creates the smaller  triangle */
.triangle-border.left:after {
    top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
    left:-21px; /* value = - border-left-width - border-right-width */
    bottom:auto;
    border-width:9px 21px 9px 0;
    border-style:solid;
    border-color:transparent #fff;
}

/* creates the larger triangle */
.triangle-border.right:before {
    top:10px; /* controls vertical position */
    right:-30px; /* value = - border-left-width - border-right-width */
    bottom:auto;
    left:auto;
    border-width:15px 0 15px 30px;
    border-style:solid;
    border-color:transparent #cccccc;
}

/* creates the smaller  triangle */
.triangle-border.right:after {
    top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
    right:-21px; /* value = - border-left-width - border-right-width */
    bottom:auto;
    left:auto;
    border-width:9px 0 9px 21px;
    border-style:solid;
    border-color:transparent #fff;
}

.triangle-border.staff:before {
    border-color:transparent #3355AA;
}

.triangle-border.staff:after {
    border-color:transparent #fff;
}

/* News Comments ---------------------- */

div.boxContent > div.UserComment.left {
    min-height:122px;
    padding-right:20px;
}
div.boxContent > div.UserComment.left > div.Avatar {
    float:left;
}
div.boxContent > div.UserComment.left > p#Comment {
    margin-left:100px;
    width:360px;
}

div.boxContent > div.UserComment.right {
    min-height:122px;
    padding-right:20px;
}
div.boxContent > div.UserComment.right > div.Avatar {
    float:right;
}
div.boxContent > div.UserComment.right > p#Comment {
    margin-left:20px;
    margin-right:80px;
    width:360px;
}

div.boxContent > div.CommentInput {
    padding-top:10px;
    height:130px;
}
div.boxContent > div.CommentInput > div.MyAvatar {
    float:left;
}
div.boxContent > div.CommentInput > div.Comment {
    float:right;
    padding-right:10px;
}

div.boxContent > div.CommentInput > div.Comment > textarea {
    width: 400px;
    height: 100px;
    border: 5px solid #cccccc;
    padding: 5px;
    margin:0 20px 20px 0;
    background-image: url(../Images/misc/comment.gif);
    background-position: bottom right;
    background-repeat: no-repeat
}

div.Submitbtn {
    padding:5px 5px 5px 5px;
}

div.Submitbtn.right {
    float:right;
}

div.Submitbtn.left {
    float:left;
}

.Submitbtn a, .Submitbtn button{
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;

    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:12px;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
.Submitbtn button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
.Submitbtn button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}
.Submitbtn button img, .Submitbtn a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

/* STANDARD */

button:hover, .Submitbtn a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.Submitbtn a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

/* POSITIVE */

button.positive, .Submitbtn a.positive{
    color:#529214;
}
.Submitbtn a.positive:hover, button.positive:hover{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
.Submitbtn a.positive:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}

/* NEGATIVE */

.Submitbtn a.negative, button.negative{
    color:#d12f19;
}
.Submitbtn a.negative:hover, button.negative:hover{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
.Submitbtn a.negative:active{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}

/* REGULAR */

button.regular, .Submitbtn a.regular{
    color:#336699;
}
.Submitbtn a.regular:hover, button.regular:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.Submitbtn a.regular:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

/* General boxes - error and success ---------------------- */

div.errormsg {
    padding: 7px;
    background-color: #fff4f2;
    border: 1px solid #a63c29;
    color: #E2001A;
    margin-top: 5px;
}

div.errormsg > h3 {
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    font-size: 13px;
}

div.goodmsg {
    padding: 7px;
    background-color: #d8f3d8;
    border: 1px solid #4da04d;
    color: #205220;
    margin-top: 5px;
}

div.goodmsg > h3 {
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    font-size: 13px;
}

form {
    padding-bottom:30px;
}

form > input {
    border:1px gray solid;
    font-size:10px;
    padding:1px 2px 1px 5px;
    margin:5px 0 5px 5px;
    width:200px;
}

a.selected {
    font-weight:bold;
}

.display_none {
    display:none;
}

/* Voting Page --------------- */
body.votepage {
    background-image: url( ../Images/bg.gif );
}

.votepage .contentBox {
    width:330px;
    padding:5px 5px 5px 5px;
    text-align:center;
}

div .RoomSearchResultsIcon {
    width: 100px;
    float: left;
    height: 100px;
    background-position: center center;
    background-repeat: no-repeat;
    margin-right: 5px;
}

div.RoomsBox {
    height:110px;
    width:410px;
}

div.RoomsBox > div.Roomsname {
    padding-top:25px;
    font-weight:bolder;
}

div.RoomsBox > div.Roomsinfo {
    
}