682 lines
14 KiB
CSS
682 lines
14 KiB
CSS
|
|
/* ------------------------------------------------
|
|
HTML ELEMENTS
|
|
--------------------------------------------------- */
|
|
|
|
/* top elements */
|
|
* { padding: 0; margin: 0; outline: 0; }
|
|
|
|
/*body {
|
|
margin: 10px 0 0 0; padding: 0;
|
|
font: normal 13px/1.6em;
|
|
font-family: 'Rubik', sans-serif;
|
|
text-align: center;
|
|
background: #090807 url(images/bg-pink.jpg) repeat-x;
|
|
color: #8F8F8E;
|
|
}
|
|
*/
|
|
|
|
#body {
|
|
margin: 10px 0 0 0; padding: 0;
|
|
font: normal 13px/1.6em;
|
|
font-family: 'Rubik', sans-serif;
|
|
text-align: center;
|
|
/* background: #090807 url(images/bg.jpg) repeat-x; */
|
|
background: #090807 url(images/bg.png) repeat-x;
|
|
color: #8F8F8E;
|
|
}
|
|
|
|
#moby {
|
|
margin: 10px 0 0 0; padding: 0;
|
|
font: normal 13px/1.6em verdana, tahoma, sans-serif;
|
|
text-align: center;
|
|
/* background: #090807 url(images/bg.jpg) repeat-x; */
|
|
background: #090807 ;
|
|
color: #8F8F8E;
|
|
}
|
|
|
|
#body_2 {
|
|
margin: 10px 0 0 0; padding: 0;
|
|
font: normal 13px/1.6em verdana, tahoma, sans-serif;
|
|
text-align: center;
|
|
/* background: #090807 url(images/bg.jpg) repeat-x; */
|
|
background: #090807 url(images/2_bg.png) repeat-x;
|
|
color: #8F8F8E;
|
|
}
|
|
|
|
#body_3 {
|
|
margin: 10px 0 0 0; padding: 0;
|
|
font: normal 13px/1.6em verdana, tahoma, sans-serif;
|
|
text-align: center;
|
|
/* background: #090807 url(images/bg.jpg) repeat-x; */
|
|
background: #090807 url(images/3_bg.png) repeat-x;
|
|
color: #8F8F8E;
|
|
}
|
|
|
|
#body_4 {
|
|
margin: 10px 0 0 0; padding: 0;
|
|
font: normal 13px/1.6em verdana, tahoma, sans-serif;
|
|
text-align: center;
|
|
/* background: #090807 url(images/bg.jpg) repeat-x; */
|
|
background: #090807 url(images/4_bg.png) repeat-x;
|
|
color: #8F8F8E;
|
|
}
|
|
|
|
#body_5 {
|
|
margin: 10px 0 0 0; padding: 0;
|
|
font: normal 13px/1.6em verdana, tahoma, sans-serif;
|
|
|
|
text-align: center;
|
|
/* background: #090807 url(images/bg.jpg) repeat-x; */
|
|
background: #090807 url(images/5_bg.png) repeat-x;
|
|
color: #8F8F8E;
|
|
}
|
|
|
|
#body_6 {
|
|
margin: 10px 0 0 0; padding: 0;
|
|
font: normal 13px/1.6em verdana, tahoma, sans-serif;
|
|
|
|
text-align: center;
|
|
/* background: #090807 url(images/bg.jpg) repeat-x; */
|
|
background: #090807 url(images/6_bg.png) repeat-x;
|
|
color: #8F8F8E;
|
|
}
|
|
|
|
#body_7 {
|
|
margin: 10px 0 0 0; padding: 0;
|
|
font: normal 13px/1.6em verdana, tahoma, sans-serif;
|
|
|
|
text-align: center;
|
|
/* background: #090807 url(images/bg.jpg) repeat-x; */
|
|
background: #090807 url(images/7_bg.png) repeat-x;
|
|
color: #8F8F8E;
|
|
}
|
|
|
|
#scrollbar1 { width: 520px; clear: both; margin: 20px 0 10px; }
|
|
#scrollbar1 .viewport { width: 700px; height: 550px; overflow: hidden; position: relative; }
|
|
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; }
|
|
#scrollbar1 .thumb .end,
|
|
#scrollbar1 .thumb { background-color: #003D5D; }
|
|
#scrollbar1 .scrollbar { position: relative; float: right; width: 15px; }
|
|
#scrollbar1 .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
|
|
#scrollbar1 .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
|
|
#scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 13px; }
|
|
#scrollbar1 .disable{ display: none; }
|
|
|
|
#scrollbar2 { width: 520px; clear: both; margin: 20px 0 10px; }
|
|
#scrollbar2 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
|
|
#scrollbar2 .overview { list-style: none; position: absolute; left: 0; top: 0; }
|
|
#scrollbar2 .thumb .end,
|
|
#scrollbar2 .thumb { background-color: #003D5D; }
|
|
#scrollbar2 .scrollbar { position: relative; float: right; width: 15px; }
|
|
#scrollbar2 .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
|
|
#scrollbar2 .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
|
|
#scrollbar2 .thumb .end { overflow: hidden; height: 5px; width: 13px; }
|
|
#scrollbar2 .disable{ display: none; }
|
|
|
|
/* links */
|
|
a {
|
|
color: #fff;
|
|
background-color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
color: #99CC33;
|
|
background-color: inherit;
|
|
}
|
|
|
|
/* headers */
|
|
h1, h2, h3, h4 {
|
|
font: normal 1em;
|
|
color: #eee;
|
|
}
|
|
h1 { font-size: 3em; color: #0a64e4; letter-spacing: -2px; }
|
|
h2 { font-size: 2.5em; }
|
|
h3 { font-size: 1.8em; }
|
|
h4 { font-size: 1.5em; }
|
|
|
|
p, h1, h2, h3, h4 {
|
|
margin: 0;
|
|
padding: 10px 15px;
|
|
}
|
|
|
|
ul, ol {
|
|
margin: 10px 30px;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
/* images */
|
|
img.float-right {
|
|
margin: .5em 0 1em 1em;
|
|
}
|
|
img.float-left {
|
|
margin: .5em 1em 1em 0;
|
|
}
|
|
|
|
code {
|
|
margin: .5em 0;
|
|
display: block;
|
|
padding: 20px;
|
|
text-align: left;
|
|
overflow: auto;
|
|
font: 500 1em/1.5em 'Lucida Console', 'Courier New', monospace ;
|
|
/* white-space: pre; */
|
|
background: transparent;
|
|
border: 1px solid #211E20;
|
|
}
|
|
acronym {
|
|
cursor: help;
|
|
border-bottom: 1px dotted #8F8F8E;
|
|
}
|
|
blockquote {
|
|
margin: 10px 15px;
|
|
padding: 10px 0 10px 30px;
|
|
background: transparent;
|
|
border: 1px solid #211E20;
|
|
font: normal 1.6em/1.5em Georgia, "Times New Roman", Times, serif;
|
|
}
|
|
|
|
div.mousescroll {
|
|
overflow: hidden;
|
|
}
|
|
div.mousescroll:hover {
|
|
overflow-y: scroll;
|
|
}
|
|
ul {
|
|
list-style-type: none;
|
|
}
|
|
.slimScrollDiv { width: 50px; }
|
|
|
|
|
|
/* start - table */
|
|
table {
|
|
margin: 10px 15px;
|
|
border-collapse: collapse;
|
|
}
|
|
th strong {
|
|
color: #fff;
|
|
}
|
|
th {
|
|
background: #090807;
|
|
color: #fff;
|
|
height: 3em;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
text-align: left;
|
|
}
|
|
tr {
|
|
color: #707070;
|
|
}
|
|
td {
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
border: 1px solid #211E20;
|
|
}
|
|
/* end - table */
|
|
|
|
/* form elements */
|
|
form {
|
|
margin: 10px 15px;
|
|
padding: 10px;
|
|
background: transparent;
|
|
border: 1px solid #211E20;
|
|
}
|
|
fieldset {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
label {
|
|
display:block;
|
|
font-weight:bold;
|
|
margin: .4em 0;
|
|
}
|
|
input {
|
|
padding: .3em;
|
|
border: 1px solid #eee;
|
|
font: normal 1em Verdana, sans-serif;
|
|
color:#777;
|
|
}
|
|
textarea {
|
|
width: 55%;
|
|
padding: .3em;
|
|
font: normal 1em/1.5em Verdana, sans-serif;
|
|
border: 1px solid #eee;
|
|
height: 10em;
|
|
display:block;
|
|
color:#777;
|
|
}
|
|
input.button {
|
|
font: bold 1em Arial, Tahoma, Sans-serif;
|
|
margin: 0;
|
|
padding: .25em .3em;
|
|
color: #fff;
|
|
background: #000;
|
|
border: 2px solid #211E20;
|
|
}
|
|
|
|
/* search form */
|
|
.searchform {
|
|
background-color: transparent;
|
|
border: none;
|
|
margin: 0 0 0 10px; padding: 0 0 1.5em 0;
|
|
width: 20em;
|
|
}
|
|
.searchform p { margin: 0; padding: 0; }
|
|
.searchform input.textbox {
|
|
width: 11em;
|
|
color: #777;
|
|
padding: .4em;
|
|
border: 1px solid #E5E5E5;
|
|
vertical-align: top;
|
|
}
|
|
.searchform input.button {
|
|
width: 80px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.notice_off {
|
|
background: url(images/notice_off.png);
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.notice_on {
|
|
background: url(images/notice_on.png);
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/***********************
|
|
LAYOUT
|
|
************************/
|
|
|
|
.header, #nav, #content, #footer-wrap {
|
|
width: 990px;
|
|
}
|
|
|
|
/* header */
|
|
.header {
|
|
clear: both;
|
|
margin: 0 auto; padding: 0;
|
|
text-align: left;
|
|
}
|
|
.bg {
|
|
/* transparent url(images/header-image.jpg) no-repeat right top */
|
|
background: transparent url(images/1.png) no-repeat right top;
|
|
height: 419px;
|
|
}
|
|
.bg_2 {
|
|
/* transparent url(images/header-image.jpg) no-repeat right top */
|
|
background: transparent url(images/2.png) no-repeat right top;
|
|
height: 419px;
|
|
}
|
|
.bg_3 {
|
|
/* transparent url(images/header-image.jpg) no-repeat right top */
|
|
background: transparent url(images/3.png) no-repeat right top;
|
|
height: 419px;
|
|
}
|
|
.bg_4 {
|
|
/* transparent url(images/header-image.jpg) no-repeat right top */
|
|
background: transparent url(images/4.png) no-repeat right top;
|
|
height: 419px;
|
|
}
|
|
.bg_5 {
|
|
/* transparent url(images/header-image.jpg) no-repeat right top */
|
|
background: transparent url(images/5.png) no-repeat right top;
|
|
height: 419px;
|
|
}
|
|
.bg_6 {
|
|
/* transparent url(images/header-image.jpg) no-repeat right top */
|
|
background: transparent url(images/6.png) no-repeat right top;
|
|
height: 419px;
|
|
}
|
|
.bg_7 {
|
|
/* transparent url(images/header-image.jpg) no-repeat right top */
|
|
background: transparent url(images/7.png) no-repeat right top;
|
|
height: 419px;
|
|
}
|
|
.header #welcome {
|
|
background: transparent url(images/welcome.png) no-repeat;
|
|
height: 163px;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 54px;
|
|
width: 309px;
|
|
}
|
|
.header h1#logo-text a {
|
|
position: absolute;
|
|
margin: 0; padding: 0;
|
|
font: bold 58px 'Trebuchet MS', Tahoma, Arial, Sans-serif;
|
|
letter-spacing: -3px;
|
|
color: #0a1e53;
|
|
text-decoration: none;
|
|
z-index: 9998;
|
|
background: transparent;
|
|
|
|
/* change the values of top and left to adjust the position of the logo*/
|
|
top: 33px; left: 10px;
|
|
}
|
|
.header p#slogan {
|
|
position: absolute;
|
|
font: normal 19px 'Trebuchet Ms', Sans-serif;
|
|
text-transform: none;
|
|
color: #fff;
|
|
margin: 0; padding: 0;
|
|
z-index: 9999;
|
|
|
|
/* change the values of left and top to adjust the position of the slogan */
|
|
top: 95px; left: 25px;
|
|
}
|
|
|
|
#location a {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#users a {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.topbar a {
|
|
cursor: pointer;
|
|
}
|
|
/* Navigation */
|
|
#nav {
|
|
clear: both;
|
|
margin: 0 auto -5px;
|
|
/*margin: 0 auto; HAACK*/
|
|
padding: 0;
|
|
}
|
|
#nav ul {
|
|
float: left;
|
|
list-style: none;
|
|
text-transform: uppercase;
|
|
margin: 0; padding: 0;
|
|
height: 56px;
|
|
}
|
|
#nav ul li {
|
|
float: left;
|
|
margin: 0; padding: 0;
|
|
height: 56px;
|
|
}
|
|
#nav ul li a {
|
|
display: block;
|
|
float: left;
|
|
width: auto;
|
|
margin: 0;
|
|
padding: 0 20px;
|
|
color: #a5a5a5;
|
|
font: bold 16px/54px "Trebuchet MS", Helvetica, Arial, sans-serif;
|
|
text-decoration: none;
|
|
letter-spacing: 1px;
|
|
}
|
|
#nav ul li a:hover,
|
|
#nav ul li a:active {
|
|
color: #fff;
|
|
}
|
|
#nav ul li#current a {
|
|
color: #FF8B04;
|
|
}
|
|
|
|
.newsimage{
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.useronline{
|
|
background: none repeat scroll 0 0 #1187F5;
|
|
border-radius: 2px 2px 2px 2px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
|
|
color: #FFFFFF !important;
|
|
font-size: 10px;
|
|
height: 12px;
|
|
line-height: 12px;
|
|
padding: 0 4px;
|
|
position: relative;
|
|
right: -1px;
|
|
text-align: center;
|
|
text-shadow: none !important;
|
|
top: -10px;
|
|
}
|
|
|
|
.useronlinebeta{
|
|
background: none repeat scroll 0 0 #2020CF;
|
|
border-radius: 2px 2px 2px 2px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
|
|
color: #FFFFFF !important;
|
|
font-size: 10px;
|
|
height: 12px;
|
|
line-height: 12px;
|
|
padding: 0 4px;
|
|
position: relative;
|
|
right: -1px;
|
|
text-align: center;
|
|
text-shadow: none !important;
|
|
top: -10px;
|
|
}
|
|
|
|
/* content */
|
|
#content-wrap {
|
|
clear: both;
|
|
float: right;
|
|
width: 100%;
|
|
background: #12120f url(images/footer-top.jpg) repeat-x left bottom;
|
|
}
|
|
#chat-content-wrap {
|
|
clear: both;
|
|
float: right;
|
|
width: 100%;
|
|
background: #12120f url(images/footer-top.jpg) repeat-x left bottom;
|
|
}
|
|
#content {
|
|
text-align: left;
|
|
padding: 0;
|
|
margin: 0 auto;
|
|
}
|
|
#chat-content {
|
|
/*width: 1080px;*/
|
|
text-align: left;
|
|
padding: 0;
|
|
margin: 0 auto;
|
|
}
|
|
/* sidebar */
|
|
#sidebar {
|
|
float: left;
|
|
width: 17em;
|
|
margin: 10px 0 10px 0;
|
|
padding: 0;
|
|
}
|
|
#sidebar h3 {
|
|
font: normal 1.6em;
|
|
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
|
|
padding: .3em 0 .5em 10px;
|
|
color: #0a64e4;
|
|
text-transform: none;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
#sidebar ul.sidemenu {
|
|
margin: 0 0 0 10px;
|
|
padding: .1em 0 1em 0;
|
|
font-family: 'Trebuchet MS', Tahoma, Sans-serif;
|
|
border-top: 1px solid #211E20;
|
|
}
|
|
#sidebar ul.sidemenu li {
|
|
padding: 0;
|
|
background: url(images/bullet.png) no-repeat .5em .6em;
|
|
border-bottom: 1px solid #211E20;
|
|
list-style:none;
|
|
}
|
|
|
|
#sidebar ul.sidemenu li a {
|
|
display: block;
|
|
font-weight: bold;
|
|
color: #d3d0cc;
|
|
text-decoration: none;
|
|
padding: .2em 0 .2em 30px;
|
|
line-height: 1.5em;
|
|
font-size: 1.25em;
|
|
}
|
|
#sidebar ul.sidemenu li a:hover {
|
|
color: #FF8B04;
|
|
}
|
|
#sidebar ul.sidemenu ul { margin: 0 0 0 15px; }
|
|
#sidebar ul.sidemenu ul li { border: none; }
|
|
|
|
/* rightbar */
|
|
#rightbar {
|
|
float: right;
|
|
width: 20%;
|
|
margin: 10px 0 10px 0;
|
|
padding: 0;
|
|
}
|
|
#rightbar h3 {
|
|
font: normal 1.6em 'Trebuchet MS', Tahoma, Arial, Sans-serif;
|
|
padding: .3em 0 .5em 10px;
|
|
color: #99CC33;
|
|
text-transform: none;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
#rightbar ul.sidemenu {
|
|
margin: 0 0 0 10px;
|
|
padding: .1em 0 1em 0;
|
|
font-family: 'Trebuchet MS', Tahoma, Sans-serif;
|
|
border-top: 1px solid #211E20;
|
|
}
|
|
#rightbar ul.sidemenu li {
|
|
padding: 0;
|
|
background: url(images/bullet.jpg) no-repeat .5em .6em;
|
|
border-bottom: 1px solid #211E20;
|
|
list-style:none;
|
|
}
|
|
|
|
#rightbar ul.sidemenu li a {
|
|
display: block;
|
|
font-weight: bold;
|
|
color: #d3d0cc;
|
|
text-decoration: none;
|
|
padding: .2em 0 .2em 30px;
|
|
line-height: 1.5em;
|
|
font-size: 1.25em;
|
|
}
|
|
#rightbar ul.sidemenu li a:hover {
|
|
color: #FF8B04;
|
|
}
|
|
#rightbar ul.sidemenu ul { margin: 0 0 0 15px; }
|
|
#rightbar ul.sidemenu ul li { border: none; }
|
|
|
|
* html body #sidebar #rightbar ul.sidemenu li { height: 1%; }
|
|
|
|
|
|
/* main */
|
|
#main {
|
|
/*margin: 10px 0 10px 19em;*/
|
|
float:left;
|
|
width:70%;
|
|
margin: -2px 10px;
|
|
padding: 0;
|
|
}
|
|
#chat {
|
|
/*margin: 10px 0 10px 19em;*/
|
|
float:left;
|
|
width:78%;
|
|
margin: -2px 10px;
|
|
padding: 0;
|
|
}
|
|
#main h2 {
|
|
font: normal 2.9em 'Trebuchet MS', Arial, Sans-serif;
|
|
color: #84A5DA;
|
|
letter-spacing: -2px;
|
|
padding-bottom: 0px;
|
|
margin-bottom: 5px;
|
|
border-bottom: 1px solid #211E20;
|
|
}
|
|
#main h2 a {
|
|
color: #84A5DA;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#footer-wrap {
|
|
clear: both;
|
|
padding: 0; margin: 0 auto;
|
|
}
|
|
|
|
/* columns */
|
|
#columns {
|
|
clear: both;
|
|
text-align: left;
|
|
color: #5B9CFF;
|
|
margin: 0 auto;
|
|
padding: 1.6em 0 .5em 0;
|
|
width: 95%;
|
|
}
|
|
#columns h3 {
|
|
color: #99CC33;
|
|
margin: 0;
|
|
padding: 0 10px;
|
|
font: normal 1.4em "Trebuchet MS", Arial, Tahoma, Sans-serif;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
#columns ul {
|
|
list-style: none;
|
|
margin: 10px 0 0 0;
|
|
padding: 0;
|
|
border-top: 1px solid #111;
|
|
}
|
|
#columns li {
|
|
border-bottom: 1px solid #111;
|
|
}
|
|
#columns li a {
|
|
display: block;
|
|
padding: .5em 0 .5em 1em;
|
|
color: #8F8F8E;
|
|
}
|
|
#columns li a:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
#columns .col3, .col3-center {
|
|
float: left;
|
|
width: 31%;
|
|
}
|
|
#columns .col3-center {
|
|
margin: 0 15px;
|
|
}
|
|
|
|
/* footer */
|
|
#footer-bottom {
|
|
clear: both;
|
|
margin: 0 auto;
|
|
padding: 1em 0 1.5em 0;
|
|
text-align: center;
|
|
font-size: .85em
|
|
}
|
|
|
|
/* alignment classes */
|
|
.float-left { float: left; }
|
|
.float-right { float: right; }
|
|
.align-left { text-align: left; }
|
|
.align-right { text-align: right; }
|
|
|
|
/* additional classes */
|
|
.clear { clear: both; }
|
|
.grey { color: #8F8F8E; }
|
|
|
|
.post-by {
|
|
font-size: .9em;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.post-footer {
|
|
text-align: right;
|
|
background: transparent;
|
|
border: 1px solid #211E20;
|
|
padding: 5px 10px;
|
|
margin: 20px 15px 10px 15px;
|
|
}
|
|
.post-footer .date,
|
|
.post-footer .comments,
|
|
.post-footer .readmore {
|
|
padding-left: 20px; margin: 0 3px 0 3px;
|
|
}
|
|
|