oracle.css

body {
  background: #dadada;
  background-image:url('res/background-oracle.jpg'); 
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position: left top; 
  background-size: cover;
  font-size: 11pt;
  margin: 0;
}

div.logo { 
  float: left; 
  padding: 2px;
}
div.floatblock {
  float: left; 
  padding: 7px;
}
div.updateblock {
/*  float: left; */
  padding: 2px;
}
div.updatedetails {
  border: solid black 1px;
}
div#cardupdatesection { 
  display: none;
}

ul { text-align: left; }

a.printinglink {  text-decoration: none; }

a.ex { float: right; font-size: large;}
.headsetrar { float: right; padding-right: 2px; }

div.searchinput, div.searchchecklist { float: left; padding: 2px; }
div.searchinput dl { margin-block-start: 0; margin-block-end: 0; }
div.searchinput input[type=text] { 
  width: 105px;
}
div.searchinput input.searchnumeric[type=text] { 
  width: 35px;
}
div.searchinput select { 
  width: 110px;
}
div.searchinput { 
  position: relative;
}
/*
div.ui-layout-center { 
  float: left;
  width: auto;
 }
*/
/* dd.searchbutton { text-align: right; } */
div.helloplace { text-align: center; max-width: 750px; display: inline-block;}
div.infoplace {  max-width: 750px; display: inline-block; text-align: left;}

div.error, div.more, div.moreloading, div.numresults, div.searchinput {
  font-family: "L5R Title","Times New Roman",Georgia,Serif;
  text-align: center;
  font-size: 16pt;
/*   color: red; */
  display: inline-block;
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.9);
  padding: 4px;

  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -khtml-border-radius: 7px;
  border-radius: 7px;
}

div.menubar {
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 31px; 
  display: inline-block;
}
div#logarea { 
  display: inline-block !important;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
  float: right;
}
span#loginfo:not(:empty)::after, .pullmenu::after {
    content: url("res/menu-tinydown.png");
    margin-left: .2em;
}
.loginfo {display:none;}
.pullmenuright::after { 
    content: url("res/menu-tinyright.png");
    margin-left: .2em;
}

div.randarea {
  font-family: "Times New Roman",Georgia,Serif;

  display: inline-block;
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.9);
/*  padding: 4px; */

  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -khtml-border-radius: 7px;
  border-radius: 7px;

  text-align: center;
}

select.listselect { 
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none; 
  border: none;
  /* needed for Firefox: */
  overflow:hidden;
  width: 120%;
  background: transparent;
}

div.listitem, div.listitemplain {
  width: 100%;
  display: table-row;
  font-family: "Times New Roman",Georgia,Serif;
}

div.listimage, div.listmiddle, div.listheadmiddle {
/*  float: left; */
  padding: 4px;
  display: table-cell;
  vertical-align: top;
  text-align: center;
}

div.listbody, div.listbodyplain, div.listheadplain {
/*  padding-left: 20px; */
/*  float: left; */
/*  max-width: 400px; */
  padding: 4px;
  width: 100%;
  display: table-cell;
  vertical-align: top;
}

div.listitem:nth-child(odd)>div { 
  background-color: rgb(218, 218, 218);
  background-color: rgba(218, 218, 218, 0.9);
}
div.listitem:nth-child(even)>div, div.listitemplain>div {
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.9);
}
div.listitem:first-child>div, div[class^=result] div.randarea:first-child { 
   -moz-border-radius-topleft: 0px;  -webkit-border-top-left-radius: 0px;  -khtml-border-top-left-radius: 0px;  border-top-left-radius: 0px;
 
 }

div.listitemplain:first-child>div {
	     /* round right corners */
  -moz-border-radius-topright: 7px;  -webkit-border-top-right-radius: 7px;  -khtml-border-top-right-radius: 7px;  border-top-right-radius: 7px;
}
div.listitemplain:last-child>div {
  -moz-border-radius-bottomright: 7px;  -webkit-border-bottom-right-radius: 7px;  -khtml-border-bottom-right-radius: 7px;  border-bottom-right-radius: 7px;
}

div.listimage {
	      /* round left corners */
  -moz-border-radius-topleft: 7px;  -webkit-border-top-left-radius: 7px;  -khtml-border-top-left-radius: 7px;  border-top-left-radius: 7px;
  -moz-border-radius-bottomleft: 7px;  -webkit-border-bottom-left-radius: 7px;  -khtml-border-bottom-left-radius: 7px;  border-bottom-left-radius: 7px;
}

div.listbody {
	     /* round right corners */
  -moz-border-radius-topright: 7px;  -webkit-border-top-right-radius: 7px;  -khtml-border-top-right-radius: 7px;  border-top-right-radius: 7px;
  -moz-border-radius-bottomright: 7px;  -webkit-border-bottom-right-radius: 7px;  -khtml-border-bottom-right-radius: 7px;  border-bottom-right-radius: 7px;
}

/*
.listing>tbody>tr.sectionspacer:nth-child(n)>td, .listing>tbody>tr.pageheader>td , .LO_card_format_1>tbody>tr:last-child { background-color: transparent; background-color: rgba (0,0,0,0); color: white; )}
*/
div.listhead, div.listheadxl, div.listheadplain, div.upperhead, div.listheadmiddle{
    background: #6e6e6e;
	background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
	background: -moz-linear-gradient(top,  #888,  #575757);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
  /*   background-color: rgb(39, 39, 39);
  background-color: rgba(39, 39, 39, 0.9);  */
  font-size: large;
  border-top: none;
  font-family: "L5R Title";
  padding: 2px;
}

div.listhead, div.listheadxl, div.listheadplain, div.upperhead {
  -moz-border-radius-topright: 7px;  -webkit-border-top-right-radius: 7px;  -khtml-border-top-right-radius: 7px;  border-top-right-radius: 7px;
}

div.upperhead {
  -moz-border-radius-topleft: 7px;  -webkit-border-top-left-radius: 7px;  -khtml-border-top-left-radius: 7px;  border-top-left-radius: 7px;
}

div.listheadxl {
    font-size: x-large;
}
div.listhead, div.listheadxl, div.listhead a:visited, div.listhead a:link, div.listhead a:hover, div.listhead a:active, div.listheadplain, div.upperhead, div.listheadmiddle{
    color:  /* #ffd73a; */  #FFFFFF;
    text-decoration: none;
}


/***********************    DL for label: stuff  ****************/
/* DL lists to have left label align with right text */
/* slight problem: if left label is BIGGER than right side, wierd stuff happens */
dl {
    padding: 0.5em;
}
dt {
    float: left;
    clear: left;
    width: 90px;
    text-align: right;
    font-weight: bold;
/*    color: green; */
}
dt:not(:empty)::after {
    content: ":";
}
dd {
    margin: 0 0 0 100px;
    padding: 0 0 0.25em 0;
    font-size: 14pt;
  text-align: left;
}
/******************   end DL   ***************/


/*********************** ICON SECTION   ***********************/
/* Iconic and smiconic are for inline icons - some of them seem a little high on the line centerline */
.iconic { 
  width: 30px;
  height: 27px;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  border: none;
  padding: 2px 6px 2px 6px;
 }

.smiconic { 
  width: 22px;
  height: 20px;
  line-height: 1.4em;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  border: none;
  padding: 2px 6px 2px 6px;
  font-family: "L5R Title";
}

table.smiconic { float: left; display: inline;}
tr > td.justcost > div > table > tbody > tr >td.iconic {  width: 92px; }
/* br + table.smiconic > tbody > tr > td.smgc {   width: 66px; } */

.hr {  background-image: url('res/icon-cards/ee_honor_requirement.png'); }
.gc {  background-image: url('res/icon-cards/ee_cost_gold.png'); }
.ph {  background-image: url('res/icon-cards/ee_personal_honor.png'); }
.fo {  background-image: url('res/icon-cards/ee_focus.png');  color: white; }
.force {  background-image: url('res/icon-cards/ee_f_unaligned.png');  color: white;  width: 46px;}
.chi {  background-image: url('res/icon-cards/ee_c_unaligned.png');  color: white;  width: 45px;}

.smhr {   background-image: url('res/icon-cards-small/ee_honor_requirement.png'); }
.smgc {   background-image: url('res/icon-cards-small/ee_cost_gold.png'); }
.smph {   background-image: url('res/icon-cards-small/ee_personal_honor.png'); }
.smfo {   background-image: url('res/icon-cards-small/ee_focus.png');  color: white;/*  width: 66px; */ }
.smforce {   background-image: url('res/icon-cards-small/ee_f_unaligned.png');  color: white;/*  width: 34px; */}
.smchi {   background-image: url('res/icon-cards-small/ee_c_unaligned.png');  color: white;/*   width: 33px; */}

button.iiconic {
    padding: 0;
    height: 17px;
    border: 0;
    background-color: transparent;
}
button .iiconic, span .iiconic {
  margin-left: .4em;
}
.iiconic {
  font-family: 'iconicfill';
  cursor: pointer;
}
.listmanagement .iiconic { 
  margin-left: 0;
}
.listmanagement { 
    float: right;
    text-align: right;
}
.listmanagement div {
    border: solid black 1px;
    -moz-border-radius: 3px;  -webkit-border-radius: 3px;  -khtml-border-radius: 7px;  border-radius: 3px;
}
.inegative { color: #ee2222; }
.ipositive { color: #0a8913; }
.listheadmiddle .ipositive { color: #1aee29; }
.iyellow { color: yellow; }
.idyellow { color: #ff4d01; }
.ipurple { color: purple; }
.iblue { color: #2222ee; }
.iblack { color: black; }
.iyin { font-size: 15pt; }

.curses { cursor: pointer; }

/* function makeicon($icon,$etc='',$extraclass='') {
  $iconbase = array("check"=>array('iiconic ipositive','✔'),
                    "bolt"=>array('iiconic iyellow','⚡'),
                    "cam"=>array('iiconic iyellow',''),
                    "x"=>array('iiconic inegative','✘'),
                    "left"=>array('iiconic iblue','←'),
                    "up"=>array('iiconic iblue','↑'),
                    "right"=>array('iiconic iblue','→'),
                    "down"=>array('iiconic iblue','↓'),
                    "pen"=>array('iiconic iblue',''),
                    "minus"=>array('iiconic inegative',''),
                    "plus"=>array('iiconic ipositive',''),
                    "equals"=>array('iblue','&#=;'),
                    "yinyang"=>array('iblack iyin','☯'),
                    "3x"=>array('ipositive','3x'),
                    "ksan"=>array('','','ksan.png'),
                    "kup"=>array('','','kup.png'),
                    "kdown"=>array('','','kdown.png'));
  $iconout = $iconbase[$icon][1]?'<span class="':'<img class="inlinebutton ';
  $iconout .= $iconbase[$icon][0].($extraclass?' '.$extraclass:'').
     '" '.($iconbase[$icon][1]?'':'src="/oracle/resources/icon-buttons/'.$iconbase[$icon][2].'" ').$etc.'>';
  if($iconbase[$icon][1]) {
    $iconout .=  $iconbase[$icon][1].'</span>';
  }
*/

/************    end ICONS   ****************/


/************** FONT DEFINES *****************/
.l5rfont { font-family: "L5R Title"; }
.l5rsym { font-family: "L5R Symbol"; font-size: 120%; }

@font-face {
    font-family: "L5R Title";
    src: url('res/fonts/l5rtitle_new-webfont.eot');
    src: url('res/fonts/l5rtitle_new-webfont.eot?#iefix') format('embedded-opentype'),
         url('res/fonts/l5rtitle_new-webfont.woff') format('woff'),
         url('res/fonts/l5rtitle_new-webfont.ttf') format('truetype'),
         url('res/fonts/l5rtitle_new-webfont.svg#iconicfill') format('svg');
}
@font-face {
    font-family: "L5R Symbol";
    src: url('res/fonts/l5r_textsymbols.eot');
    src: url('res/fonts/l5r_textsymbols.eot?#iefix') format('embedded-opentype'),
         url('res/fonts/l5r_textsymbols.woff') format('woff'),
         url('res/fonts/l5r_textsymbols.ttf') format('truetype'),
         url('res/fonts/l5r_textsymbols.svg#iconicfill') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
    font-family: 'iconicfill';
    src: url('res/fonts/iconic_fill-webfont.eot');
    src: url('res/fonts/iconic_fill-webfont.eot?#iefix') format('embedded-opentype'),
         url('res/fonts/iconic_fill-webfont.woff') format('woff'),
         url('res/fonts/iconic_fill-webfont.ttf') format('truetype'),
         url('res/fonts/iconic_fill-webfont.svg#iconicfill') format('svg');
}

/********************   END FONTS   *******************/

/***************** button stuff   ************/
img.inlinesymbol {   border: none;   vertical-align: middle; }
.button {
  font-size: large;
  font-family: "L5R Title";

  display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: middle; 
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);

  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 2px;
  padding-bottom: 2px;

}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}
.buttonsmall { 
  font-size: 11pt;
}
.buttonsmaller { 
  font-size: 10pt;
}
.nocolor { 
  color: #ffd73a;
 }

/*   gray   -   good examples at http://webdesignerwall.com/tutorials/css3-gradient-buttons */
.gray {
/*	color: #e9e9e9; */
  color: #ffd73a;
	border: solid 1px #555;
	background: #6e6e6e;
	background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
	background: -moz-linear-gradient(top,  #888,  #575757);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.gray:hover {
	background: #616161;
	background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
	background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.gray:active {
/*	color: #afafaf; */
	background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
	background: -moz-linear-gradient(top,  #575757,  #888);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}
/*   led on off */
span.noimage { 
display:none;
}
.buttonimage {
float: right;
width: 12px;
padding: 0px;
background: right center no-repeat;
}
.buttonimagegreenledon {
background-image: url("/oracle/resources/icon-buttons/led_green_on.png");
}
.buttonimagegreenledoff {
background-image: url("/oracle/resources/icon-buttons/led_green_off.png");
}
.buttonimageredledon {
background-image: url("/oracle/resources/icon-buttons/led_red_on.png");
}
.buttonimageredledoff {
background-image: url("/oracle/resources/icon-buttons/led_red_off.png");
}
.buttonimageadmin { 
  color: red;
}
/* ********************   end buttons ******************** */


/* jquery layout */
img#sidebarcloser { 
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: 10px;
 }
div#sidebar { 
  float: left; 
  padding-right: 5px;
  width: 240px;
/*  display: table-cell; */
 }
div#sidebaropener { 
  cursor: pointer;
  float: left;
  padding-right: 0px;
  width: 26px;
  display: none;
  height: 100%;
  min-height: 1000px;
 }
div#maincontent { 
/*  margin-left: 240px; */
/*  display: table-cell; */
  width: auto;
  overflow: auto;
 }
.ui-layout-pane {
  background-color: rgba(0,0,0,0) !important;
  opacity:1 !important;
  border: none !important;
}
.ui-layout-pane-north { 
  overflow: hidden;
}
.ui-layout-resizer { 
  background: none !important;
}
.ui-layout-resizer-west-open, .ui-layout-resizer-north-open { 
  display: none !important;
}
.ui-layout-toggler-east-closed ,
.ui-layout-toggler-west-open    { background: url(res/toggle-lt.gif) no-repeat center right !important; }
.ui-layout-toggler-west-closed ,
.ui-layout-toggler-east-open    { background: url(res/a-tabright.png) no-repeat center left; }

.ui-layout-toggler-north-closed ,
.ui-layout-toggler-south-open    { background: url(res/toggle-dn.gif) no-repeat center right !important; }
.ui-layout-toggler-south-closed ,
.ui-layout-toggler-north-open    { background: url(res/toggle-up.gif) no-repeat center left !important; }


/* TODO:  make the tab colors match my other colors...   along the same vein, i think listitem needs even/odd swapped if i choose the light colored tabs vs the dark */
#tabs {
  font-size: large;
  font-family: "L5R Title";
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li {
      float: left;
      margin: 0 .375em 0 0 ;
}
#tabs li.r { 
  float: right;
}

#tabs a, #tabs span {
  position: relative;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd);  
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  box-shadow: 0 2px 2px rgba(0,0,0,.4);
}

#tabs a {
  padding: .3em 1.5em;
  border-radius: 5px 0 0 0;
  float: left;
}
#tabs span { 
  padding: .3em;
  float: right;
  border-radius: 5px;
 }
#tabs span:empty { display:none; }
#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after {
  background: #fff;
}

#tabs a:focus {
  outline: 0;
}

#tabs a::after {
  content:'';
  position:absolute;
  z-index: 1;
  top: 0;
  right: -.375em;  
  bottom: 0;
  width: .875em;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd);  
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  transform: skew(10deg);
  border-radius: 0 5px 0 0;  
}

#tabs #current a,
#tabs #current a::after {
  background: #fff;
  z-index: 3;
}

div[class^=result] .randarea { 
  min-width: 750px;
  width: 100%;
  min-height: 200px;
}

ul.nobullet, ul.nobullet ul {
  list-style-type: none;
}
nav ul {
  margin: 0;
  padding-left: 0;
}
div.menubar nav li {
/*  padding-right: 1rem; */
  padding-left: 1rem;
/*  background: rgb(196,196,196); */
  font-size: large;
  font-family: "L5R Title";
}
nav li {
  position: relative;
  display: block;
  transition-duration: 0.5s;
  float: left;
  text-decoration: none;
}
nav li dl {
    font-family: "Times New Roman","Georgia","Serif";
}
nav li.right {
    float: right;
}
div.menubar nav>ul>li { 
  padding-top: 5px;
  padding-bottom: 1rem;
}
nav li a:link, nav li a:hover, nav li a:active, nav li a:visited {
  text-decoration: none;
  color: black;
}

nav li:hover {
  cursor: pointer;
/*  background-color: rgb(128, 128, 128); */
}
div.menubar nav ul li ul {
  top: 31px;
}
nav ul li ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
/*  margin-top: .5rem; */
  left: 0;
  display: none;
}
nav ul li.right ul {
    left: auto;
    right: 0;
}

nav ul li:hover > ul,
ul li:focus-within > ul,
nav ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
  z-index: 4;
/*  background: rgb(255,255,255); */
}

div.menubar nav ul li ul li {
  padding-top: .5rem;
  padding-bottom: .5rem;
}
nav ul li ul li {
  clear: both;
  width: 100%;
  background: rgb(255,255,255);
}

nav ul li ul li:focus-within,
nav ul li ul li:focus,
nav ul li ul li:hover {
  background-color: rgb(128, 128, 128); 
}
/*
nav ul li ul li.menuactive { 
  background-color: rgb(192,255,192);
}
*/
nav ul li ul li.menuactive::before {
    content: url('res/icon-buttons/led_green_on.png');
    margin-right: .4em;
}
nav ul:not(.menuone) li:not(.menuone) ul:not(.menuone) li:not(.menuactive):not(.menunone)::before {
    content: url('res/icon-buttons/led_green_off.png');
    margin-right: .4em;
}
li.menusort ul li.menuactive::after { 
  content: url("res/menu-tinyarrowdown.png");
  float: right;
  margin-left: .2em;
}
li.menusort ul li.searchdesc::after { 
  content: url("res/menu-tinyarrowup.png");
}
nav ul li ul li {
  white-space: nowrap;
  border-right: solid black 1px;
  border-left: solid black 1px;
}
nav ul li ul li:last-child {
  border-bottom: solid black 1px;
}
.listblock {
    border: solid black 1px;
/*    clear: both;
    width: auto;  */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
  margin: 4px;
}

.feather {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.button .iiconic .feather {
  position: relative;
  top: 2px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9; /* Sit on top */ 
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  padding: 20px;
}

/* TODO:   width is funky for larger things */
.modal-box {
  margin: 15% auto; /* 15% from the top and centered */
  width: 20%; /* Could be more or less, depending on screen size */
  min-width: 400px;
  min-height: 250px; 
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.9);
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -khtml-border-radius: 7px;
  border-radius: 7px;
  padding: 0;
/*  border: 1px solid #888; */
}