/* General Defaults */
body {
    text-align:             center;
    background-color:       transparent;
    background-repeat:      no-repeat;
    background-attachment:  fixed;
    background-size:        cover;
    height:                 100vh;
}
body.baBackground {
    background-image:       url('/images/IC_MyLists.JPG');
    background-color:       #282828;
    overflow:               hidden;
}

#ImageLogo {
    border-width:           0px;
    position:               absolute;
    top:                    22px;
    left:                   29px;
    z-index:                5;
    content:                url(/images/IC_logo.png);
}     
.container {
    width:                  920px;
    margin:                 0px auto;
    text-align:             left !important;
    min-height:             250px;
    left:                   40px;
    z-index:                20;
    position:               relative;
    border:                 none;
}
body.baBackground container {
    overflow:               scroll;
    width:                  100%
}
input[type="checkbox"],
input[type="radio"] { 
    margin-right:           5px; 
}

/* Image Defaults */
#ImageCustomHeader {
    height:                 90px;
    max-height:             90px;
}

/* Button Defaults */
.imageButtons {
    margin:                 20px;
}
.buttonSelection {   
    height:                 40px;
    width:                  200px;
    color:                  blue; 
    opacity:                .9;
    text-align:             left;
}
.buttonAction {
    height:                 40px;
    width:                  60px;
    font-size:              large;
    margin-left:            40px;
}
.buttonsInside {
    padding-bottom:         40px;
}
.buttonsInsideRight {
    margin-left:            20px;
    align-self:             flex-end;
}
.buttonsInsideSmall {
    margin-left:            80px;
    position:               absolute;
    font-size:              xx-large;
    left:                   120px;
    height:                 20px;
    margin-top:             20px;
    margin-bottom:          50px;
}
.radioButtonsInside {
    margin-left:            10px;
    font-size:              24px;
}
.radioButtonsInside input[type="radio"] { 
    margin-right:           5px; 
}
.button input[type="checkbox"] { 
    float:                  none;
}
.button input[type=checkbox]:checked + label::before {
    content:                "\2714";
    color:                  #fff;
    height:                 1em;
    line-height:            1.1em;
    width:                  1em;
    font-weight:            900;
    margin-right:           6px;
    margin-left:            -20px;
}

/* Text */
.textboxOutside {
    z-index:                4;
    font-family:            Arial;
    font-size:              x-large;
    margin:                 20px;
}
.textBoxOutside {
    font-size:              large;
    height:                 25px;
}
.textboxInside {
    z-index:                4;
    font-family:            Arial;
    font-size:              x-large;
    font-style:             italic;
    margin-bottom:          50px;
    padding-bottom:         50px;
    min-width:              300px;
    min-height:             50px;
}
.textBoxTogether {
    font-size:              large;
    width:                  300px;
    font-family:            Arial;
    height:                 25px;
    margin-top:             10px;
}
.textBoxWatermark {
    vertical-align:         text-top;
    color:                  gray;
    font-style:             italic;
    height:                 25px;
    font-size:              large;
}
.textBoxWatermarkTogether {
    vertical-align:         text-top;
    top:                    0px;
    color:                  gray;
    font-style:             italic;
    height:                 25px;
    font-size:              large;
    margin-top:             10px;
    width:                  300px;
}

/* Labels */
.labelInside {
    border:                 none;
    filter:                 alpha(opacity=90);
    opacity:                .9;
    z-index:                4;
    overflow-y:             hidden;
    overflow-x:             hidden;
    text-align:             center;
    font-family:            Arial;
    font-size:              large;
}
.labelInsideCategory {
    border:                 outset;
    filter:                 alpha(opacity=90);
    opacity:                .9;
    z-index:                4;
    overflow-y:             hidden;
    overflow-x:             hidden;
    text-align:             center;
    font-family:            Arial;
    font-size:              large;
    font-weight:            bold;
    color:                  white;
    background-color:       dimgray;
    margin-bottom:          20px;
}

/* Panel Defaults */
.panelWholePage {
    margin:                 0px 0px;
    padding:                0px;
    height:                 100vh;
    text-align:             center;
    background-image:       url('../images/IC_MyLists.JPG');
    background-repeat:      no-repeat;
    background-color:       #282828;
    background-position:    center; 
    background-attachment:  fixed;
}
.panelWholePageLeftAlign {
    margin:                 0px 0px; 
    padding:                0px;
    left:                   0px;
    height:                 100%;
    text-align:             left;
    background-position:    left; 
    position:               absolute
}
.panelBottomOutside {
    position:               absolute;
    top:                    200px;
    bottom:                 0px;
    -webkit-box-shadow:     2px 2px 2px 2px #191919;
    box-shadow:             2px 2px 2px 2px #191919;
    filter:                 alpha(opacity=90);
    opacity:                .9;
    color:                  Black;
    border-color:           black;
    border-width:           1px;
    padding:                9px;
    border-style:           Solid;
}
.panelBottomInside {
    position:               absolute;
    border:                 none;
    filter:                 alpha(opacity=90);
    opacity:                .9;
    z-index:                4;
    top:                    100px;
    width:                  840px;
    overflow-y:             hidden;
    overflow-x:             hidden;
    margin:                 20px 50px; 
    padding-top:            40px;
    text-align:             center;
    font-family:            Arial;
    font-size:              large;
}
.paneBottomInside {
    bottom:                 20px;
    border:                 none;
    filter:                 alpha(opacity=90);
    opacity:                .9;
    z-index:                4;
    left:                   20px;
    top:                    0px;
    height:                 100%;
    width:                  720px;
    overflow-y:             hidden;
    overflow-x:             hidden;
}

/* Pane Defaults */
#PaneTopOutside {
    -webkit-border-radius:  10px 10px 0 0;
    border-radius:          10px 10px 0 0;
    -webkit-box-shadow:     2px 2px 2px 2px #191919;
    box-shadow:             2px 2px 2px 2px #191919;
    background-color:       White;
    filter:                 alpha(opacity=95);
    opacity:                .95;
}
#PaneBottomOutside {
    -webkit-border-radius:  0 0 20px 20px;
    border-radius:          0 0 20px 20px;
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background:             url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc2JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background:             -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 71%, rgba(255,255,255,1) 76%, rgba(255,255,255,1) 99%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background:             -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(71%,rgba(255,255,255,1)), color-stop(76%,rgba(255,255,255,1)), color-stop(99%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background:             -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 71%,rgba(255,255,255,1) 76%,rgba(255,255,255,1) 99%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background:             -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 71%,rgba(255,255,255,1) 76%,rgba(255,255,255,1) 99%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background:             -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 71%,rgba(255,255,255,1) 76%,rgba(255,255,255,1) 99%,rgba(255,255,255,0) 100%); /* IE10+ */
    background:             linear-gradient(to bottom,  rgba(255,255,255) 0%,rgba(255,255,255) 71%,rgba(255,255,255) 76%,rgba(255,255,255) 99%,rgba(255,255,255) 100%); /* W3C */
    filter:                 progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-8 */
}

/* Top Bar Defaults */
.topBar {
    height:                 50px;
    background-color:       black;
    opacity:                1;
    filter:                 alpha(opacity=100);
    text-align:             left;
    font-family:            Arial;
    color:                  White;
}
.topBar span,
.topBar a {
    display:                -webkit-inline-box;
    display:                inline-block;
    margin:                 5px 10px 0px;
    text-align:             left;
    font-family:            Arial;
    color:                  white;
    padding-left:           10px;
    background-color:       black;
    opacity:                1;
    filter:                 alpha(opacity=100);
}
.topBarText {
    text-align:             left;
    padding-left:           10px;
    font-family:            Arial;
    color:                  White;
    background-color:       black;
    opacity:                1;
    filter:                 alpha(opacity=100);
    z-index:                5;
}
.topBar a {
    color:                  White !important;
}

/* Stuff from some other source clearly pasted in */
html{
    color:                  #000;
    background:             #FFF;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{
    margin:                 0;
    padding:                0;
}
table{
    border-collapse:        collapse;
    border-spacing:         0;
}
fieldset,img{
    border:                 0;
}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{
    font-style:             inherit;
    font-weight:            inherit;
}
del,ins{
    text-decoration:        none;
}
li{
    list-style:             none;
}
caption,th{
    text-align:             left;
}
h1,h2,h3,h4,h5,h6{
    font-size:              100%;
    font-weight:            normal;
}
q:before,q:after{
    content:                '';
}
abbr,acronym{
    border:                 0;
    font-variant:           normal;
}
sup,sub{
    vertical-align:         baseline;
}
legend{
    color:                  #000;
}
input,button,textarea,select,optgroup,option{
    font-family:            inherit;
    font-size:              inherit;
    font-style:             inherit;
    font-weight:            inherit;
}
input,button,textarea,select{
    *font-size:             100%;
}

/* -------------- THE button -------------- */
.button {
/* text */
    text-decoration: 		none;
    font: 					24px/1em 'Droid Sans', sans-serif;
    font-weight: 			bold;
    text-shadow: 			rgba(255,255,255,.5) 0 1px 0;
    /* -webkit-user-select: 	none; */
    /* -moz-user-select: 		none; */
    /* user-select: 			none; */	
/* layout */
    padding: 				.5em .6em .4em .6em;
    margin: 				.5em;
    display: 				inline-block;
    position: 				relative;
    -webkit-border-radius: 	8px;
    -moz-border-radius: 	8px;
    border-radius: 	        8px;	
/* effects */
    border-top: 		    1px solid rgba(255,255,255,0.8);
    border-bottom: 		    1px solid rgba(0,0,0,0.1);
    background-image: 	    -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(https://lh4.googleusercontent.com/-Qs9-Ohgo6sk/UY11O1WoMQI/AAAAAAAACME/nUID7awcMow/s50-no/noise.png);
    background-image: 	    -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(https://lh4.googleusercontent.com/-Qs9-Ohgo6sk/UY11O1WoMQI/AAAAAAAACME/nUID7awcMow/s50-no/noise.png);
    background-image: 	    gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(https://lh4.googleusercontent.com/-Qs9-Ohgo6sk/UY11O1WoMQI/AAAAAAAACME/nUID7awcMow/s50-no/noise.png);
    -webkit-transition:     background .2s ease-in-out;
    -moz-transition: 	    background .2s ease-in-out;
    transition: 		    background .2s ease-in-out;
/* color */
    color: 				    hsl(0, 0%, 40%) !important;
    background-color: 	    hsl(0, 0%, 75%);
    -webkit-box-shadow:     inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
                            hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
						    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    -moz-box-shadow: 	    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
						    hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
						    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    box-shadow:		 	    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
						    hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
						    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}

/* -------------- button (tag) -------------- */
button.button {
    border-left:            none;
    border-right:           none;
}
button.button:hover {
    cursor:                 pointer;
}

/* -------------- icon -------------- */
.button:before {
    font:                   1.2em/0 'Pictos', sans-serif;
    content:                attr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */
    margin-right:           0.4em;
}
/* icon only */
.icon {
    font-weight:            normal;
    font-style:             normal;
    text-indent:            -999em;
}
.icon:before { 
    margin-right: 	        0;
    display: 		        block;
    height: 		        0;
    text-indent: 	        0px;	
}

/* -------------- colours -------------- */
/* -------------- Orange -------------- */
.button.orange {
    color: 				    hsl(39, 100%, 30%) !important;
    background-color: 	    hsl(39, 100%, 50%);
    -webkit-box-shadow:     inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
                            hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
                            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    -moz-box-shadow: 	    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    box-shadow:		 	    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}
.button.orange:hover {
    background-color:       hsl(39, 100%, 65%);
}
/* -------------- Blue -------------- */
.button.blue {
    color: 				    hsl(208, 50%, 40%) !important;
    background-color: 	    hsl(208, 100%, 75%);
    -webkit-box-shadow:     inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
    -moz-box-shadow: 	    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
	box-shadow: 		    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
}
.button.blue:hover {
    background-color:       hsl(208, 100%, 83%);
}
/* -------------- Green -------------- */
.button.green {
    color: 				    hsl(88, 70%, 30%) !important;
    background-color: 	    hsl(88, 70%, 60%);
    -webkit-box-shadow:     inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    -moz-box-shadow: 	    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    box-shadow:		 	    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}
.button.green:hover {
    background-color:       hsl(88, 70%, 75%);
}
/* -------------- Pink -------------- */
.button.pink {
    color: 				    hsl(340, 100%, 30%) !important;
    background-color: 	    hsl(340, 100%, 75%);
    -webkit-box-shadow:     inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    -moz-box-shadow: 	    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    box-shadow: 		    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}
.button.pink:hover {
    background-color:       hsl(340, 100%, 83%);
}
/* -------------- Transparent -------------- */
.button.transparent {
    color: 	                rgba(0,0,0,0.5) !important;
}
.button.transparent, .button.transparent:hover, .button.transparent:active {
    background-color:       transparent;
    background-image:       none;
}
.button.transparent:hover {
    opacity:                .9;
}

/* -------------- States -------------- */
.button:hover {
    background-color:       hsl(0, 0%, 83%);
}
.button:active {
    background-image: 	    -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
    background-image: 	    -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
    background-image: 	    gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
    -webkit-box-shadow:     inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ 
							rgba(0,0,0,0.4) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
    -moz-box-shadow: 	    inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ 
							rgba(0,0,0,0.4) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
    box-shadow: 		    inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ 
							rgba(0,0,0,0.4) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
    -webkit-transform: 	    translateY(.2em);
    -moz-transform: 	    translateY(.2em);
    transform: 			    translateY(.2em);
}
.button:focus {
    outline:                none;
    color:                  rgba(254,255,255,0.9) !important;
    text-shadow:            rgba(0,0,0,0.2) 0 1px 2px;
}
.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover {
    opacity: 			    .5;
    cursor: 			    default;
    color: 				    rgba(0,0,0,0.2) !important;
	text-shadow: 		    none !important;
	background-color: 	    rgba(0,0,0,0.05);
	background-image: 	    none;
	border-top: 		    none;
    -webkit-box-shadow:     inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ 
							rgba(0,0,0,0.3) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
    -moz-box-shadow: 	    inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ 
							rgba(0,0,0,0.3) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
    box-shadow: 		    inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ 
							rgba(0,0,0,0.3) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
    -webkit-transform: 	    translateY(5px);
    -moz-transform: 	    translateY(5px);
    transform: 			    translateY(5px);
}

/* -------------- Fonts -------------- */
.serif { 
    font-family:            'Lobster', serif;
    font-weight: 			normal;
}

/* -------------- Sizes -------------- */
.xs {
    font-size:              16px;
}
.xl {
    font-size:              32px;
}

/* -------------- Materials -------------- */
.button.glossy:after, .button.glass:after {
    content: 	            "";
    position: 	            absolute; 
    width: 		            90%;
    height: 	            60%;
    top: 		            0;
    left: 		            5%;    
    -webkit-border-radius: 	.5em .5em 1em 1em / .5em .5em 2em 2em;    
    -moz-border-radius: 	.5em .5em 1em 1em / .5em .5em 2em 2em;
    border-radius: 			.5em .5em 1em 1em / .5em .5em 2em 2em;
    background-image: 		-webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
    						color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );	
    background-image: 		-moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) );	
    background-image: 		gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
    						color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );	
}
.button.glossy:active:after,
.button.glass:active:after,
.button.disabled:after,
.button[disabled]:after{
    opacity:                .6;
}
.button.icon.glossy:after,
.button.icon.glass:after {
    height:                 75%;
}

/* -------------- Glass + Transparent -------------- */
.button.glass {
    text-shadow:            rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 .18em .15em;
}
.button.glass:active {
	text-shadow:            rgba(255,255,255,.3) 0 1px 0, rgba(0,0,0,0.15) 0 .18em .15em;
}

/* -------------- Shapes -------------- */
/* round */
.round, .round.glossy:after, .round.glass:after { 
    border-top:             none; 
    -webkit-border-radius: 	1em; 
    -moz-border-radius: 	1em; 
    border-radius: 			1em; 
}
/* oval */
.oval {
    border-top: 			none; 
    padding-left: 			.8em;
    padding-right: 			.8em;
    -webkit-border-radius: 	5em / 2em; 
    -moz-border-radius: 	5em / 2em; 
    border-radius: 			5em / 2em; 
}
.oval.glossy:after, .oval.glass:after { 	
    top: 					5%;
    webkit-border-radius: 	5em / 2em 2em 1em 1em; 
    -moz-border-radius: 	5em / 2em 2em 1em 1em; 
    border-radius: 			5em / 2em 2em 1em 1em; 
}
.oval.icon {
    padding-left: 			.8em;
    padding-right: 			.8em;	
    -webkit-border-radius: 	1.5em / 1em; 
    -moz-border-radius: 	1.5em / 1em; 
    border-radius: 			1.5em / 1em; 
}
.oval.icon.glossy:after, .oval.icon.glass:after {	
    -webkit-border-radius: 	1.5em / 1em; 
    -moz-border-radius: 	1.5em / 1em; 
    border-radius: 			1.5em / 1em; 
}   
/* brackets */
.brackets, .brackets.glossy:after, .brackets.glass:after { 
    border-top: 			none; 
    -webkit-border-radius: 	.5em / 1em;
    -moz-border-radius: 	.5em / 1em;
    border-radius: 			.5em / 1em;
}
/* skew */
.skew { 
    border-top: 			none; 
    padding-right: 			1.2em;
    padding-left: 			0.8em;	
    -webkit-border-radius: 	5em 1em / 5em 1em;  
    -moz-border-radius: 	5em 1em / 5em 1em;  
    border-radius: 			5em 1em / 5em 1em;  
}
.skew.glossy:after, .skew.glass:after { 	
    left: 10%;
    -webkit-border-radius: 	7em 1em / 5em 1em;
    -moz-border-radius: 	7em 1em / 5em 1em;
    border-radius: 			7em 1em / 5em 1em;
}
.skew.icon { 	
    padding-right: 			.9em;
    padding-left: 			.8em;
}

/* back */
.back, .back.glossy:after, .back.glass:after { 
    border-top-color: 		rgba(255,255,255,0.5);
    -webkit-border-radius: 	1.6em 1.6em 1em 1em / 4em 4em 1em 1em; 
    -moz-border-radius: 	1.6em 1.6em 1em 1em / 4em 4em 1em 1em; 
    border-radius: 			1.6em 1.6em 1em 1em / 4em 4em 1em 1em; 
}
.back.glossy:after, .back.glass:after { 
    left: 	                6%;
    width:	                88%;
}

/* knife */
.knife { 						
    padding-left:           1.5em;
    -webkit-border-radius: 	.2em .5em .5em 8em / .2em .5em .5em 5em; 
    -moz-border-radius: 	.2em .5em .5em 8em / .2em .5em .5em 5em; 
    border-radius: 			.2em .5em .5em 8em / .2em .5em .5em 5em; 
}
.knife.glossy:after, .knife.glass:after {
    left: 					3%;
    width: 					97%; 		
    -webkit-border-radius: 	.1em .5em .5em 8em / .1em .5em .5em 2em;   
    -moz-border-radius: 	.1em .5em .5em 8em / .1em .5em .5em 2em;   
    border-radius: 			.1em .5em .5em 8em / .1em .5em .5em 2em;   
}
.knife.glossy.icon:after, .knife.glass.icon:after { 
    left: 					5%; 
    width: 					95%;
    -webkit-border-radius: 	.5em .5em 1em 6em / .5em .5em 1em 4em; 
    -moz-border-radius: 	.5em .5em 1em 6em / .5em .5em 1em 4em; 
    border-radius: 			.5em .5em 1em 6em / .5em .5em 1em 4em; 
}

/* shield */
.shield, .shield.glossy:after, .shield.glass:after { 
    -webkit-border-radius: 	.4em .4em 2em 2em / .4em .4em 3em 3em; 
    -moz-border-radius: 	.4em .4em 2em 2em / .4em .4em 3em 3em;
    border-radius: 			.4em .4em 2em 2em / .4em .4em 3em 3em;
}
.shield { 							
    padding-left: 	        .8em;
    padding-right: 	        .8em;
}
.shield.icon { 						
    padding-left: 	        .6em; 
    padding-right: 	        .6em;
}

/* drop */
.drop {
    border-top:             none;
    -webkit-border-radius: 	2em 5em  2em .6em / 2em 4em 2em .6em; 
    -moz-border-radius: 	2em 5em  2em .6em / 2em 4em 2em .6em; 
    border-radius: 			2em 5em  2em .6em / 2em 4em 2em .6em; 
}
.drop.glossy:after, .drop.glass:after { 
    left:                   4%;
    -webkit-border-radius: 	2em 6em  2em 1em / 2em 4em 2em 2em; 
    -moz-border-radius: 	2em 6em  2em 1em / 2em 4em 2em 2em;
    border-radius: 			2em 6em  2em 1em / 2em 4em 2em 2em;
}
.drop.icon { 	
    padding-right:          .6em; 
}

.morph {
    border-top:             none;
    -webkit-border-radius: 	5em / 2em;
    -moz-border-radius: 	5em / 2em;
    border-radius: 			5em / 2em;
    -webkit-transition: 	-webkit-border-radius .3s ease-in-out;
    -moz-transition: 		-moz-border-radius .3s ease-in-out;
    transition: 			-moz-border-radius .3s ease-in-out;
}
.morph:hover { 
    -webkit-border-radius: 	.4em .4em 2em 2em / .4em .4em 3em 3em;
    -moz-border-radius: 	.4em .4em 2em 2em / .4em .4em 3em 3em;
    border-radius: 			.4em .4em 2em 2em / .4em .4em 3em 3em;
}
.morph:active { 
    -webkit-border-radius: 	.3em;
    -moz-border-radius: 	.3em;
    border-radius: 			.3em;
}
.morph:after { 
    display:                none;
}
@-moz-document url-prefix() {
	.button {
        text-align:         center;
    }
	.icon {
        padding:            .5em 1em;
    }
	.icon:before {
        margin-left:        -.42em;
        float:              left;
    }
	.drop.icon {
        padding-right:      1.1em; 
	}
	.shield.icon {
        padding-left:       1.1em;
        padding-right:      1.1em; 
	}
	.skew.icon {
        padding-right:      1.4em;
        padding-left:       1.3em; 
	}
	.oval.icon {
        padding-left:       1.3em;
        padding-right:      1.3em;
	}
	.knife {
        padding-left:       2em;
	}
}

/* New Defaults */
.uneditable {
    /* background-color:       #CBD1FA; */
    background-color:       transparent;
    border-width:           2px;
    border-color:           transparent;
    font-weight:            bold;
}
.editable {
    background-color:       #bbfad1;
}
div#headerInformation,
div#contactInformation,
div#messageInformation {
    text-align:             left;
    font-family:            Arial;
    font-size:              10pt;
}
div#messageInformation {
    margin-top:             10px;
}
.labelInstructions {
    font-style:             italic;
    width:                  580px;
    padding:                10px 0px;
    display:                -webkit-inline-box;
    display:                inline-block;
    z-index:                2;
}
.cbMorningOptOut {
    display:                -webkit-inline-box;
    display:                inline-block;
    display:                block;
    text-align:             center;
    margin-top:             10px;
}
input#cbMorningOptOut {
    margin-right:          5px;
}
.paddingTop_Name {
    padding-top:            20px;
    font-weight:            bold;
}
div#phoneSection1,
div#phoneSection2 {
    padding:                10px;
}
.phoneRow,
.emailRow {
    padding:                1px 0px;
}
.phoneLabel,
.emailLabel {
    width:                  170px;
    display:                -webkit-inline-box;
    display:                inline-block;
}
span.phoneLabel {
    border-width:           2px;
    border-color:           transparent;
}
.phoneTextbox {
    margin-left:            10px;
    width:                  120px;
    z-index:                1;
}
.phoneVoiceCB,
.phoneTextCB,
.phoneEmergencyCB {
    margin-left:            10px;
    height:                 20px;
    display:                -webkit-inline-box;
    display:                inline-block;
    z-index:                4;
}
.emailLabel {
    vertical-align:         top;
}
.emailTextbox {
    margin-left:            10px;
    width:                  380px;
    z-index:                20;
}
div.editableRegionHeaders {
    font-style:             italic;
    z-index:                20;
}
div.editableRegionHeaders span {
    width:                  190px;
    display:                -webkit-inline-box;
    display:                inline-block;
}
.errorMsg {
    display:                -webkit-inline-box;
    display:                inline-block;
    display:                block;
    text-align:             center;
    font-size:              1.5em;
    font-style:             italic;
    color:                  red;
}
div#editButtonsDiv input[type=submit] {
    height:                 26px;
    z-index:                21;
}
div#editButtonsDiv > div.centerButtons {
    margin-top:             10px;
}
.centerButtons {
    text-align:             center;
}
.centerButtons .radioButton {
    padding:                10px;
}
.button100 {
    width:                  100px;
}
.button200 {
    width:                  200px;
}
.noBorder {
    background-color:       transparent;
    border-width:           2px;
    border-color:           transparent;
}
.prevMsg_iFrame {
    width:                  600px;
    height:                 720px;
    overflow:               hidden;
    position:               relative;
    left:                   -21px;
    top:                    -127px;
    border:                 none;
}

/* 
    EVERYTHING BELOW HERE ARE OVERRIDES TO NORMAL SETTINGS. IF ITS A NORMAL SETTING IT GOES ABOVE HERE
    SINCE CSS FLOWS DOWN YOU PUT THE DEFAULTS HIGHER AND THE DIFFERENCES LOWER SO THEY TAKE OVER. THE MOST IMPORTANT GO AT THE BOTTOM SO THEY ALWAYS OVERRIDE
*/

/* White Labels */
/* SchoolInfoApp users will have a body with a class of SchoolInfoApp */
body.SchoolInfoApp {
    background-image:       url('/images/SIA_Logo.png');
    background-color:       white;
    background-size:        100%;
    min-height:             calc(100vh);
}
body.SchoolInfoApp #ImageLogo {
    content:                url(/images/Share!-sialogo3.png);
}
body.SchoolInfoApp #PaneBottomOutside {
    opacity:                .95;
}

/* ScholarChip users will have a body with a class of ScholarChip */
body.ScholarChip #ImageLogo {
    content:                url(/images/ScholarChipTargetLogo162x79.jpg);
}
body.ScholarChip #PaneTopOutside {
    border-color:           #006699;
}
body.ScholarChip #PaneBottomOutside {
    border-color:           #006699;
}

/* eSchoolView users will have a body with a class of InstantConnect */
body.InstantConnect #ImageLogo {
    content:                url(/images/ScholarChipTargetLogo162x79.jpg);
}
body.InstantConnect #PaneTopOutside {
    border-color:           #0359BE;
}
body.InstantConnect #PaneBottomOutside {
    border-color:           #0359BE;
}

/* Alterations if body.noBackground */
body.noBackground {
    background-color:       transparent;
    background-image:       none;
}
body.noBackground .panelWholePage {
    margin:                 0px 20px;
    width:                  600px;
    text-align:             left;
    background-image:       none;
    background-color:       white;
}
body.noBackground .container {
    height:                 100%;
    width:                  auto;
    position:               inherit;
}
body.noBackground .paneBottomInside {
    width:                  auto;
}

/* Alterations if body.PowerSchool */
body.noBackground .prevMsg_iFrame {
    height:                 650px;
    color:                  white;
    border-color:           transparent;
    top:                    auto;
}