/*
 * ColorStyleStore.css
 * Business Intelligence Systems Inc. (c) 2003 - 2017
 * author R.D. Franke
 * version 1.0
 * since JDK 1.5
 * Last Edit:   - 01/07/14 - Created from Adjyle css
 *              - 10/01/14 - Revised color pallet
 *              - 01/12/14 - Add buttonbar
 *              - 02/05/16 - Add fieldset and legend
 *                           Set tab color to FA logo purple
 *                           Round tab gray box edges
 *              - 08/11/16 - Change buttonpurchase background to #228124
 *              - 10/11/17 - Add ul.enlarge for shopping page image enlargement
 * 
 * Open Issues: - 
 * Future:      -
*/



/* RA logo orange yellow FF8300 but FFCC00 looks closer on screen
 * RA Logo Purple: 81227F
 * RA Logo Orange: FF8300
 * US Currency: 228124
 *
 * banner=yellow/orange: FFCC00, backgrousnd=White, trailer=FFCC00  save: FFA13D
 * Purple: 9F227F
 * Medium Purple: 9300F5
 * Lite Purple: EACCFF
 * Light Tan: C9DB70
 * Lighter Tan: CFCFCD
 * Light Green: 6BD600
 * Olive: A7B234
 */

#frame { xbackground-color: white; xborder-color: white; }
#frame th { xbackground-color: #BCC57C; }
#frame table.list { xbackground-color: white; }
#frame table.data { xbackground-color: white; }
#frame table.form { xbackground-color: #C9DB70; }
#frame .button, #frame .buttonspecial, #frame .buttonsubmit, #frame .buttondelete { xbackground-color: xxx; }

/*#headerdiv table.header, #trailerdiv table.trailer, td.headericon { background-color: #FFCC00; border-top: 1px solid DarkSlateBlue; border-bottom: 1px solid DarkSlateBlue;}*/
#headerdiv table.header, #trailerdiv table.trailer, td.headericon { background-color: white; xborder-top: 1px solid DarkSlateBlue; xborder-bottom: 1px solid DarkSlateBlue;}
#headerdiv td.headertitle { color: white; font-weight: bold; font-size: 16px; }

#headerdiv td.headertitle { color: white; font-weight: bold; font-size: 16px; }

/*
#headerdiv table.header, #trailerdiv table.trailer { background-color: #BCC57C; border-top: 1px solid DarkSlateBlue; border-bottom: 1px solid DarkSlateBlue;}
#headerdiv table.header, #trailerdiv table.trailer { xbackground-color: #CFCFCD; border-top: 1px solid DarkSlateBlue; border-bottom: 1px solid DarkSlateBlue;}
#headerdiv table.header, #trailerdiv table.trailer { background-color: whitesmoke; border-top: 1px solid DarkSlateBlue; border-bottom: 1px solid DarkSlateBlue;}
#headerdiv .banner { background-color: DarkSlateBlue; color: White; }
*/

#headerdiv .banner { background-color: #81227F; color: White; }
#headerdiv A:link, #headerdiv A:visited, #trailerdiv A:link, #trailerdiv A:visited { color: #81227F; }
#headerdiv A:hover, #trailerdiv A:hover { color: grey; }

/*
div#myinformation .tabon { xbackground-color: #3D808A; color: white;  }
div#myinformation .tabon { background-color: #648AF9; color: white;  } 
*/
div#myinformation { xbackground-color:  #EACCFF;  } 
div#myinformation .tabon { background-color:  #6BD600; color: white;  } 
div#myinformation a:hover { color:  #6BD600;  } 

div#myinformation .taboff { color: #81227F;  } 

#buildtabs a {
   xcolor: #81227F;
   xfont-weight: bold;
   padding: 0px 10px;
   xborder: 1px solid gray;
   border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
}

#buildtabs { border: none; margin: 0 auto; }

/* calendar
div#calendar .tabon { background-color: DarkSlateBlue; color: white;}
div#calendar .taboff { background-color: white; color: black;}
div#calendar .daydaytitle { background-color: DarkSlateBlue; }
div#calendar .weekdaytitle { background-color: DarkSlateBlue; }
div#calendar .weektodaybackground { background-color: #CFCFCD; }
div#calendar .monthdaytitle { background-color: DarkSlateBlue; }
div#calendar .monthtodaybackground { background-color: #CFCFCD; }
*/
div#calendar .tabon { background-color: #6BD600; color: white;}
div#calendar .taboff { background-color: white; color: black;}
div#calendar .daydaytitle { background-color: #9300F5; }
div#calendar .weekdaytitle { background-color: #9300F5; } /**/
div#calendar .weektodaybackground { background-color: #EACCFF; } /*E7FFAD*/
div#calendar .monthdaytitle { background-color: #9300F5; }
div#calendar .monthtodaybackground { background-color: #EACCFF; }
 

/* Mimics calendar */
div#calendarreport .reporttitle { background-color: #FFCC00; color: white; border-top: 1px solid DarkSlateBlue; border-bottom: 1px solid DarkSlateBlue;}
div#calendarreport .daydaytitle { background-color: #9300F5; color: white; }
div#calendarreport .weekdaytitle { background-color: #9300F5; color: white; }
div#calendarreport .weektodaybackground { background-color: #EACCFF; color: black; }
div#calendarreport .monthdaytitle { background-color: #9300F5; color: white; }
div#calendarreport .monthtodaybackground { background-color: #EACCFF; color: white; }

/* sitemap */
div#sitemap div.servicetitle { color: black; background-color: #CFCFCD; }
div#sitemap td.sitelinks { background-color: white; }

/* article manager */
div#articlemanager .articlebackground { background-color: #C9DB70; color: White; }
div#articlemanager .articlebackgroundborder { background-color: #C9DB70; color: White; border: 1px solid #C9DB70; }

.subcattabs .tabon { background-color: DarkSlateBlue; color: white; }
.subcattabs .taboff { background-color: white; color: black; }

div#buildtabs .tabon { xbackground-color: #3D808A; xcolor: White; }

/* table,td,tr,th { border: 1px solid blue;  xborder-collapse: separate; } /* use for debug */

.button, .buttonspecial, .buttonsubmit, .buttoncancel, .buttondelete, .buttonpurchase {
    padding: 3px 4px 3px 4px;
    display: inline;
    border: none;
    text-shadow: none;
    cursor: pointer;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.button, .buttonspecial, .buttonsubmit {
    background-color: plum; 
    color: white;
}

.buttoncancel {
    background-color: palegoldenrod; 
    color: white;
}

.buttondelete {
    background-color: indianred; 
    color: white;
}

.buttonpurchase {
    /*background-color: greenyellow; */
    background-color: #228124;
    color: white;
}

.buttonbar {
    width: 1%;
    height: 98%;
    background-color: plum;
    border: none;
    text-shadow: none;
    cursor: pointer;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;   
}

.tableRounded {
   border: 1px solid lightgray;
   background-color: transparent;
   width: 99%;
   font-family: arial, helvetica, sans-serif;
   -moz-border-radius: 1.0em;
   -webkit-border-radius: 1.0em;
   -khtml-border-radius: 1.0em;
   border-radius: 1.0em;
   padding: 4px; 
   margin: 0 auto;
   background-color: #ffffff ;
   text-align: left;
}

.cellRounded {
   -moz-border-radius: 1.0em;
   -webkit-border-radius: 1.0em;
   -khtml-border-radius: 1.0em;
   border-radius: 1.0em;
}

.ra_purple {color: #81227F;}
.ra_orange {color: #FFCC00;}
.ra_green {color: #228124;}

/* RA logo Purple */
fieldset { 
   border: 2px solid #81227F;
   background: #F5F3EE;
   margin: 10px 10px 10px 10px;
   padding: 15px;
   border-radius: 8px;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
}

/* #228124 is the color of a US currency */
.fieldsetgreen { 
   border: 2px solid #228124;
}

/* RA logo orange yellow FF8300 but FFCC00 looks closer on screen */
.fieldsetorange { 
   border: 2px solid #FFCC00;
}

legend { 
   color: #81227F;
   font-size: 16px; 
   font-weight: bold;
   padding-left: 10px;
   padding-right: 10px;
}

.legendgreen { 
   color: #228124;
}

/* RA logo orange yellow FF8300 but FFCC00 looks closer on screen */
.legendorange { 
   color: #FFCC00;
}

/*This enlarge approach is used on the shopping page */

/* CSS Image examples: https://www.w3schools.com/css/css3_images.asp */
/*Found this at: http://cssdemos.tupence.co.uk/image-popup.htm */
ul.enlarge{
   list-style-type:none; /*remove the bullet point*/
}
ul.enlarge li{
   display:inline-block; /*places the images in a line*/
   position: relative; /*allows precise positioning of the popup image when used with position:absolute - see support section */
   z-index: 0; /*resets the stack order of the list items - we'll increase in step 4. See support section for more info*/
   margin:10px 40px 0 20px; /*space between the images*/
}
ul.enlarge span{
   position:absolute; /*see support section for more info on positioning*/
   left: -9999px; /*moves the span off the page, effectively hidding it from view*/
}
ul.enlarge img{
   /*give the thumbnails a frame*/
   background-color:#eae9d4; /*frame colour*/
   padding: 6px; /*frame size*/
   /*add a drop shadow to the frame*/
   -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
   -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
   box-shadow: 0 0 6px rgba(132, 132, 132, .75);
   /*and give the corners a small curve*/
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
}
ul.enlarge li:hover{
   z-index: 50; /*places the popups infront of the thumbnails, which we gave a z-index of 0 in step 1*/
   cursor:pointer; /*changes the cursor to a hand*/
}
/***We bring the large image back onto the page by reducing left from -9999px (set in step 2) to figures below***/
ul.enlarge li:hover span{ /*positions the <span> when the <li> (which contains the thumbnail) is hovered*/
   top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
   left: -450px; /*distance from the left of the thumbnail to the left of the popup image*/
}
/***To make it look neater we used :nth-child to set a different left distance for each image***/
ul.enlarge li:hover:nth-child(2) span{
   left: -100px;
}
ul.enlarge li:hover:nth-child(3) span{
   left: -200px;
}

/***Override the styling of images set in step 3 to make the frame smaller and the background darker***/
ul.enlarge span img{
   padding: 2px; /*size of the frame*/
   background: #ccc; /*colour of the frame*/
}

/***Style the <span> containing the framed images and the caption***/
ul.enlarge span{
   /**Style the frame**/
   padding: 10px; /*size of the frame*/
   background:#eae9d4; /*colour of the frame*/
   /*add a drop shadow to the frame*/
   -webkit-box-shadow: 0 0 20px rgba(0,0,0, .75);
   -moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
   box-shadow: 0 0 20px rgba(0,0,0, .75);
   /*give the corners a curve*/
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius:8px;
   /**Style the caption**/
   font-family: 'Arial', sans-serif;
   font-size: 14px;
   font-weight: bold;
   text-align: center;
   color: #495a62;
}