/*******************************************************************************
 *
 * LEIDEN OPEN VARIATION DATABASE (LOVD)
 *
 * Created     : 2009-10-20
 * Modified    : 2017-11-08
 * For LOVD    : 3.0-21
 *
 * Copyright   : 2004-2017 Leiden University Medical Center; http://www.LUMC.nl/
 * Programmers : Ivo F.A.C. Fokkema <I.F.A.C.Fokkema@LUMC.nl>
 *               Ivar C. Lugtenburg <I.C.Lugtenburg@LUMC.nl>
 *               M. Kroon <m.kroon@lumc.nl>
 *
 *
 * This file is part of LOVD.
 *
 * LOVD is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * LOVD is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with LOVD.  If not, see <http://www.gnu.org/licenses/>.
 *
 *************/

/* Standard styles */
body                            {font-family : Verdana, Helvetica, Arial, sans-serif; font-size : 13px; color : #000000;}
table                           {font-family : Verdana, Helvetica, Arial, sans-serif; font-size : 13px; color : #000000; text-align : left;}



/* styles related to forms */
table.dataform                  {table-layout : fixed;}
input, textarea, button, select {font-family : Verdana, Helvetica, Arial, sans-serif; font-size : 13px; color : #000000; background : #FFFFFF; border : 1px solid #224488; margin-top : 1px; margin-bottom : 1px; padding-left : 2px; padding-right : 2px;}
select                          {padding-left : 0px; padding-right : 0px; max-width: 100%}
input:hover, input:focus, textarea:hover, textarea:focus, button:hover, select:hover, select:focus
                                {background : #F0F3FF; border : 1px solid #112244;}
input.checkbox                  {background : #F0F3FF; border : 0px;}
input:disabled, select:disabled, .err:disabled, .err:hover:disabled
                                {color : #444444; background : #DDDDDD; border : 1px solid #333333;}
th                              {text-align : left;} /* Because IE auto-centers them */
.bold                           {font-weight : bold;}



/* Headings */
H1             {font-size : 24px; font-weight : bold; margin-top : 0px; margin-bottom : 10px;}
H2             {font-size : 20px; font-weight : bold; font-style : italic; margin-top : 0px; margin-bottom : 5px;}
H2.LOVD        {color : #224488; border-bottom : 1px solid #224488; margin-bottom : 10px;}
H3             {font-size : 18px; font-weight : bold; margin-top : 0px; margin-bottom : 2px;}
H3.LOVD        {color : #224488; border-bottom : 1px solid #224488; margin-bottom : 5px;}
H4             {font-size : 16px; font-weight : bold; font-style : italic; margin-top : 0px; margin-bottom : 0px;}
H4.LOVD        {color : #224488; border-bottom : 1px solid #224488; margin-bottom : 5px;}
H5             {font-size : 15px; font-weight : bold; margin-top : 0px; margin-bottom : 0px;}
H6             {font-size : 14px; font-weight : bold; margin-top : 0px; margin-bottom : 0px;}

.S18           {font-size : 18px;}
.S16           {font-size : 16px;}
.S15           {font-size : 15px;}
.S13           {font-size : 13px;}
.S11           {font-size : 11px;}
.S09           {font-size : 9px;}



/* Links */
a              {color : #0000FF}
a:active       {color : #0000FF}
a:visited      {color : #0000FF}
a img          {border : 0px;}



/* Top table with the logo */
table.logo           {font-size : 11px; background : #224488; color : #FFFFFF;}
table.logo a         {color : #FFFFFF;}
table.logo a:visited {color : #FFFFFF;}
table.logo a:active  {color : #FFFFFF;}
/* Needed if space shows up around the images in my top table:
table.logo img       {display : block;}
*/



/* Footer message: Powered by LOVD ... */
table.footer           {font-size : 11px; background : #224488; color : #FFFFFF; border-top : 2px solid #000000; border-bottom : 2px solid #000000;}
table.footer a         {color : #FFFFFF;}
table.footer a:visited {color : #FFFFFF;}
table.footer a:active  {color : #FFFFFF;}



/* For lovd_showInfoTable() */
table.info     {border : 1px solid #224488; background : #F0F3FF;}



/* Error table required by lovd_displayError(); */
table.error    {font-size : 11px; border: 1px solid #000000; background : #F0F3FF; margin-left : auto; margin-right : auto;}
table.error th {font-size : 13px; border-bottom : 1px dotted #000000; background : #224488; color : #FFFFFF; padding : 0px 4px;}
table.error td {padding : 0px 4px;}



/* Error messages on forms, required by lovd_errorPrint() */
div.err                         {font-size : 11px; border : 1px solid #FF0000; background : #F3F3F3; padding : 5px;}
input.err, textarea.err, button.err, select.err
                                {border : 1px solid #EE0000;}
input.err:hover, input.err:focus, textarea.err:hover, textarea.err:focus, button.err:hover, select.err:hover, select.err:focus
                                {background : #FFF3F0; border : 1px solid #CC0000;}
input.warn, textarea.warn, button.warn, select.warn
                                {border : 1px solid #CCAA00;}
input.warn:hover, input.warn:focus, textarea.warn:hover, textarea.warn:focus, button.warn:hover, select.warn:hover, select.warn:focus
                                {background : #FFFFE8; border : 1px solid #AA6600;}



/* Lines and notes on the forms */
img.form_hr      {background : #CCCCCC;}
img.help         {margin-top : 4px; cursor : help;}
span.form_note   {font-size : 11px; color : #666666;}
div.tooltip      {background : #F0F3FF; border : 1px solid #224488; padding : 2px; font-size : 11px; width : 400px; position : absolute; display : none;}
img.tooltip-hide {position : absolute; right : 0px; top : 0px; cursor : pointer;}
span.custom_link {text-decoration : none; border-bottom : 1px dashed black;}



/* For tables on the setup page */
table.setup                     {border : 1px solid #224488; background : #F0F3FF; padding : 5px;}
table.setup td                  {padding-left : 5px; font-size : 11px;}
table.setup tr.pointer          {cursor : pointer;}
table.setup tr.pointer:hover    {background : #E0E9FF;}



/* Often used table for views of lists and entries. */
table.data                               {font-size : 11px; border : 1px solid #AFC8FA;}
table.data a                             {color : #0000FF;}
table.data a.hide                        {color : #000000; text-decoration : none;} /* Somehow it doesn't get the color-thing when it's not defined within table.data */
table.data th                            {background : #AFC8FA; padding-left : 4px; padding-right : 4px;}
table.data th.order                      {cursor : pointer;}
table.data th.ordered                    {background : #8CAFF0; cursor : pointer;}
table.data th.mvs                        {background : #9EBCF5; border-left : 2px solid; border-right : 2px solid; border-color : #8CAFF0}
table.data td                            {background : #F0F3FF; padding-left : 4px; padding-right : 4px;}
table.data td.ordered                    {background : #C8DCFA;}
table.data td.mvs                        {background : #DCE8FD; border-left : 2px solid; border-right : 2px solid; border-color : #C8DCFA}
table.data tr.hover td,
table.data tr.data:hover td              {background : #C8DCFA;}
table.data tr.hover td.ordered,
table.data tr.data:hover td.ordered      {background : #AFC8FA;}
table.data tr.data:hover td.mvs          {background : #BCD2FA;}
table.data tr.hover td.checkbox,
table.data tr.data:hover td.checkbox     {background : #F0F3FF; cursor : default;}
table.data input:disabled                {color : #000000; background : #FFFFFF; border : 1px solid #224488;}
table.data tr.del a                      {color : #999999;}
table.data tr.del:hover a                {color : #888888;}
table.data tr.del td                     {background : #F8FAFF; color : #999999;}
table.data tr.del td.ordered             {background : #E5E5EF; color : #888888;}
table.data tr.del:hover td               {background : #E5E5EF; color : #888888;}
table.data tr.del:hover td.ordered       {background : #D0D0E0; color : #666666;}
table.data tr.del:hover td.ordered a,
table.data tr.del:hover td.mvs a         {color : #666666;}
table.data tr.del:hover td.checkbox      {background : #F8FAFF; cursor : default;}
table.data tr.marked td                  {background : #FFF0F0;}
table.data tr.marked td.ordered          {background : #FAD5D5;}
table.data tr.marked:hover td            {background : #FAD5D5;}
table.data tr.marked:hover td.ordered    {background : #FFB5B5;}
table.data tr.marked:hover td.checkbox   {background : #FFF0F0; cursor : default;}

/* Viewlist find and replace column selectors */
div.vl_overlay       {background : #224488; opacity : 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */}
div.vl_overlay:hover {background : #224488; opacity : 0.1; filter: alpha(opacity=10); /* For IE8 and earlier */}

/* F&R options menu (used for find & replace in viewlists) */
div.fnroptionsmenu   {background: #F0F3FF; border: 1px solid #AFC8FA; padding: 4px; margin-bottom : 4px;}

/* Large, outstanding tooltips */
.ui-tooltip, .arrow:after {background: #224488; border: 2px solid white;}
.ui-tooltip         {padding: 10px 20px; color: white; border-radius: 20px; width: 340px;
                     font: bold 14px "Helvetica Neue", Sans-Serif; text-transform: uppercase;
                     box-shadow: 0 0 7px black; text-align: center}
.arrow              {width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%;
                     margin-left: -35px; bottom: -16px;}
.arrow.top          {top: -16px; bottom: auto;}
.arrow.left         {left: 20%;}
.arrow:after        {content: ""; position: absolute; left: 20px; top: -20px; width: 25px;
                     height: 25px; box-shadow: 6px 5px 9px -9px black;
                     -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);
                     transform: rotate(45deg);}
.arrow.top:after    {bottom: -20px; top: auto;}

/*table.data tr.del td.ordered    {background : #F0F3FF;}
table.data tr.del_hover td.ordered    {background : #AFC8FA;}
table.data tr.marked td.ordered {background : #FFD5D5;}
table.data tr.marked_hover td.ordered {background : #FFC0C0;}*/

/* Color coding the variants */
table.data tr.colRed td                   {background : #FAD5D5;}
table.data tr.colRed td.ordered           {background : #FFB5B5;}
table.data tr.colRed:hover td             {background : #FFB5B5;}
table.data tr.colRed:hover td.ordered     {background : #FF9090;}
table.data tr.colRed:hover td.checkbox    {background : #FAD5D5; cursor : default;}

table.data tr.colGreen td                 {background : #D0FFD0;}
table.data tr.colGreen td.ordered         {background : #B0FFB0;}
table.data tr.colGreen:hover td           {background : #B0FFB0;}
table.data tr.colGreen:hover td.ordered   {background : #80FF80;}
table.data tr.colGreen:hover td.checkbox  {background : #D0FFD0; cursor : default;}

table.data tr.colOrange td                {background : #FFE5C0;}
table.data tr.colOrange td.ordered        {background : #FFD090;}
table.data tr.colOrange:hover td          {background : #FFD090;}
table.data tr.colOrange:hover td.ordered  {background : #FFC070;}
table.data tr.colOrange:hover td.checkbox {background : #FFE5C0; cursor : default;}

/* Searching styles... */
table.data input                {font-size : 11px;}
table.data select               {font-size : 11px;}
table.data textarea             {font-size : 11px;}



/* Table for pagination */
table.pagesplit_nav             {font-size : 11px;}
table.pagesplit_nav td.num      {border : 1px solid #224488; cursor : pointer; width : 20px; text-align : center;}
table.pagesplit_nav td.selected {border : 1px solid #224488; cursor : default; width : 20px; text-align : center; background : #224488; color : #FFFFFF; font-weight : bold;}
table.pagesplit_nav th          {border : 1px solid #224488; cursor : pointer; text-align : center; padding : 0px 5px;}
table.pagesplit_nav th.inactive {border : 1px solid #888888; cursor : default; color : #888888;}
table.pagesplit_nav a           {color : #000000; text-decoration: none;}
table.pagesplit_nav b.legend    {cursor : pointer; text-decoration: underline;}
table.pagesplit_nav select      {font-size : 11px;}



/* setup_logs uses an alternative for the data table. *//*
table.data_red                  {font-size : 11px; border : 1px solid rgb(255, 100, 100);}
table.data_red a                {color : #000000;}
table.data_red th               {background : rgb(255, 100, 100); padding-left : 4px; padding-right : 4px;}
table.data_red td               {background : rgb(255, 230, 230); padding-left : 4px; padding-right : 4px;}
table.data_red tr.hover td      {background : rgb(255, 210, 210);}

/* Searching styles for the alternative data table... *//*
table.data_red input            {font-size : 11px;}
table.data_red select           {font-size : 11px;}
table.data_red textarea         {font-size : 11px;}



/* For Richard Heyes' AutoComplete library: *//*
.autocomplete                  {font-family: Verdana; font-size: 11px; background-color: white; border: 1px solid black; position: absolute; cursor: default; overflow: auto; overflow-x: hidden;}
.autocomplete_item             {padding: 1px; padding-left: 5px; color: black; width: 100%;}
.autocomplete_item_highlighted {padding: 1px; padding-left: 5px; color: white; background-color: #0A246A;}
*/

/* For sortable lists */
table.sortable_head     {background : #AFC8FA; border-top : 2px solid #AFC8FA; border-bottom : 2px solid #AFC8FA;}
ul.sortable             {list-style-type: none; padding-left : 0px; border : 1px solid #AFC8FA;}
ul.sortable li          {margin : 1px; background : #F0F3FF; padding-left : 0px; padding-right : 0px;}
ul.sortable td.handle   {cursor : move;}
ul.sortable input       {border : 0px;}

/* For option table*/
table.option                           {width : 850px; font-size : 14px; border : 1px solid #AFC8FA;}
table.option td                        {background : #F0F3FF; padding-left : 4px; padding-right : 4px;}
table.option tr:hover td               {background : #C8DCFA; cursor : pointer;}
table.option tr span                   {visibility : hidden;}
table.option tr:hover span             {visibility : visible;}
table.option tr.disabled:hover td      {background : #CACACA; cursor : not-allowed;}
table.option tr.disabled td            {background : #EAEAEA; color : #525252;}
table.option tr.disabled:hover span    {visibility : hidden;}

/* For option grouping*/
optgroup        {font-weight : bold; color : #FFFFFF; background : #224488; text-align : center;}
option          {font-weight : normal; color : #000000; background : #FFFFFF; text-align : left;}

