Custom CSS

Ask Page...

Moderators: JettJackson, Infinity, Page

Freon22
Beginner Spam Artist
Posts: 3278
Joined: Wed Apr 17, 2002 10:09 pm
Location: USA
Contact:

Re: Custom CSS

Post by Freon22 »

Ok so for now I am droping the css table thing. Since frist the default.css needs lots of work. I am reorganizing it and removing redolent rules like take these heading styles.

Code: Select all

h1 {
   color : #80C870;
   font-size : 125%;
   font-family: Arial, sans-serif;
   font-weight:bold;
   padding:0px;
   margin:0px;
}

h2 {
   color : #80C870;
   font-size : 110%;
   font-family: Arial, sans-serif;
   font-weight: bold;
   padding:0px;
   margin:0px;
}

h3 {
   color : Fuchsia;
   padding:0px;
   margin:0px;
}
I have changed them to this.

Code: Select all

/* ----- All Heading styles ----- */
/* =h1,h2,h3 default style for all h tags */
h1, h2, h3 {
   color : #80C870;   
   font: bold 125% Arial, sans-serif;
   padding:0px;
   margin:0px;
}
/* =h2 default font-size for h2 tags */
h2 {   
   font-size: 110%;
}
/* =h3 default color and weight for h3 tags */
h3 {
   color : Fuchsia;
   font-weight: normal; 
}
/* ----- End Heading styles ----- */
They work the same and it cuts the code from 25 lines to 18 lines with the comments lines I have add. I have also found some rules that makes no since what to me but before I post anything on them I want to see how they are being used on the html page. Also later I will go bake through and remove some of the comments.
Last edited by Freon22 on Fri Jul 10, 2009 6:24 pm, edited 1 time in total.
Page
SMR Coder
Posts: 1779
Joined: Sat Dec 07, 2002 9:17 pm

Re: Custom CSS

Post by Page »

There are some really odd rules, for instance there's a load of ".class td, th" or something like that, where it was obviously done by someone who didn't understand css properly. I assume they were thinking it'd be like ".class (td, th)" not the "(.class td), (th)" it really is. However I tried changing to what I expected they meant but it looked pretty horrendous so I quickly undid that.

Also, Fuschia in SMR :O - I've never seen that (or don't remember it anyways :P )

Edit: Also can you post css in [code][/code] so that the indentation is left intact, makes it a lot nicer imo :)
Freon22
Beginner Spam Artist
Posts: 3278
Joined: Wed Apr 17, 2002 10:09 pm
Location: USA
Contact:

Re: Custom CSS

Post by Freon22 »

I have found one problem with linking css file. When I link a file it will not load and pictures that css calls for. Now if I uncomment the background color it will show that color. I think it has something to do with css calling for the .png file.

Code: Select all

div.currentSeclm {
  /*background-color:#337873;*/
  background: url('../images/currentsector.png');
}
Page
SMR Coder
Posts: 1779
Joined: Sat Dec 07, 2002 9:17 pm

Re: Custom CSS

Post by Page »

That's a relative link so needs to either be changed to be absolute or you need to grab it and have a local version. Realistically the default stuff is designed to load straight from the server, and you can now have that and just overwrite what you want (or start from scratch). Once the tidier version is there it'll be clearer to see what there is that can be overwritten. (I'll move the original into htdocs folder so people can grab the nice version instead of the compressed which will stay for the pages)
Freon22
Beginner Spam Artist
Posts: 3278
Joined: Wed Apr 17, 2002 10:09 pm
Location: USA
Contact:

Re: Custom CSS

Post by Freon22 »

Page wrote:That's a relative link so needs to either be changed to be absolute
:stoned:
I should know that. Anyway here the default.css I did some adjustment, removed some duplicates, reorganized, and added some comments. It took the file from 885 lines down to 819 lines. I linked and tested it in beta all looks ok but you may want to save the original default just in case. It still needs more work and am planning on making more changes to it but for now it is better then what you have.

Edit: Change color code to all upper case letters.

Code: Select all

html, body {
   height: 100%;
}
body {
   background: #0B2121; 
   font-family: Arial, Sans-Serif;
   font-variant: normal;
   margin: 0px;
   padding: 0px;
   margin-top: 10px;
   color: #FFFFFF;
}
/* ----- All Heading styles ----- */
/* =h1,h2 default style for h tags */
h1, h2 {
   color: #80C870;   
   font: bold 125% Arial, sans-serif;
   padding: 0px;
   margin: 0px;
}
/* =h2 default font-size for h2 tags */
h2 {   
   font-size: 110%;
}
/* =h3 default color h3 tags */
h3 {
   color: #FF00FF; /*Fuchsia*/
   padding: 0px;
   margin: 0px;   
}
/* ----- End Heading styles ----- */
/* ---------------------------- */
#InputFields, .InputFields {
   background: #06240E;
   color: #FFFFFF;
   border: 1px solid #80C870;   
   font: inherit Arial;
}
.submitStyle:link {
   background: #06240E;
   color: #FFFFFF;
   border: 1px solid #80C870;
   font: inherit Arial;
   padding: 0px 8px;
}
.submitStyle:visited {
   background: #06240E;
   color: #FFFFFF;
   border: 1px solid #80C870;
   font: inherit Arial;
   padding: 0px 8px;
}
.submitStyle:hover {
   background: #06240E;
   color: #FFFFFF;
   border: 1px solid #80C870;
   font: inherit Arial;
   padding: 0px 8px;
}
.submitStyle:active {
   background: #06240E;
   color: #FFFFFF;
   border: 1px solid #80C870;
   font: inherit Arial;
   padding: 0px 8px;
}
.submitStyle {
   background: #06240E;
   color: #FFFFFF;
   border: 1px solid #80C870;
   font: inherit Arial;
   padding: 0px 8px;
   display: inline-table; /* Fixes the problems with vertical overlap in FF, but not IE :( */
}
#InputFieldsText {
   background: #06240E;
   color: #FFFFFF;
   border: 1px solid #80C870;
   font: inherit Arial;
}
/* ------------------------------------ */
#help_content {   
   margin: 10px 20px 50px 20px;
}
#help_menu {   
   margin: 10px;
}
form {
   margin: 0px;
}
a.scan_btn {
   background: #060E88;
   border: 1px solid #8070C8;   
   font: bold 80%;
   padding: 0.1em 0.5em 0.1em 0.5em;
   text-align: center;
   color: #BBBBBB;
   position: relative;
   top: -1.6em;
}
a.scan_btn:hover {
   background: #060E88;
   color: #FFFFFF;
}
/* -------- Table rules --------- */
/* =table default font size */
table {
   font-size: 100%;
}
/* =th default style for th tags */
th {
   background: #0A4E1D;
   color: #80C870;
   font-size: 110%;
   text-align: center;
   padding: 3px;
}
/* =td default style for td tags */
td {
   padding: 3px;
   color: #FFFFFF;
   font-variant: normal;
   font-family: Arial, Sans-Serif;
   vertical-align: middle;
}
/* =td.sector */
td.sector {
   padding: 0px;
   height: 3.5em;
   width: 4.5em;
   text-align: center;
}
/* =td.footer_left */
td.footer_left {
   padding: 10px;
   border: 1px solid #0B8D35;
   background-color: #06240E;
   border-top: none;
   border-right: none;
   vertical-align: bottom;
   text-align: left;
   font-size: 75%;
   white-space: nowrap;
}
/* =td.footer_right */
td.footer_right {
   padding: 10px;
   border: 1px solid #0B8D35;
   background-color: #06240E;
   border-top: none;
   border-left: none;
   vertical-align: bottom;
   text-align: right;   
   font: 75% Arial, Sans-Serif;
   white-space: nowrap;
}
table.standardnobord {
   border: none;
}
.standardnobord tr,.standardnobord td,.standardnobord th {
   border: none;
}
table.standard {
   border: 1px solid #0B8D35;
   border-spacing: 0px;
}
table.standard td, table.standard th {
   border: 1px solid #0B8D35;
}
table.create {
   border: 0px solid #0B8D35;
}
/* =.create td child, th also on line 110 */
.create td, th {
   padding: 3px;
   border: 1px solid #0B8D35;
   border-color: white;
   border-left-width: 0px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-top-width: 0px;
}
td.border_left {
   border-left-width: 3px;
}
td.border_right {
   border-right-width: 3px;
}
td.border_bottom {
   border-bottom-width: 3px;
}
td.border_top {
   border-top-width: 3px;
}
td.has_port {
   background-color: Gray;
}
td.vert_cent{
   vertical-align: middle;
}
table.quote {
   border: 1px solid #0B8D35;
}
table.nobord td {
   border: none;
}
table.nohpad td {
   padding-left: 0px;
   padding-right: 0px;
   margin: 0px;
}
td.button {
   padding: 0px;
   text-align: center;
   width: 1%;
   white-space: nowrap;
   vertical-align: middle;
}
/***************************/
table.m {
   height: 100%;
   width: 80em;
   border-spacing: 0px;
   padding: 0px;
}
td.l0 {
   padding: 0px 10px 0px 0px;
   vertical-align: top;
}
td.mb {
   width: 225px;
}
div.l1 {
   text-align: right;
   width: 10em;
}
td.m0 {
   padding: 10px;
   border: 1px solid #0B8D35;
   background-color: #06240E;
   border-bottom: none;
   vertical-align: top;
   width: 100%;
}
td.r0 {
   padding: 0px 0px 0px 10px;
   vertical-align: top;
   text-align: left;
}
table.csl {
   width: 27em;
}
/* --------- End of table rules ------- */
img {
   border: none;
}
img.vote_site {
   width: 98px;
   height: 41px;
}
/* =big, =.big */
big, .big {
   font-size: 125%;
}
/* =small, .small */
small, .small {
   font-size: 75%;
}
.attack_warning {
   text-align: center;
   border: 1px solid #BBBB00;
   background-color: #550000;
   font-weight: bold;
   color: #FF0000;
   padding: 0px;
   margin: 0px;
}
/* */
.auto {
   width: auto;
}
.shrink {
   width: 1%;
}
.top {
   vertical-align: top;
}
.blank {
   margin: 0px;
   padding: 0px;
}
.nowrap {
   white-space: nowrap;
}
.inset {
   width: 95%;
}
.fullwidth {
   width: 100%;
}
.fullheight {
   height: 100%;
}
.right {
   text-align: right;
}
.center {
   text-align: center;
}
div.bar1 {
   border: 1px solid #0B8D35;
   padding: 5px;
}
div.bar1 div {
   padding: 2px;
   background-color: #0B8D35;
   text-align: center;
}
input {
   background: #06240E;
   color: #FFFFFF;
   border: 1px solid #80C870;   
   font: 100% Arial;
}
textarea {
   background: #06240E;
   color: #FFFFFF;
   border: 1px solid #80C870;
   font: 100% Arial;
   width: 30em;
   height: 15em;
}
a {
   color: #FFFFFF;
   text-decoration: none;
   padding: 0px;
   margin: 0px;
}
a:hover {
   background: #0A4E1D;
}
a.header {
   color: #80C870;
}
/* =Colors */
.yellow {
   color: #FFFF00;
}
.red {
   color: #FF0000;
}
.green {
   color: #00FF00;
}
.dgreen {
   color: #00AA00;
}
.cyan {
   color: #00FFFF;
}
.blue {
   color:#0000FF;
}
.purple {
   color: #7F00FF;
}
.npcColor {
   color: #66CCFF;
}
.sectorColor {
   color: #00FFFF;
}
/* end colors */
.bold {
   font-weight: bold;
}
.italic {
   font-style: italic;
}
.underline {
   text-decoration: underline;
}
.smallCaps {
   font-variant: small-caps;
}
.smallFont {
   font-size: 75%;
}
hr {
   color: #80C870;
   background-color: #A0F890;
   height: 2px;
}
img.alliance {                      /* Delete this if ok with Page */
}
div.buttonA {
   margin: 0px;
   font-size: 100%;
   height: 1.0em;
   display: inline;
}
a.buttonA  {
   font-size: inherit;
   text-decoration: none;
   height: 1.0em;
   display: inline;
   border-width: 2px;
   background-color: #0B8D35;
   border-style: solid;
   color: #FFFFFF;
   border-bottom-color: #2A6E2A;
   border-right-color: #2A6E2A;
   border-left-color: #A3CCA3;
   border-top-color: #A3CCA3;
   white-space: nowrap;
}
a.buttonA:hover {
   background-color: #0B8D35;
}
a.buttonA:active {
   background-color: #0B8D35;
   border-bottom-color: #A3CCA3;
   border-right-color: #A3CCA3;
   border-left-color: #2A6E2A;
   border-top-color: #2A6E2A;
}
div#middle_panel {
   text-align: left;
   width: 100%;
}
div#right_panel {
   width: 13em;
}
/*** CS Stuff ***/
div.cs_box {
   position: relative;
}
div.cs_box div.scan {
   position: relative;
   width: 250px;
   height: 250px;
}
div.cs_box div.no_scan {
   position: relative;
   width: 210px;
   height: 210px;
   top: -20px;
   left: -20px;
}
div.cs_box div.scan_up {
   position: absolute;
   top: 0px;
   left: 84px;
   width: 60px;
   height: 20px;
   color: #BBBBBB;
   border: 2px solid #0B8D35;
   background-color: #060E88; /* scan blue */
}
div.cs_box div.move_up {
   position: absolute;
   top: 22px;
   left: 84px;
   width: 60px;
   height: 60px;
   border: 2px solid #0B8D35;
}
div.cs_box div.scan_left {
   position: absolute;
   top: 84px;
   left: 0px;
   width: 20px;
   height: 60px;
   color: #BBBBBB;
   border: 2px solid #0B8D35;
   background-color: #060E88;
}
div.cs_box div.move_left {
   position: absolute;
   top: 84px;
   left: 22px;
   width: 60px;
   height: 60px;
   border: 2px solid #0B8D35;
}
div.cs_box div.cs_mid {
   position: absolute;
   top: 84px;
   left: 84px;
   width: 60px;
   height: 60px;
   border: 2px solid #0B8D35;
}
div.cs_box div.scan_right {
   position: absolute;
   top: 84px;
   left: 208px;
   width: 20px;
   height: 60px;
   color: #BBBBBB;
   border: 2px solid #0B8D35;
   background-color: #060E88;
}
div.cs_box div.move_right {
   position: absolute;
   top: 84px;
   left: 146px;
   width: 60px;
   height: 60px;
   border: 2px solid #0B8D35;
}
div.cs_box div.scan_down {
   position: absolute;
   top: 208px;
   left: 84px;
   width: 60px;
   height: 20px;
   color: #BBBBBB;
   border: 2px solid #0B8D35;
   background-color: #060E88;
}
div.cs_box div.move_down {
   position: absolute;
   top: 146px;
   left: 84px;
   width: 60px;
   height: 60px;
   border: 2px solid #0B8D35;
}
div.cs_box div.scan_warp {
   position: absolute;
   top: 161px;
   left: 221px;
   width: 20px;
   height: 60px;
   color: #BBBBBB;
   border: 2px solid #0B8D35;
   background-color: #060E88;
}
div.cs_box div.move_warp {
   position: absolute;
   top: 161px;
   left: 159px;
   width: 60px;
   height: 60px;
   border: 2px solid #0B8D35;
}
div.cs_box div.move_warp:hover {
   background: #500000; /* hover red bg */
}
div.cs_box div.move_hover:hover {
   background: #005000; /* hover green bg */
}
div.cs_box div.scan_hover:hover {
   color: #FFFFFF; /* hover white text */
}
.scan_text_vert {
   font-size: 90%;
   text-align: center;
   line-height: 15px;
}
.scan_text_hor {
   font-size: 90%;
   text-align: center;
   line-height: 20px;
}
.move_text {
   line-height: 60px;
   /*font-size:125%;*/
   font-weight: bold;
   text-align: center;
}
a.warp_link:hover {
   background: #500000; /* hover red bg */
}
.nopad {
   margin: 0px;
   padding: 0px;
}
/* Weapon Drag Drop */
ul.sortable li {
   position: relative;
}
ul.boxy {
   list-style-type: none;
   padding: 4px 4px 0 4px;
   margin: 0px;
   width: 10em;   
   font: 13px Arial, Sans-Serif;
   border: 1px solid #0B8D35;
}
ul.boxy li {
   cursor: move;
   margin-bottom: 4px;
   padding: 2px 2px;
   border: 1px solid #0B8D35;
}
#left_col {
    width: 500px;
    float: left;
    margin-left: 5px;
}
/* LM */
table.lmt {
   border-collapse: collapse;
   border-spacing: 1px;
}
/*Local up link Icon*/
div.lm_sector div.lmup {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 10px;
   width: 120px;
}
/*Local Plot/Warp Area*/
div.lm_sector div.lmp {
   position: absolute;
   top: 10px;
   left: 0px;
   height: 18px;
   z-index: 2;
}
/*Local trader and forces*/
div.lm_sector div.lmtf {
   position: absolute;
   top: 10px;
   right: 0px;
   height: 18px;
   text-align:right;
   z-index: 2;
}
/*Local locations*/
div.lm_sector div.lmloc {
   position: absolute;
   top: 28px;
   left: 0px;
   height: 18px;
   z-index: 2;
}
/*Local left link Icon*/
div.lm_sector div.lmleft {
   position: absolute;
   top: 46px;
   left: 0px;
   height: 20px;
   width: 20px;
}
/*Local sector number*/
div.lm_sector div.lmsector {
   position: absolute;
   top: 46px;
   left: 20px;
   height: 20px;
   text-align: center;
   width: 80px;
}
/*Local right link Icon*/
div.lm_sector div.lmright {
   position: absolute;
   top: 46px;
   left: 100px;
   height: 20px;
   text-align: right;
   width: 20px;
}
/*Local port section*/
div.lm_sector div.lmport {
   position: absolute;
   top: 66px;
   left: 0px;
   height: 44px;
   z-index: 2;
   /*width: 120px;*/
}
/*Local down link Icon*/
div.lmdown {
   position: absolute;
   top: 110px;
   left: 0px;
   height: 10px;
   /*width: 120px;*/
}
div.lm_sector {
   position: relative;
   width: 120px;
   height: 120px;
}
div.connectSeclm {
   background-color: #33784B;
}
div.connectSeclm:hover{
   background-color: #14645F;
}
div.currentSeclm {
   /*background-color:#14642F;*/
   background: url('../images/currentsector.png');
}
div.currentSeclm:hover{
   /*background-color:#337873;*/
   background: url('../images/currentsector_hover.png');
}
div.normalSeclm {
   background-color: #0B4C1C;
}
div.normalSeclmu {
   background-color: #000000;
}
div.lm_sector img.move_hack {
   height: 120px;
   width: 120px;
   position: absolute;
   top: 0px;
   left: 0px;
   z-index: 1;
}
a.mp_as {
   display: block;
   height: 120px;
   width: 120px;
   text-decoration: none;
   background-color: Transparent;
   color: inherit;
}
/* Layout Sprite Map */
#layout {
   width: 1024px; 
   height: 768px;
   background: transparent url('../images/smr_layout.png') no-repeat;
   margin: 10px auto; 
   padding: 0;
   position: relative;
}
#layout li {
   margin: 0; 
   padding: 0; 
   list-style: none;
   position: absolute;
}
#layout li {
   display: block;
}
#smr_logo, #smr_logo a {
   left: 0; 
   width: 185px; 
   height: 100px;
}
#player_name, #player_name a {
   left: 190px; 
   top: 30px; 
   width: 120px; 
   height: 50px;
}
#player_info, #player_info a {
   left: 316px; 
   top: 16px; 
   width: 318px; 
   height: 70px;
}
#ship_name, #ship_name a {
   left: 662px; 
   top: 29px; 
   width: 110px; 
   height: 53px;
}
#ship_info, #ship_info a {
   left: 785px; 
   top: 14px; 
   width: 219px; 
   height: 71px;
}
#main_window {
   left: 195px; 
   top: 125px; 
   width: 772px; 
   height: 588px;
}
/* wep drop down */
div.wep_drop1 {
   cursor: pointer;
}
div.wep_drop1 .wep1 {
   color: #F6FF00;
}
/* Gal Map */
li.gal {
   font-size: 95%;
   height: 1.5em;
}
div.connectSecgm {
   background-color: #33784B;
}
div.currentSecgm {
   /*background-color:#14642F;*/
   background: url('../images/currentsector.png');
}
.gpsubheader
{
   font-style: italic;
   margin-top: 0px;
   margin-bottom: 0px;
}
.gpeditornote
{
   font-size: smaller;
}
.gpcolumn
{
   width: 50%;
   vertical-align: top;
}
.shiplistdescription
{
   white-space: nowrap;
}
.newbie
{
   font-style: italic;
}
Last edited by Freon22 on Fri Jul 17, 2009 4:35 pm, edited 1 time in total.
Page
SMR Coder
Posts: 1779
Joined: Sat Dec 07, 2002 9:17 pm

Re: Custom CSS

Post by Page »

Well I can't update svn with the new css for a few days at least (currently in the midst of finding/moving house), but svn automatically keeps a history of all previous versions (which is very nice)

Also if you want to know which bits I have probably edited somewhat, they'll have the { on a new line by itself as that's my preference (I like to be able to match up { and } in a straight vertical line as I find it easier, and the extra line/height doesn't bother me. So that's a good way of distinguishing my stuff from the rest of SMR stuff ;)
Freon22
Beginner Spam Artist
Posts: 3278
Joined: Wed Apr 17, 2002 10:09 pm
Location: USA
Contact:

Re: Custom CSS

Post by Freon22 »

Yelp formating for readability is always cool. How that bring up a question I have always had, should hexadecimal color code be upper case or lower case? I even did a google search looking for the answer lol. I know its upper case but I see so much in lower case and have even seen it mixed case. I kind of like lower case for no other reason then readability.
Page
SMR Coder
Posts: 1779
Joined: Sat Dec 07, 2002 9:17 pm

Re: Custom CSS

Post by Page »

Personally I use upper case for a few reasons. There's the fact that I'm used to it and I think it makes the letters/numbers/# look roughly the same size (#ab12ef vs #AB12EF) which makes it looks like one solid block to me. Also there's the fact that I think of it as a constant.
In terms of using lower case, it says the same thing, just my personal preference is upper case (for the reasons mentioned, which won't necessarily hold for anyone else).
Page
SMR Coder
Posts: 1779
Joined: Sat Dec 07, 2002 9:17 pm

Re: Custom CSS

Post by Page »

I took your version Freon and: Standardised the format, removed initcap from non font-family values, fixed some validation errors ("font: inherit Arial;" didn't validate for instance, but some others as well), switched some definitions to shorthand, converted spaces back to tabs and removed some duplicate definitions within the same block (validator moaned about them)

Code: Select all

html, body
{
	height: 100%;
}
body
{
	background: #0B2121;
	font-family: Arial, Sans-Serif;
	font-variant: normal;
	margin: 10px 0px 0px 0px;
	padding: 0px;
	color: #FFFFFF;
}
/* ----- All Heading styles ----- */
/* =h1,h2 default style for h tags */
h1, h2 {
	color: #80C870;
	font: bold 125% Arial, sans-serif;
	padding: 0px;
	margin: 0px;
}
/* =h2 default font-size for h2 tags */
h2
{
	font-size: 110%;
}
/* =h3 default color h3 tags */
h3
{
	color: #FF00FF; /*Fuchsia*/
	padding: 0px;
	margin: 0px;
}
/* ----- End Heading styles ----- */
/* ---------------------------- */
#InputFields, .InputFields
{
	background: #06240E;
	color: #FFFFFF;
	border: 1px solid #80C870;
	font: inherit;
	font-family: Arial;
}
.submitStyle:link
{
	background: #06240E;
	color: #FFFFFF;
	border: 1px solid #80C870;
	font: inherit;
	font-family: Arial;
	padding: 0px 8px;
}
.submitStyle:visited
{
	background: #06240E;
	color: #FFFFFF;
	border: 1px solid #80C870;
	font: inherit;
	font-family: Arial;
	padding: 0px 8px;
}
.submitStyle:hover
{
	background: #06240E;
	color: #FFFFFF;
	border: 1px solid #80C870;
	font: inherit;
	font-family: Arial;
	padding: 0px 8px;
}
.submitStyle:active
{
	background: #06240E;
	color: #FFFFFF;
	border: 1px solid #80C870;
	font: inherit;
	font-family: Arial;
	padding: 0px 8px;
}
.submitStyle
{
	background: #06240E;
	color: #FFFFFF;
	border: 1px solid #80C870;
	font: inherit;
	font-family: Arial;
	padding: 0px 8px;
	display: inline-table; /* Fixes the problems with vertical overlap in FF, but not IE :( */
}
#InputFieldsText
{
	background: #06240E;
	color: #FFFFFF;
	border: 1px solid #80C870;
	font: inherit;
	font-family: Arial;
}
/* ------------------------------------ */
#help_content
{
	margin: 10px 20px 50px 20px;
}
#help_menu
{
	margin: 10px;
}
form
{
	margin: 0px;
}
a.scan_btn
{
	background: #060E88;
	border: 1px solid #8070C8;
	font: 80% bold;
	padding: 0.1em 0.5em 0.1em 0.5em;
	text-align: center;
	color: #BBBBBB;
	position: relative;
	top: -1.6em;
}
a.scan_btn:hover
{
	background: #060E88;
	color: #FFFFFF;
}
/* -------- Table rules --------- */
/* =table default font size */
table
{
	font-size: 100%;
}
/* =th default style for th tags */
th
{
	background: #0A4E1D;
	color: #80C870;
	font-size: 110%;
	text-align: center;
	padding: 3px;
}
/* =td default style for td tags */
td
{
	padding: 3px;
	color: #FFFFFF;
	font-variant: normal;
	font-family: Arial, Sans-Serif;
	vertical-align: middle;
}
/* =td.sector */
td.sector
{
	padding: 0px;
	height: 3.5em;
	width: 4.5em;
	text-align: center;
}
/* =td.footer_left */
td.footer_left
{
	padding: 10px;
	border: solid #0B8D35;
	border-width: 0px 0px 1px 1px;
	background-color: #06240E;
	vertical-align: bottom;
	text-align: left;
	font-size: 75%;
	white-space: nowrap;
}
/* =td.footer_right */
td.footer_right {
	padding: 10px;
	border: solid #0B8D35;
	border-width: 0px 0px 1px 1px;
	background-color: #06240E;
	vertical-align: bottom;
	text-align: right;
	font: 75% Arial, Sans-Serif;
	white-space: nowrap;
}
table.standardnobord
{
	border: 0px;
}
.standardnobord tr,.standardnobord td,.standardnobord th
{
	border: 0px;
}
table.standard
{
	border: 1px solid #0B8D35;
	border-spacing: 0px;
}
table.standard td, table.standard th
{
	border: 1px solid #0B8D35;
}
table.create {
	border: 0px solid #0B8D35;
}
/* =.create td child, th also on line 110 */
.create td, th
{
	padding: 3px;
	border: 0px;
}
td.border_left
{
	border-left-width: 3px;
}
td.border_right
{
	border-right-width: 3px;
}
td.border_bottom
{
	border-bottom-width: 3px;
}
td.border_top
{
	border-top-width: 3px;
}
td.has_port
{
	background-color: gray;
}
td.vert_cent
{
	vertical-align: middle;
}
table.quote
{
	border: 1px solid #0B8D35;
}
table.nobord td
{
	border: none;
}
table.nohpad td
{
	padding-left: 0px;
	padding-right: 0px;
	margin: 0px;
}
td.button
{
	padding: 0px;
	text-align: center;
	width: 1%;
	white-space: nowrap;
	vertical-align: middle;
}
/***************************/
table.m
{
	height: 100%;
	width: 80em;
	border-spacing: 0px;
	padding: 0px;
}
td.l0
{
	padding: 0px 10px 0px 0px;
	vertical-align: top;
}
td.mb
{
	width: 225px;
}
div.l1
{
	text-align: right;
	width: 10em;
}
td.m0
{
	padding: 10px;
	border: solid #0B8D35;
	border-width: 1px 1px 0px 1px;
	background-color: #06240E;
	vertical-align: top;
	width: 100%;
}
td.r0
{
	padding: 0px 0px 0px 10px;
	vertical-align: top;
	text-align: left;
}
table.csl
{
	width: 27em;
}
/* --------- End of table rules ------- */
img
{
	border: none;
}
img.vote_site
{
	width: 98px;
	height: 41px;
}
/* =big, =.big */
big, .big
{
	font-size: 125%;
}
/* =small, .small */
small, .small
{
	font-size: 75%;
}
.attack_warning
{
	text-align: center;
	border: 1px solid #BBBB00;
	background-color: #550000;
	font-weight: bold;
	color: #FF0000;
	padding: 0px;
	margin: 0px;
}
/* */
.auto
{
	width: auto;
}
.shrink
{
	width: 1%;
}
.top
{
	vertical-align: top;
}
.blank
{
	margin: 0px;
	padding: 0px;
}
.nowrap
{
	white-space: nowrap;
}
.inset
{
	width: 95%;
}
.fullwidth
{
	width: 100%;
}
.fullheight
{
	height: 100%;
}
.right
{
	text-align: right;
}
.center
{
	text-align: center;
}
div.bar1
{
	border: 1px solid #0B8D35;
	padding: 5px;
}
div.bar1 div
{
	padding: 2px;
	background-color: #0B8D35;
	text-align: center;
}
input
{
	background: #06240E;
	color: #FFFFFF;
	border: 1px solid #80C870;
	font: 100% Arial;
}
textarea
{
	background: #06240E;
	color: #FFFFFF;
	border: 1px solid #80C870;
	font: 100% Arial;
	width: 30em;
	height: 15em;
}
a
{
	color: #FFFFFF;
	text-decoration: none;
	padding: 0px;
	margin: 0px;
}
a:hover
{
	background: #0A4E1D;
}
a.header
{
	color: #80C870;
}
/* =Colors */
.yellow
{
	color: #FFFF00;
}
.red
{
	color: #FF0000;
}
.green
{
	color: #00FF00;
}
.dgreen
{
	color: #00AA00;
}
.cyan
{
	color: #00FFFF;
}
.blue
{
	color:#0000FF;
}
.purple
{
	color: #7F00FF;
}
.npcColor
{
	color: #66CCFF;
}
.sectorColor
{
	color: #00FFFF;
}
/* end colors */
.bold
{
	font-weight: bold;
}
.italic
{
	font-style: italic;
}
.underline
{
	text-decoration: underline;
}
.smallCaps
{
	font-variant: small-caps;
}
.smallFont
{
	font-size: 75%;
}
hr
{
	color: #80C870;
	background-color: #A0F890;
	height: 2px;
}
div.buttonA
{
	margin: 0px;
	font-size: 100%;
	height: 1.0em;
	display: inline;
}
a.buttonA 
{
	font-size: inherit;
	text-decoration: none;
	height: 1.0em;
	display: inline;
	border: 2px solid;
	border-color: #A3CCA3 #2A6E2A #2A6E2A #A3CCA3;
	background-color: #0B8D35;
	color: #FFFFFF;
	white-space: nowrap;
}
a.buttonA:hover
{
	background-color: #0B8D35;
}
a.buttonA:active
{
	background-color: #0B8D35;
	border-color: #A3CCA3 #2A6E2A #2A6E2A #A3CCA3;
}
div#middle_panel
{
	text-align: left;
	width: 100%;
}
div#right_panel
{
	width: 13em;
}
/*** CS Stuff ***/
div.cs_box
{
	position: relative;
}
div.cs_box div.scan
{
	position: relative;
	width: 250px;
	height: 250px;
}
div.cs_box div.no_scan
{
	position: relative;
	width: 210px;
	height: 210px;
	top: -20px;
	left: -20px;
}
div.cs_box div.scan_up
{
	position: absolute;
	top: 0px;
	left: 84px;
	width: 60px;
	height: 20px;
	color: #BBBBBB;
	border: 2px solid #0B8D35;
	background-color: #060E88; /* scan blue */
}
div.cs_box div.move_up
{
	position: absolute;
	top: 22px;
	left: 84px;
	width: 60px;
	height: 60px;
	border: 2px solid #0B8D35;
}
div.cs_box div.scan_left
{
	position: absolute;
	top: 84px;
	left: 0px;
	width: 20px;
	height: 60px;
	color: #BBBBBB;
	border: 2px solid #0B8D35;
	background-color: #060E88;
}
div.cs_box div.move_left
{
	position: absolute;
	top: 84px;
	left: 22px;
	width: 60px;
	height: 60px;
	border: 2px solid #0B8D35;
}
div.cs_box div.cs_mid
{
	position: absolute;
	top: 84px;
	left: 84px;
	width: 60px;
	height: 60px;
	border: 2px solid #0B8D35;
}
div.cs_box div.scan_right
{
	position: absolute;
	top: 84px;
	left: 208px;
	width: 20px;
	height: 60px;
	color: #BBBBBB;
	border: 2px solid #0B8D35;
	background-color: #060E88;
}
div.cs_box div.move_right
{
	position: absolute;
	top: 84px;
	left: 146px;
	width: 60px;
	height: 60px;
	border: 2px solid #0B8D35;
}
div.cs_box div.scan_down
{
	position: absolute;
	top: 208px;
	left: 84px;
	width: 60px;
	height: 20px;
	color: #BBBBBB;
	border: 2px solid #0B8D35;
	background-color: #060E88;
}
div.cs_box div.move_down
{
	position: absolute;
	top: 146px;
	left: 84px;
	width: 60px;
	height: 60px;
	border: 2px solid #0B8D35;
}
div.cs_box div.scan_warp
{
	position: absolute;
	top: 161px;
	left: 221px;
	width: 20px;
	height: 60px;
	color: #BBBBBB;
	border: 2px solid #0B8D35;
	background-color: #060E88;
}
div.cs_box div.move_warp
{
	position: absolute;
	top: 161px;
	left: 159px;
	width: 60px;
	height: 60px;
	border: 2px solid #0B8D35;
}
div.cs_box div.move_warp:hover
{
	background: #500000; /* hover red bg */
}
div.cs_box div.move_hover:hover
{
	background: #005000; /* hover green bg */
}
div.cs_box div.scan_hover:hover
{
	color: #FFFFFF; /* hover white text */
}
.scan_text_vert
{
	font-size: 90%;
	text-align: center;
	line-height: 15px;
}
.scan_text_hor
{
	font-size: 90%;
	text-align: center;
	line-height: 20px;
}
.move_text
{
	line-height: 60px;
	font-weight: bold;
	text-align: center;
}
a.warp_link:hover
{
	background: #500000; /* hover red bg */
}
.nopad
{
	margin: 0px;
	padding: 0px;
}
/* Weapon Drag Drop */
ul.sortable li
{
	position: relative;
}
ul.boxy
{
	list-style-type: none;
	padding: 4px 4px 0 4px;
	margin: 0px;
	width: 10em;
	font: 13px Arial, Sans-Serif;
	border: 1px solid #0B8D35;
}
ul.boxy li
{
	cursor: move;
	margin-bottom: 4px;
	padding: 2px 2px;
	border: 1px solid #0B8D35;
}
#left_col
{
	 width: 500px;
	 float: left;
	 margin-left: 5px;
}
/* LM */
table.lmt
{
	border-collapse: collapse;
	border-spacing: 1px;
}
/*Local up link Icon*/
div.lm_sector div.lmup
{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 10px;
	width: 120px;
}
/*Local Plot/Warp Area*/
div.lm_sector div.lmp
{
	position: absolute;
	top: 10px;
	left: 0px;
	height: 18px;
	z-index: 2;
}
/*Local trader and forces*/
div.lm_sector div.lmtf
{
	position: absolute;
	top: 10px;
	right: 0px;
	height: 18px;
	text-align:right;
	z-index: 2;
}
/*Local locations*/
div.lm_sector div.lmloc
{
	position: absolute;
	top: 28px;
	left: 0px;
	height: 18px;
	z-index: 2;
}
/*Local left link Icon*/
div.lm_sector div.lmleft
{
	position: absolute;
	top: 46px;
	left: 0px;
	height: 20px;
	width: 20px;
}
/*Local sector number*/
div.lm_sector div.lmsector
{
	position: absolute;
	top: 46px;
	left: 20px;
	height: 20px;
	text-align: center;
	width: 80px;
}
/*Local right link Icon*/
div.lm_sector div.lmright
{
	position: absolute;
	top: 46px;
	left: 100px;
	height: 20px;
	text-align: right;
	width: 20px;
}
/*Local port section*/
div.lm_sector div.lmport
{
	position: absolute;
	top: 66px;
	left: 0px;
	height: 44px;
	z-index: 2;
	/*width: 120px;*/
}
/*Local down link Icon*/
div.lmdown
{
	position: absolute;
	top: 110px;
	left: 0px;
	height: 10px;
}
div.lm_sector
{
	position: relative;
	width: 120px;
	height: 120px;
}
div.connectSeclm
{
	background-color: #33784B;
}
div.connectSeclm:hover
{
	background-color: #14645F;
}
div.currentSeclm
{
	/*background-color:#14642F;*/
	background: url('../images/currentsector.png');
}
div.currentSeclm:hover
{
	/*background-color:#337873;*/
	background: url('../images/currentsector_hover.png');
}
div.normalSeclm
{
	background-color: #0B4C1C;
}
div.normalSeclmu
{
	background-color: #000000;
}
div.lm_sector img.move_hack
{
	height: 120px;
	width: 120px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}
a.mp_as
{
	display: block;
	height: 120px;
	width: 120px;
	text-decoration: none;
	background-color: transparent;
	color: inherit;
}
/* Layout Sprite Map */
#layout
{
	width: 1024px;
	height: 768px;
	background: transparent url('../images/smr_layout.png') no-repeat;
	margin: 10px auto;
	padding: 0;
	position: relative;
}
#layout li
{
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
}
#layout li
{
	display: block;
}
#smr_logo, #smr_logo a
{
	left: 0;
	width: 185px;
	height: 100px;
}
#player_name, #player_name a
{
	left: 190px;
	top: 30px;
	width: 120px;
	height: 50px;
}
#player_info, #player_info a
{
	left: 316px;
	top: 16px;
	width: 318px;
	height: 70px;
}
#ship_name, #ship_name a
{
	left: 662px;
	top: 29px;
	width: 110px;
	height: 53px;
}
#ship_info, #ship_info a
{
	left: 785px;
	top: 14px;
	width: 219px;
	height: 71px;
}
#main_window {
	left: 195px;
	top: 125px;
	width: 772px;
	height: 588px;
}
/* wep drop down */
div.wep_drop1
{
	cursor: pointer;
}
div.wep_drop1 .wep1
{
	color: #F6FF00;
}
/* Gal Map */
li.gal
{
	font-size: 95%;
	height: 1.5em;
}
div.connectSecgm
{
	background-color: #33784B;
}
div.currentSecgm
{
	/*background-color:#14642F;*/
	background: url('../images/currentsector.png');
}
.gpsubheader
{
	font-style: italic;
	margin-top: 0px;
	margin-bottom: 0px;
}
.gpeditornote
{
	font-size: smaller;
}
.gpcolumn
{
	width: 50%;
	vertical-align: top;
}
.shiplistdescription
{
	white-space: nowrap;
}
.newbie
{
	font-style: italic;
}
Freon22
Beginner Spam Artist
Posts: 3278
Joined: Wed Apr 17, 2002 10:09 pm
Location: USA
Contact:

Re: Custom CSS

Post by Freon22 »

Cool, looks good. I passed my raters test and am now a state certified energy rater so been a little more tied up at work. But things will slow down or even out soon so I will have more free time to finish the orangefly.css that I have been working on. Also since I can link css in beta I have been wanting to see if I can make some graphic icons that when put together will look like a ship control panel. Not sure how that is going to work but will be fun trying.
Post Reply