/** * OTAKUCONNECT CSS STYLESHEET * Author: Victor Holt */ /************************************************************************************ * GLOBAL ************************************************************************************/ html { height: 100%; margin-top: 0px; margin-left: auto; margin-right: auto; } body { background-color: #2e2e30; margin-top: 0px; margin-left: auto; margin-right: auto; font-family: Arial, Arial, Helvetica, sans-serif; /*Arial, Lucida Grande, Verdana, Sans-serif;*/ font-size: 12px; color: #2e2e30; text-align: center; } .cls { clear: both; overflow: hidden; } .center{ margin-left:auto; margin-right:auto; text-align:center; } h1 { font-size: 16px; } h2 { font-size: 14px; color: #379EEE; } h3 { font-weight: normal; font-size: 14px; color: #379EEE; margin-bottom: 0px;} a { color: #379EEE; text-decoration: none; } a:hover { color: #379EEE; text-decoration: underline; } #page { margin-left:auto; margin-right:auto; text-align:center; width: 998px; } /************************************************************************************ * HEADER SECTION ************************************************************************************/ #header { width:100%; height: 53px; text-align:left; } #header #lowgoh { background-image:url(../images/lowgoh.png); width: 325px; height: 53px; } /************************************************************************************ * TOP MENU SECTION ************************************************************************************/ #topmenu { width: 100%; height: 41px; margin-top: 1px; margin-bottom: 1px; } #topmenu .topmenu.left { background-image:url(../images/lt_top_menu.png); width:9px; height:41px; float:left; } #topmenu .topmenu.right { background-image:url(../images/rt_top_menu.png); width:9px; height:41px; float:right; } #topmenu .topmenu.content { background-image:url(../images/top_menu_bg.png); width:980px; height:41px; float:left; } #topmenu .topmenu.item {width:66px; height:41px;} #topmenulist { display: block; } #topmenulist ul { list-style: none; padding: 0; margin: 0; } #topmenulist li { line-height: 1.5em; display: block; text-align: center; margin: 0; padding: 0; position: relative; float:left; text-align:left; text-indent: 5px; } #topmenulist li a { display:block; color:#000; text-decoration:none; } #topmenulist li a:hover { background-color: #d3e3ef; text-decoration:none; } #topmenulist li.topmenu.item.home a { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -920px 0px;} #topmenulist li.topmenu.item.profile a { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -986px 0px;} #topmenulist li.topmenu.item.library a { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -1052px 0px;} #topmenulist li.topmenu.item.inbox a { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -1118px 0px;} #topmenulist li.topmenu.item.friends a { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -1184px 0px;} #topmenulist li.topmenu.item.clubs a { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -1250px 0px;} #topmenulist li.topmenu.item.forums a { background-image:url(../images/topmenu.png); width:63px; height:41px; float: left; background-position: -1316px 0px;} #topmenulist li.topmenu.item.home a:hover { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -460px 0px;} #topmenulist li.topmenu.item.profile a:hover { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -526px 0px;} #topmenulist li.topmenu.item.library a:hover { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -592px 0px;} #topmenulist li.topmenu.item.inbox a:hover { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -658px 0px;} #topmenulist li.topmenu.item.friends a:hover { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -724px 0px;} #topmenulist li.topmenu.item.clubs a:hover { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -790px 0px;} #topmenulist li.topmenu.item.forums a:hover { background-image:url(../images/topmenu.png); width:63px; height:41px; float: left; background-position: -856px 0px;} #topmenulist li.topmenu.item.home.selected a { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -0px 0px;} #topmenulist li.topmenu.item.profile.selected a { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -66px 0px;} #topmenulist li.topmenu.item.library.selected a { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -132px 0px;} #topmenulist li.topmenu.item.inbox.selected a { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -198px 0px;} #topmenulist li.topmenu.item.friends.selected a { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -264px 0px;} #topmenulist li.topmenu.item.clubs.selected a { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -330px 0px;} #topmenulist li.topmenu.item.forums.selected a { background-image:url(../images/topmenu.png); width:63px; height:41px; float: left; background-position: -396px 0px;} /*#topmenu a .topmenu.item.home { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -920px 0px;} #topmenu a .topmenu.item.profile { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -986px 0px;} #topmenu a .topmenu.item.library { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -1052px 0px;} #topmenu a .topmenu.item.inbox { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -1118px 0px;} #topmenu a .topmenu.item.friends { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -1184px 0px;} #topmenu a .topmenu.item.clubs { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -1250px 0px;} #topmenu a .topmenu.item.forums { background-image:url(../images/topmenu.png); width:63px; height:41px; float: left; background-position: -1316px 0px;} #topmenu a:hover .topmenu.item.home { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -460px 0px;} #topmenu a:hover .topmenu.item.profile { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -526px 0px;} #topmenu a:hover .topmenu.item.library { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -592px 0px;} #topmenu a:hover .topmenu.item.inbox { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -658px 0px;} #topmenu a:hover .topmenu.item.friends { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -724px 0px;} #topmenu a:hover .topmenu.item.clubs { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -790px 0px;} #topmenu a:hover .topmenu.item.forums { background-image:url(../images/topmenu.png); width:63px; height:41px; float: left; background-position: -856px 0px;} #topmenu a .topmenu.item.home.selected { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -0px 0px;} #topmenu a .topmenu.item.profile.selected { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -66px 0px;} #topmenu a .topmenu.item.library.selected { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -132px 0px;} #topmenu a .topmenu.item.inbox.selected { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -198px 0px;} #topmenu a .topmenu.item.friends.selected { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -264px 0px;} #topmenu a .topmenu.item.clubs.selected { background-image:url(../images/topmenu.png); width:66px; height:41px; float: left; background-position: -330px 0px;} #topmenu a .topmenu.item.forums.selected { background-image:url(../images/topmenu.png); width:63px; height:41px; float: left; background-position: -396px 0px;}*/ /************************************************************************************ * CONTENT SECTION ************************************************************************************/ #content { width: 100%; background-color: #f4f3f3; color: #2e2e30; margin-top: 12px; text-align:left; } #content .content.header { background-image:url(../images/content_top.png); width:100%; height: 19px; } #content .content.area { display:block; width: 100%; color: #000; } #content .content.area.left { float:left; width: 184px; } #content .content.area.middle { float:left; text-align:left; } #content .content.area.right { float:left; width: 250px; } #content .content.minheight { height: 600px; } #content .content.footer { background-image:url(../images/content_bottom.png); width:100%; height: 24px; display:block; clear:both; } #footer { font-size: 11px; color: #fff; } #footer a { color: #fff; text-decoration: none; } #footer a:hover { text-decoration: underline; } #footer .ft.minheight { height: 100px; } .tbline { width:100%; border-top: 1px solid #b8b8b8; height: 1px; } .tbuserlist {} .tbavatar { text-align: left; width: 10%; } .tblistinfo { text-align:left; width: auto; } .tblactions { text-align:right; width: auto; } .tbentryrow {} /************************************************************************************ * PROFILE SECTION ************************************************************************************/ #content .content.area #profile { padding: 0px; padding-left: 20px; padding-right: 20px; } #content .content.area #profile .profile.left { float:left; width: 700px; } #content .content.area #profile .profile.left .info { float:left; width: 190px; } #content .content.area #profile .profile.left .content { float:left; width: 490px; top: 10px; position: relative; padding-left: 20px; } #content .content.area #profile .profile.left .userwidgets { float:left; width: 287px; top: 10px; position: relative; } #content .content.area #profile .profile.right { float:right; } div.profile-picture img {border:1px solid #000;} /************************************************************************************ * MENUS SECTION ************************************************************************************/ #content .menu.standard { display: block; } #content .menu.standard ul { list-style: none; padding: 0; margin: 0; } #content .menu.standard li { line-height: 1.5em; display: block; text-align: center; margin: 0; padding: 0; position: relative; width: 154px; text-align:left; text-indent: 5px; } #content .menu.standard li.title { background-image: url(../images/menu_section_header.png); background-repeat: no-repeat; color:#FFF; display:block; line-height:1.3em; position:relative; } #content .menu.standard li a { background-color: #dfdfdf; display:block; color:#000; border-bottom: 1px solid #FFF; } #content .menu.standard li a:hover { background-color: #d3e3ef; text-decoration:none; } #content .menu.standard li a.selected { background-color: #d3e3ef; text-decoration:none; } #content .menu.tabs { display: block; border-bottom: 1px solid #000; } #content .menu.tabs ul { width:100%; list-style: none; padding: 0; margin: 0; } #content .menu.tabs li { display: block; float:left; text-align: center; margin: 0; padding: 0; padding-right:13px; position: relative; height: 22px; text-align:left; } #content .menu.tabs li.title { font-size: 16px; font-weight:bold; color:#2e2e30; display:block; padding-left:0px;} #content .menu.tabs li a { line-height: 1.9em; display:block; color:#000; padding-left: 15px; padding-right: 15px; } #content .menu.tabs li a:hover { background-image: url(../images/btn_hover_bg.png); color: #FFF; text-decoration:none; } #content .menu.tabs li a.selected,#content .menu.tabs li a:hover.selected { background-image: url(../images/btn_bg.png); color: #FFF; background-position: 1px 0px; } #content .menu.info { display: block; } #content .menu.info ul { width:100%; list-style: none; padding: 0; margin: 0; } #content .menu.info li { font-size: 10px; display: block; text-align: center; margin: 0; padding: 0; position: relative; text-align:left; border-bottom: 1px solid #b8b8b8; padding-top: 5px; padding-bottom: 2px; } #content .menu.info li.title { font-size: 12px; font-weight:bold; color:#2e2e30; display:block; border-bottom: 1px solid #000; padding: 0px; padding-top: 10px; } #content .menu.info li a.menulink { font-weight: normal; display:block; color:#000; padding-top: 5px; padding-bottom: 2px; } #content .menu.info li a { display:block; color:#000; padding: 0px; } #content .menu.info li a:hover { background-color: #afafaf; color: #FFF; text-decoration:none; } #content .menu.info li.link { padding: 0px; /*background-color: #afafaf;*/ } #content .menu.info li a.selected,#content .menu.tabs li a:hover.selected { color: #FFF; background-position: 1px 0px; } #content .menu.info li a.anchor {background-color:#f4f3f3; color: #379EEE; text-decoration: none; display:inline; } #content .menu.info li a:hover.anchor {background-color:#f4f3f3; color: #379EEE; text-decoration: underline; display:inline;} /************************************************************************************ * FORM SECTION ************************************************************************************/ .element.error { color:#e10c0c; padding-bottom: 5px; } .required { color: red; } .note { font-weight: normal; font-size: 10px; font-style: italic; color: #4b4b4b; } .radiogroupoption { border: none; } .choice-title { font-weight: bold; font-size: 12px; color: #379EEE; top: -2px; position:relative; } .choice-description { margin-left: 20px; } .statusupdate { font-family: Arial, Arial, Helvetica, sans-serif; font-size: 12px; padding: 2px; width:406px; height: 22px; border: 1px solid #e3e9ef; border-top: 1px solid #abadb3; } .stdtextarea { font-family: Arial, Arial, Helvetica, sans-serif; font-size: 12px; padding: 2px; width:406px; height: 22px; border: 1px solid #e3e9ef; border-top: 1px solid #abadb3; } /** Link Buttons **/ a.button { background-image: url(../images/btn_bg.png); background-repeat: repeat-x; font-size: 12px; color: #FFF; display: inline-block; text-align: center; padding-left:15px; padding-right:15px; vertical-align: middle; line-height: 1.8em; cursor: pointer; text-decoration: none; height: 22px; } button.button { background-image: url(../images/btn_bg.png); background-repeat: repeat-x; font-size: 12px; color: #FFF; height: 22px; display: inline-block; text-align: center; padding-left:15px; padding-right:15px; vertical-align: middle; line-height: 1.8em; cursor: pointer; text-decoration: none; border:none; } div.label { font-weight: bold; padding-bottom: 3px; } div.input { padding-bottom: 6px; } div.input input,select.element.field.select { border: 1px solid #afafaf; width: 250px; } h1.section { font-weight: normal; text-decoration: underline; color: #379EEE; } .upload_file_button { cursor:pointer; width: 100px; text-align: center; line-height: 1.8em; height: 22px; display:block; border: 1px solid #3d98ca; background-color: #d5ecf9; } .remove_upload_file_button { cursor:pointer; width: 100px; text-align: center; line-height: 1.8em; height: 22px; display:block; border: 1px solid #3d98ca; background-color: #d5ecf9; } /************************************************************************************ * STATUS SECTION ************************************************************************************/ .online { color: green; } .offline { color: red; } /************************************************************************************ * COMMENTS SECTION ************************************************************************************/ a.comment-profile-link { text-decoration:underline; color:#2e2e30; } .comment-bubble { background-color: #e6e6e6; border: 1px solid #aaaaaa; padding: 0px; float: left; width:424px; margin-left: 18px; } .comment-bubble2 { background-color: #e6e6e6; border: 1px solid #aaaaaa; padding: 0px; float: left; width:395px; margin-left: 18px; } .comment-bubble_compact { background-color: #e6e6e6; border: 1px solid #aaaaaa; padding: 0px; float: left; width:243px; margin-left: 18px; } .comment-bubble2_compact { background-color: #e6e6e6; border: 1px solid #aaaaaa; padding: 0px; float: left; width:298px; margin-left: 0px; } .combubble-content { padding: 5px; overflow:hidden; } .combubble-top { background: url(../images/comment_bubble_rt.png) no-repeat top right; margin-top: -1px; margin-left: -1px; margin-right: -1px; } .combubble-bottom { background: url(../images/comment_bubble_rb.png) no-repeat top right; margin-bottom: -1px; margin-left: -1px; margin-right: -1px; } img.combubble-corner { width: 5px; height: 4px; border: none; display: block !important; } .combubble-tail { background: url(../images/comment_bubble_tail.png) no-repeat top left; width: 11px; height: 33px; position:absolute; margin-left: -16px; margin-top: -5px; } .combubble-minheight { width: 11px; height: 5px; } img.comment-avatar { width: 38px; height: 38px; float: left; } .comment-actions {text-align: right; color: #585858;} .comment-actions a {color:#585858;} div.comment-reply { padding-top:5px; padding-bottom:5px; margin-left: 58px; } a.rcomment-profile-link { text-decoration:underline; color:#2e2e30; } .rcomment-bubble { background-color: #d3e3ef; border: 1px solid #aaaaaa; padding: 0px; float: left; width:365px; margin-left: 18px; } .rcombubble-content { padding: 5px; overflow:hidden; } .rcombubble-top { background: url(../images/reply_bubble_rt.png) no-repeat top right; margin-top: -1px; margin-left: -1px; margin-right: -1px; } .rcombubble-bottom { background: url(../images/reply_bubble_rb.png) no-repeat top right; margin-bottom: -1px; margin-left: -1px; margin-right: -1px; } img.rcombubble-corner { width: 5px; height: 4px; border: none; display: block !important; } .rcombubble-tail { background: url(../images/reply_bubble_tail.png) no-repeat top left; width: 11px; height: 33px; position:absolute; margin-left: -14px; margin-top: -5px; } .rcombubble-minheight { width: 11px; height: 5px; } img.rcomment-avatar { width: 38px; height: 38px; float: left; } .rcomment-actions {text-align: right; color: #585858;} .rcomment-actions a {color:#585858;} .commentreplytext { font-family: Arial, Arial, Helvetica, sans-serif; font-size: 12px; padding: 2px; width:350px; height: 22px; border: 1px solid #e3e9ef; border-top: 1px solid #abadb3; } .comment_bubble_entry { padding-top: 5px; padding-bottom: 5px; } /************************************************************************************ * ENTRY SECTION ************************************************************************************/ img.entry-avatar { width: 65px; height: 88px; float: left; border: 1px solid #000; } img.entry-smavatar { width: 23px; height: 32px; float: left; } div.entry-title { border-bottom: 1px solid #000; } /************************************************************************************ * EDIT ENTRY SECTION ************************************************************************************/ .edit_piece { background-color: #fdfdfd; border: 1px solid #666; padding: 10px; } .key { font-weight: bold; text-decoration: underline; } .newvalue { color: green; } .originalvalue { color: red; } .page-widgets { width: 220px; } /************************************************************************************ * INBOX SECTION ************************************************************************************/ #inboxtoolbar { border-bottom: 1px solid #858585; } #inboxtoolbar .select { float: left; } #inboxtoolbar .actions { float: right; } table.messagelist { width: 100%; } table.messagelist td { border-bottom: 1px solid #858585; padding-bottom: 10px; } /************************************************************************************ * MISC SECTION ************************************************************************************/ .icon { position:relative; top: 4px; }