/*===== GENERAL =====*/
html, body { border:0px; margin:0px; padding:0px; }
.hide { display:none; }
div.content {
    background-color:white;
    border:1px black solid;
    padding:20px;
    text-align:left;
    width:600px;
    margin: 0px auto 0px auto;
}
.logged-in-text { color:#eeeeee; font:10pt Verdana; position:absolute; right:10px; top:5px; z-index:6; }
.logged-in-text a { color:white; }

.sleek-button {
    -webkit-appearance: none;
    -webkit-border-horizontal-spacing: 0px;
    -webkit-border-image: none;
    -webkit-border-vertical-spacing: 0px;
    -webkit-box-align: center;
    -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.0470588) 0px 1px 2px 0px;
    -webkit-rtl-ordering: logical;
    -webkit-transition-delay: 0s;
    -webkit-transition-duration: 0s;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    -webkit-user-select: text;
    background-color: whiteSmoke;
    background-image: -webkit-linear-gradient(top, white, #E6E6E6);
    background-position: 0% 0%;
    background-repeat: repeat-x;
    border-bottom-color: rgba(0, 0, 0, 0.247059);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-collapse: separate;
    border-left-color: rgba(0, 0, 0, 0.0980392);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: rgba(0, 0, 0, 0.0980392);
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: rgba(0, 0, 0, 0.0980392);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top-style: solid;
    border-top-width: 1px;
    box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.0470588) 0px 1px 2px 0px;
    box-sizing: border-box;
    color: #333;
    cursor: pointer;
    display: inline-block;
    empty-cells: show;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 28px;
    letter-spacing: normal;
    line-height: 18px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    max-width: none;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    text-align: center;
    text-decoration: none;
    text-indent: 0px;
    text-shadow: rgba(255, 255, 255, 0.74902) 0px 1px 1px;
    text-transform: none;
    vertical-align: middle;
    white-space: pre;
    width: 118px;
    word-spacing: 0px;
}
.sleek-button:hover {
    /* background-image: -webkit-linear-gradient(top, white, #d5d5d5); */
    background-image: -webkit-linear-gradient(top, white, #999999);
    background-color: #cccccc;   /* Only used by IE, since that browser doesn't support the background gradients */
}

      .gradient-blue {
          background-color: #0B7ACA;  /* fallback */
          background-image: -webkit-linear-gradient(top, #0B7ACA, #4FB6EE);
          background-image:    -moz-linear-gradient(top, #0B7ACA, #4FB6EE); 
          background-image:     -ms-linear-gradient(top, #0B7ACA, #4FB6EE); 
          background-image:      -o-linear-gradient(top, #0B7ACA, #4FB6EE); 
          background-image:         linear-gradient(top, #0B7ACA, #4FB6EE);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#0B7ACA', EndColorStr='#4FB6EE');
          border: 1px #4FB6EE solid;
      }

      .gradient-green {
          background-color: #58AC3D;  /* fallback */
          background-image: -webkit-linear-gradient(top, #58AC3D, #A9D648); 
          background-image:    -moz-linear-gradient(top, #58AC3D, #A9D648); 
          background-image:     -ms-linear-gradient(top, #58AC3D, #A9D648); 
          background-image:      -o-linear-gradient(top, #58AC3D, #A9D648); 
          background-image:         linear-gradient(top, #58AC3D, #A9D648);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#58AC3D', EndColorStr='#A9D648');
          border: 1px #B8E066 solid;
      }

      .gradient-orange {
          background-color: #E28209;  /* fallback */
          background-image: -webkit-linear-gradient(top, #E28209, #F8AD36); 
          background-image:    -moz-linear-gradient(top, #E28209, #F8AD36); 
          background-image:     -ms-linear-gradient(top, #E28209, #F8AD36); 
          background-image:      -o-linear-gradient(top, #E28209, #F8AD36); 
          background-image:         linear-gradient(top, #E28209, #F8AD36);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#E28209', EndColorStr='#F8AD36');
          border: 1px #F7BE5B solid;
      }

      .gradient-red {
          background-color: #EF0E0E;  /* fallback */
          background-image: -webkit-linear-gradient(top, #EF0E0E, #F55C4C); 
          background-image:    -moz-linear-gradient(top, #EF0E0E, #F55C4C); 
          background-image:     -ms-linear-gradient(top, #EF0E0E, #F55C4C); 
          background-image:      -o-linear-gradient(top, #EF0E0E, #F55C4C); 
          background-image:         linear-gradient(top, #EF0E0E, #F55C4C);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EF0E0E', EndColorStr='#F55C4C');
          border: 1px #F3786B solid; 
      }





/*===== TOP BANNER BACKGROUND =====*/
.top-left-background {
    background: #77aaee !important;
    border-bottom: 1px black solid !important;
    height: 75px !important;
    left: 0px !important;
    position: absolute !important;
    top: 0px !important;
    width: 50% !important;
    z-index: -1 !important;
}
.top-right-background {
    background: #3355aa;
    border-bottom: 1px black solid;
    height: 75px;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 50%;
    z-index: -1;
}
.jdspad-header {
    background: #77aaee url('/pictures/backgrounds/blue_gradient2.jpg');
    background-position: center center;
    background-repeat: repeat-y;
    position: relative;
    height: 75px;
    margin: 0 auto;
    width: 600px;
}

.top-left-background p { z-index:1; }
.top-right-background p { z-index:1; }


/*===== JDSPAD LOGO =====*/
.jdspad-header a { color: white; text-decoration: none; }
.jdspad-header a:hover { color: yellow; }

.jdspad-header h1 {
    height: 45px;
    font: 36pt Times New Roman;
    font-style: italic;
    margin: -4px 0 0 0;
    padding: 0px;
    position: absolute;
    text-align: center;
    width: 100%;
}
h1.logo1 { color:white; text-decoration:none; }
h1.logo1 { z-index:5; margin-left:-4px; margin-top:-4px; color:white; }
h1.logo2 { z-index:4; margin-left:-3px; margin-top:-3px; color:#0000aa; }
h1.logo3 { z-index:3; margin-left:-2px; margin-top:-2px; color:#0000aa; }
h1.logo4 { z-index:2; margin-left:-1px; margin-top:-1px; color:#0000aa; }
h1.logo5 { z-index:1; margin-left: 0px; margin-top: 0px; color:#cc0000; }


/*===== TOP NAV LINKS =====*/
.top-nav-link-container {
    font: 16pt Times New Roman;
    font-style: italic;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    padding-top: 50px;
    text-align: center;
}
.top-nav-link-container a { color:#f8f8f8; text-decoration: none; }
.top-nav-link-container a:hover { color:yellow; }


/*===== BREAD CRUMBS =====*/
div.bread_crumbs, div.bread-crumbs { background-color:white; color:#444444; font:10pt Verdana; margin:14px auto; padding:2px; width:350px; text-align:center; }
div.bread_crumbs a, div.bread-crumbs a { text-decoration:none; }
div.bread_crumbs a:hover, bread-crumbs a:hover { color:purple; }

/* New pages uses 2 bread-crumb divs with the following classes.  This creates a   */
/* shrink-wrapped (but centered) bread crumbs line                                 */
/*
.bread-crumbs-outer {
    margin-top: 10px;
    position: absolute;
    right: 50%;
}
.bread-crumbs-inner {
    background-color: white;
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;
    font: 10pt Verdana;
    padding: 3px;
    padding-left: 15px;
    padding-right: 15px;
    left: 50%;
    position: relative;
}
.bread-crumbs-inner a {
    text-decoration: none;
}
*/
.bread-crumbs-outer {
    padding: 10px;
    text-align: center;
}
.bread-crumbs-inner {
    background-color: white;
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;
    display: inline-block;   /* Reset to inline below to fix IE6 & IE7. Don't remove this line */
    font: 10pt Verdana;
    padding: 3px;
    padding-left: 15px;
    padding-right: 15px;
}
.bread-crumbs-inner {
    display: inline;  /* Fixes IE6 & IE7. Don't merge with above block! */
}
.bread-crumbs-inner a {
    text-decoration: none;
}




/*===== FOOTER =====*/
div.bottom_nav { background-color:white; color:#888888; margin:14px 0; padding:2px; text-align:center; vertical-align:middle; width:580px;}
div.bottom_nav a { color:blue; font:10pt Verdana; text-decoration:none; vertical-align:middle; }
div.bottom_nav a:hover { color:purple; }




/* New pages uses 2 bread-crumb divs with the following classes.  This creates a   */
/* shrink-wrapped (but centered) bread crumbs line                                 */
.bottom-nav-outer {
    margin-top: 10px;
    position: absolute;
    right: 50%;
}
.bottom-nav-inner {
    background-color: white;
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;
    font: 10pt Verdana;
    padding: 3px;
    padding-left: 15px;
    padding-right: 15px;
    left: 50%;
    position: relative;
}
.bottom-nav-inner a {
    text-decoration: none;
}



/*===== FEATHERED BOXES =====*/

/* Wrap content in divs with feathered classes to give it feathered edges (fade to transparent). */
/* Feathered divs are inline-blocks, so you may want to give the wrapped content a defined       */
/* height and width to prevent it from collapsing to nothing.                                    */
/* See feathered_box() function */

.jdspad-feathered-mask-top {
    display: inline-block;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 15px);  /* Change 15px here or in other mask-image styles to desired size of gradient region */
    mask-image: linear-gradient(to bottom, transparent 0px, black 15px);
}

.jdspad-feathered-mask-right {
    display: inline-block;
    -webkit-mask-image: linear-gradient(to left, transparent 0px, black 15px);
    mask-image: linear-gradient(to left, transparent 0px, black 15px);
}

.jdspad-feathered-mask-left {
    display: inline-block;
    -webkit-mask-image: linear-gradient(to right, transparent 0px, black 15px);
    mask-image: linear-gradient(to right, transparent 0px, black 15px);
}

.jdspad-feathered-mask-bottom {
    display: inline-block;
    -webkit-mask-image: linear-gradient(to top, transparent 0px, black 15px);
    mask-image: linear-gradient(to top, transparent 0px, black 15px);
    padding:1px;   /* Weird border lines appear around feathered content when printing/PDFing unless this exists? */
}