/* FROM //s3.amazonaws.com/static2a.1-pagers.com/fs-mod.css */

@-webkit-keyframes pulse { 0% { color: #BED73D; } 25% { color: #85D051; } 50% { color: #00A300; } 75% { color: #548035; } 100% { color: #83A36D; } }
@keyframes pulse_animation { 0% { transform: scale(1); opacity: 1; } 80% { transform: scale(2); opacity: .2; } 100% { transform: scale(1); opacity: 1; } }
@keyframes spin { 0% { transform: rotateY(0); } 55% { transform: rotateY(0); } 60% { transform: rotateY(90deg); } 65% { transform: rotateY(0); } 70% { transform: rotateY(90deg); } 75% { transform: rotateY(0); } 100% { transform: rotateY(0); } }
@keyframes fadeatend65 {  0%,  10% {  opacity: .30;  }    60% {  opacity: .65;  }    100% {  opacity: 0.65;  } }
@keyframes fadeatend95 {  0%,  10% {  opacity: .30;  }    60% {  opacity: .95;  }    100% {  opacity: 0.95;  } }

/* reset BEGIN, ie7 fix */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	font-family: Calibri, Arial, sans-serif; /* !important; */
	/* font-family: "Open Sans", sans-serif !important;
	Xcolor:#444; */

	/* TEST */
	/* font-family: 'Lato', serif; */
	/* font-family: 'Montserrat', sans-serif; was boss */
    font-family: "Source Sans 3", sans-serif;
	font-weight: normal;
	text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
}

body {
    margin: 0px;
    padding: 0px;
    background-color: white;
    /* font-family: Tahoma, Verdana, Segoe, sans-serif; was boss */

    height: 100% !important;
    margin: 0 !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover;
    /* letter-spacing: -.045em !important; was boss */
    /* until Op is ready */

 /* prevents 'helpful' popups on longpress */

/* .toolbar-button, non issue on real devices */
    -webkit-touch-callout: none !important;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

     background-position: center center !important;
    /* no idea why, but imp needed */

    overflow-x: hidden;
    overflow-y: scroll;

     color: #333;
    /* font-family: Arial;
	line-height:1; */
    /*	background-color:transparent; */

    background-color: #ddd;
    background-color: #fff;
    scrollbar-arrow-color: #CCC;
    /* two arrows */

    scrollbar-track-color: #DDD;
    /* everything else - same as .sg-field for overflows */

    scrollbar-face-color: #CCC;
    /* inside the box */

    scrollbar-shadow-color: #DDD;
    /* box border - same as .sg-field for overflows, makes box smaller */

    scrollbar-3dlight-color: transparent;
    /* appears to be unused in IE10 */

    scrollbar-highlight-color: transparent;
    /* appears to be unused in IE10 */

    scrollbar-darkshadow-color: transparent;
    /* appears to be unused in IE10 */

    background-size: cover;
}
@-moz-document url-prefix() {
    body {
        letter-spacing: normal !important;
        /* until Op is ready */
    }
}

/* worked beautifully */
body,
#home .sg-outer[sg-popuplevel="1"],
#home .sg-outer[sg-popuplevel="2"],
#home .sg-outer[sg-popuplevel="3"],
#home .sg-outer[sg-popuplevel="4"],
#home .sg-outer[sg-popuplevel="5"],
#home .sg-outer[sg-popuplevel="6"],
#home .sg-outer[sg-popuplevel="7"],
#home .sg-outer[sg-popuplevel="8"],
#home .sg-outer[sg-popuplevel="9"],
#home .sg-outer[sg-popuplevel="10"] {
    background-color: #FFF !important;
}

blockquote {
    margin-left: 10% !important;
    margin-right: 10% !important;
    outline: 1px solid #AAA !important;
    font-size: 50% !important;
    padding: 0% 2% !important;
}

.navbar .nav {
    margin-right: 0px;
}

input,
textarea,
keygen,
select,
button,
isindex {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    /* fixes lte ie7 */
    vertical-align: top;
    margin: 0em;
    font: -webkit-small-control;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: start;
}

input,
textarea,
keygen,
select,
button,
isindex,
meter,
progress {
    -webkit-writing-mode: horizontal-tb;
}

p {
    font-sizeX: 18px;
    Xline-height: 1.4;
    /* let 1p decide now */
    margin-bottom: 20px;
    margin-top: 20px;
    Xtext-align: justify;
}

a {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    /* fixes lte ie7 */
    /* vertical-align:top; not these */
    Xcolor: #008000;
    color: #00A300;
    font-style: normal;
    text-decoration: none;
    line-height: 26px;
    transition: all .1s ease;
    -webkit-transition: all .1s ease;
    /* font-size:120%; */
}

.em {
    font-size: 100%;
}

ol,
ul {
    margin-left: 25px;
}
:focus {
    outline: 1px #c0c dotted;
}

/* reset END */
img {
    -ms-interpolation-mode: bicubic;
}
:focus,
*:focus {
    outline: 0px;
}

/* body, h3, h4, h5 { font-size:130%; } */
h1 {
    font-size: 160%;
}
h2 {
    font-size: 145%;
}
a {
    color: darkblue;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
h1,
h3 {
    margin: 4px;
    color: black;
}
h2 {
    margin: 4px;
    color: #aaa;
}
p {
    margin: 0px 0px 8px 0px;
}
ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
ul,
menu,
dir {
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}
img {
    border: 0px;
    text-decoration: none;
}

.no-transition { transition: none !important; }

.navbar-inner > .sg-panel {
    padding: 0px !important;
}
#Menu-Account {
    background-color: #BED73D;
    border-radius: 20px;
}

/* FROM //d3uc9bh03pwwy.cloudfront.net/sg-panels.css */

#footer a,
#footer a:visited,
#footer a:hover {
    color: #6490A8;
}
#title {
    border: 0px;
    text-decoration: none;
}
.col,
.coll {
    float: left;
    min-height: 16px;
    vertical-align: middle;
}
.colr {
    float: right;
}
.wrapper {
    margin: 0 auto;
    padding: 0px;
}
.container {
    /* display:inline-block; */

    display: block;
    /* inline-block put a lip */
    /* zoom: 1; / * ie 7 */

    *display: inline;
    /* ie 7 */

    width: 100%;
    background-color: transparent;
}

.animate {
    transition: all .2s ease-out;
}
#first {
    background: none;
    background-color: #FFF;
    padding: 70px 0px 30px 0px;
    margin-top: 122px;
}
#first > .sg-panel > h1 {
    font-size: 360%;
}
#first .sg-1p-icon,
#first .bookimg {
    width: 50%;
}
#first .sg-1p-content,
#first .bookinfo {
    width: 30%;
    margin: 0px;
}
#last > div {
    padding-bottom: 26px;
    outline: 12px solid #C0C0C0;
    /* bad hack to hide lip */
}

/* just a plain old wide 100% */
.sg-panelw100 {
    width: 100% !important;
    /* bc lots of inline style attrs */

    text-align: center;

    position: absolute;
    top: -7px;
}
.sg-panelw100 > .sg-outer > .sg-head > .sg-label {
    text-align: right;
    /* TESTING */
}

/* collections go wide lower levels too */
.sg-wide100,
.sg-wide100 > .sg-field,
.sg-panelw100 > .sg-originallyoverflows,
.sg-panelw100 > .sg-originallyoverflows > .sg-field.sg-wide100field,
.sg-panelw100 > .sg-originallyoverflows > .sg-field.sg-wide100field > .sg-overflowcontainer,
.sg-panelw100 > .sg-originallyoverflows > .sg-field.sg-wide100field > .sg-overflowcontainer > .sg-wide100,
/* means wanted 100, not necc got it */
.sg-panelw100 > .sg-originallyoverflows > .sg-field.sg-wide100field > .sg-overflowcontainer > .sg-wide100 > .sg-head.sg-wide100head > .sg-label
/* means wanted 100, not necc got it */
{
    width: 100% !important;
}
.sg-panel {
    display: inline-block;
    /* zoom: 1; / * ie 7 */

    *display: inline;
    /* ie 7 */

    padding: 20px 0px;
    overflow: hidden;
}
.sg-panelw {
    display: inline-block;
    /* zoom: 1; / * ie 7 */

    *display: inline;
    /* ie 7 */

    margin: 0px 0px;
    overflow: visible;
    text-align: left;
    background-color: #FFF;
}
.static {
    position: fixed;
}
.sg-panel2 {
    float: left;
    min-width: 150px;
    min-height: 150px;
    margin: 10px;
}
.containerwX {
    display: inline-block;
    /* zoom: 1; / * ie 7 */

    *display: inline;
    /* ie 7 */

    position: relative;
    width: 86%;
    background: none;
    background-color: white;
    min-height: 200px;
    padding: 0px 7%;
    box-shadow: 0px 0px 60px #000;
}
.callout {
    width: 80%;
    padding: 20px 10%;
    position: relative;
    box-shadow: 0px 0px 30px 4px #444;
    background-color: #fff;
}
.callin {
    box-shadow: none;
    background: none;
    background-color: #aaa;
    text-align: center;
    min-height: 15px;
    border-top: 2px solid #888;
    border-bottom: 2px solid #888;
    margin-top: 0px;
    margin-bottom: 0px;
}
#header {
    top: 0px;
    left: 0px;
    z-index: 20;
    background-color: #fff;
    padding-top: 4px;
    opacity: 0.95;
    box-shadow: none;
    box-shadow: 0px 0px 4px 2px #000;
    box-shadow: none;
    border-top: 5px solid black;
    border-bottom: 2px solid black;
}
#header.shrink {
    height: 30px;
    min-height: 30px;
    padding-top: 0px;
    padding-bottom: 0px;
}
#header.shrink > a > img {
    height: 30px;
    margin: 0px;
}
#header.shrink > a > div,
#header.shrink > a > div > a {
    font-size: 75%;
    margin-top: -3px;
}
#nav.shrink {
    top: 36px;
}
#logo {
    height: 126px;
    margin: 4px 10px 4px 4px;
    float: left;
}
#title {
    font-size: 150%;
    float: left;
    margin-top: 38px;
}
#nav {
    top: 152px;
    left: 0px;
    z-index: 20;
    height: auto;
    min-height: 10px;
    /* border-bottom:2px solid #5F5E5E; */

    padding-top: 1px;
    padding-bottom: 60px;
    /* this MUST be changed also in scrolling hash JS */
    /* margin-bottom:-60px; doesnt help above */

    background-color: #424242;
    background-color: transparent;
    opacity: 0.95;
    box-shadow: none;
}
#navmenu > li > a {
    font-size: 150%;
    transition: all .1s ease-out;
}
#menuopen {
    display: inline-block;
    /* zoom: 1; / * ie 7 */

    *display: inline;
    /* ie 7 */

    background: url(/images/menuopen1.png) top left no-repeat;
    width: 30px;
    height: 30px;
    display: none;
    float: right;
    margin-top: 4px;
    margin-right: 6px;
    cursor: pointer;
}
#navmenu {
    display: block;
    box-shadow: 0px -8px 26px 4px #000;
    box-shadow: 0px 0px 36px 4px #000;
    line-height: 0;
    /* fix line-height problem */

    background-color: #eee;
    padding-left: 0px;
    border: 1px solid transparent;
    /* border-top-left-radius:8px;
	border-top-right-radius:8px; */
}
#navmenu > li:first-child > a {
    padding-left: 4px;
}
#navmenu > li {
    display: inline-block;
    /* zoom: 1; / * ie 7 */

    *display: inline;
    /* ie 7 */

    cursor: pointer;
}
#navmenu > li > a {
    line-height: 1.2;
    /* fix line-height problem */

    margin: 0px -6px 0px 0px;
    /* -6px is fix line-height problem */

    padding: 3px 8px;
    text-decoration: none;
    color: #000;
}
#navmenu > li > a.current {
    cursor: default;
}
#navmenu > li > a.current {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 1.0);
    /* border-radius:17px; */
}
#navmenu > li > a:hover {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.7);
    /* border-radius:17px; */
    /* outline:1px solid #000; */
}
#navmenu.mini {
    box-shadow: 0px 4px 4px -2px #000;
    border-radius: 0px !important;
    padding-left: 0px !important;
}
#navmenu.mini > li:first-child > a {
    padding-left: 8px;
}
#navmenu.mini > li {
    text-align: center;
    display: block !important;
}
#navmenu.mini > li > a {
    display: block;
    font-size: 80%;
    margin: 0px;
    padding-top: 2%;
    padding-bottom: 2%;
}
#book2 {
    background: url('/images/back3.png') top center repeat;
}
#book3 {
    background: url('/images/back2.jpg') top center repeat;
}
#book4 {
    background: url('/images/back1a.jpg') center center repeat;
}
#book5 {
    background: url('/images/gray-back2-600.jpg') top center repeat-y;
}
#book4 h2 {
    color: #e4e4e4;
}
#reviews {
    text-align: center;
}
#reviews > h3 {
    margin: 0px;
    padding: 0px;
    font-style: italic;
}
#reviews > ul,
#reviews > ul > li {
    display: inline;
}
#buy {
    height: 120px;
    min-height: 120px;
    text-align: center;
}
#buy > .col {
    float: none;
    clear: both;
}
#buy > div > ul > li,
#social-icons > li {
    display: inline;
    -webkit-padding-start: 0px;
}
#buy img {
    max-width: 20%;
    margin: 10px 5%;
}
#about {}
#shop {
    background-color: #AAAAAA;
    background: url('/images/gray-back2-600.jpg') top center repeat-y;
}
#shop > .col,
#shop > .colr,
#shop > .colr {
    width: 42%;
    margin: 2%;
    padding: 2%;
}
#backtotop {
    height: 50px;
    min-height: 50px;
    padding: 20px 0px 0px 0px;
    font-size: 80%;
    text-align: center;
}
#footer {
    bottom: 0px;
    left: middle;
    z-index: 20;
    height: auto;
    min-height: 1px;
    background-color: #eee;
    opacity: 0.9;
    color: black;
    padding-top: 4px;
    padding-bottom: 4px;
    box-shadow: 2px 12px 20px 2px #000;
    font-size: 80%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
#footer > .col,
#footer > .coll,
#footer > .colr {
    padding-left: 4px;
    padding-right: 4px;
    display: inline;
    vertical-align: bottom;
    height: 20px;
    line-height: 24px;
}
#social-icons {
    padding-top: 0px;
    margin-top: -2px;
}
.sg-1p-icon,
.bookimg {
    width: 20%;
}
.sg-1p-icon > img,
.bookimg > img {
    width: 100%;
    max-width: 600px;
}
.sg-1p-content,
.bookinfo {
    margin: 0px 0px 0px 5%;
    width: 55%;
}
.sg-1p-actions,
.bookbuy {
    width: 16%;
    margin: 0px 2% 0px 2%;
    min-width: 100px;
    height: 120px;
    text-align: left;
}
.sg-1p-actions > ul > li,
.bookbuy > ul > li {
    display: block;
    margin: 4px 8px 20px 4px;
}
#more {}
#morebooks {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    background-color: transparent;
}
.morebook {
    cursor: pointer;
}
.overflowcontainer {
    Xwidth: 9999px;
}
#available {
    margin: 0% 12% 0% 12%;
    width: 46%;
}
#cards {
    margin: 0% 3% 0% 3%;
    width: 24%;
}

/* compliment to min-width below */

/* somewhat big BEGIN */
.sg-panelw {
    width: 86%;
    padding-left: 7%;
    padding-right: 7%;
}
.sg-panel {
    width: 86%;
    margin-left: 7%;
    margin-right: 7%;
}
.sg-panelw.sg-wrap-lb,
.sg-panelw.sg-wrap-lb,
.sg-panelw.sg-wrap-rb,
.sg-panelw.sg-wrap-rb {
    float: left;
}
.sg-panelw.sg-wrap-l {
    width: 93%;
    padding-left: 7%;
    padding-right: 0%;
}
.sg-panel.sg-wrap-l {
    width: 86%;
    margin-left: 7%;
    margin-right: 7%;
}
/* was a bug, actually need more narrow */
.sg-panelw.sg-wrap-r {
    width: 93%;
    padding-left: 0%;
    padding-right: 7%;
}
.sg-panel.sg-wrap-r {
    width: 93%;
    margin-left: 0%;
    margin-right: 7%;
}
.sg-panelw.sg-wrap-lb {
    width: 43%;
    padding-right: 0%;
}
.sg-panel.sg-wrap-lb {
    width: 43%;
    margin-right: 0%;
}
.sg-panelw.sg-wrap-rb {
    width: 43%;
    padding-left: 0%;
}
.sg-panel.sg-wrap-rb {
    width: 43%;
    margin-left: 0%;
}
#header {
    height: 76px;
    min-height: 76px;
    padding-bottom: 32px;
}
#title {
    margin-top: 24px;
}
#logo {
    height: 100px;
}
#nav {
    top: 118px;
}
#first {
    margin-top: 122px;
    padding-bottom: 30px;
}
#first > .sg-panel > h1 {
    font-size: 250%;
}

/* somewhat big END */
@media only screen and (min-width: 1450px) {
    /* and (max-resolution: 1dppx) {  THIS SOLUTION BREAKS IE DESKTOP */
    /* super big BEGIN */
    /* deprecated
	.sg-panelw {
		width:66%;
		padding-left:17%;
		padding-right:17%;
	}
	.sg-panel {
		width:66%;
		margin-left:17%;
		margin-right:17%;
	}
	.sg-panelw.sg-wrap-l { width:83%;padding-left:17%; padding-right:0%; }
	.sg-panel.sg-wrap-l { width:66%;margin-left:17%; margin-right:17%; }
	.sg-panelw.sg-wrap-r { width:83%;padding-left:0%; padding-right:17%; }
	.sg-panel.sg-wrap-r { width:83%;margin-left:0%; margin-right:17%; }
	.sg-panelw.sg-wrap-lb { width:33%;padding-right:0%; }
	.sg-panel.sg-wrap-lb { width:33%;margin-right:0%; }
	.sg-panelw.sg-wrap-rb { width:33%;padding-left:0%; }
	.sg-panel.sg-wrap-rb { width:33%;margin-left:0%; }
	*/
    /* deprecated? */

    .sg-panelw.sg-wrap-l {
        padding-right: 0% !important;
    }

    .sg-panelw.sg-wrap-r {
        padding-left: 0% !important;
    }

    .sg-panel.sg-wrap-r {
        margin-left: 0% !important;
    }

    .sg-panelw.sg-wrap-lb {
        padding-right: 0% !important;
    }

    .sg-panel.sg-wrap-lb {
        margin-right: 0% !important;
    }

    .sg-panelw.sg-wrap-rb {
        padding-left: 0% !important;
    }

    .sg-panel.sg-wrap-rb {
        margin-left: 0% !important;
    }

    .sg-screenisbig.sg-wrap-l,
    .sg-screenisbig.sg-wrap-r,
    .sg-screenisbig.sg-wrap-lb,
    .sg-screenisbig.sg-wrap-rb {
        display: inline-block;
    }

    #header {
        height: 138px;
        min-height: 138px;
        padding-bottom: 4px;
    }

    #title {
        margin-top: 38px;
    }

    #logo {
        height: 126px;
    }

    #nav {
        top: 152px;
    }

    #first {
        margin-top: 102px;
        padding-bottom: 20px;
    }

    #first > .sg-panel > h1 {
        font-size: 360%;
    }
    /* super big END */
}
@media only screen and (max-width: 950px) {
    /* #header { border:2px solid orange; outline:2px solid red; } */

    .sg-panelw,
    .sg-panel {
        width: 98%;
        padding-left: 1%;
        padding-right: 1%;
        margin-left: 0%;
        margin-right: 0%;
    }

    .static {
        width: 100%;
        padding-left: 0%;
        padding-right: 0%;
        margin-left: 0%;
        margin-right: 0%;
    }

    .sg-panelw.sg-wrap-l {
        width: 99%;
        padding-left: 1%;
        padding-right: 0%;
    }

    .sg-panel.sg-wrap-l {
        width: 98%;
        margin-left: 1%;
        margin-right: 1%;
    }

    .sg-panelw.sg-wrap-r {
        width: 99%;
        padding-left: 0%;
        padding-right: 1%;
    }

    .sg-panel.sg-wrap-r {
        width: 99%;
        margin-left: 0%;
        margin-right: 1%;
    }

    .sg-panelw.sg-wrap-lb {
        width: 49%;
        padding-right: 0%;
    }

    .sg-panel.sg-wrap-lb {
        width: 49%;
        margin-right: 0%;
    }

    .sg-panelw.sg-wrap-rb {
        width: 49%;
        padding-left: 0%;
    }

    .sg-panel.sg-wrap-rb {
        width: 49%;
        margin-left: 0%;
    }

    #header {
        height: 81px;
        min-height: 81px;
        padding-bottom: 27px;
    }

    #header.shrink {
        height: 24px;
        min-height: 24px;
        border-top-width: 3px;
        border-bottom-width: 1px;
    }

    #header.shrink > a > img {
        height: 24px;
    }

    #header.shrink h1 {
        line-height: 23px;
    }

    #nav.shrink {
        top: 27px;
    }

    #header.shrink > a > div,
    #header.shrink > a > div > a {
        font-size: 65%;
        margin-top: -3px;
    }

    #nav {
        top: 118px;
    }

    #navmenu {
        border-left-color: #eee;
        border-right-color: #eee;
    }

    #navmenu > li > a {
        font-size: 100%;
    }

    #navmenu {
        box-shadow: 0px 0px 20px 1px #444;
    }

    #title > h1 {
        font-size: 120%;
    }

    #first {
        margin-top: 90px;
    }

    #first .sg-1p-icon,
    #first .bookimg {
        width: 40%;
    }

    #first .sg-1p-content,
    #first .bookinfo {
        width: 40%;
        margin: 0px;
    }

    #footer {
        font-size: 60%;
        box-shadow: 2px 12px 20px 2px #000;
    }

    .callout {
        padding: 5%;
        margin: 5%;
        width: 80%;
        box-shadow: 8px 8px 10px #444;
        outline: 1px solid #aaa;
    }
}

/*
this used to be 768, but we are still wrapping on iPad now
*/
@media only screen and (max-width: 639px) {
    .sg-panelw,
    .sg-panel {
        width: 100%;
        padding-left: 0%;
        padding-right: 0%;
        margin-left: 0%;
        margin-right: 0%;
        /* background-size:100% auto !important; / * imp TODO - need to find another way, causes edges on devices*/
    }

    .sg-panelw.sg-wrap-l {
        width: 100%;
        padding-left: 0%;
        padding-right: 0%;
    }

    .sg-panel.sg-wrap-l {
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
    }

    .sg-panelw.sg-wrap-r {
        width: 100%;
        padding-left: 0%;
        padding-right: 0%;
    }

    .sg-panel.sg-wrap-r {
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
    }

    .sg-panelw.sg-wrap-lb {
        width: 50%;
        padding-right: 0%;
    }

    .sg-panel.sg-wrap-lb {
        width: 50%;
        margin-right: 0%;
    }

    .sg-panelw.sg-wrap-rb {
        width: 50%;
        padding-left: 0%;
    }

    .sg-panel.sg-wrap-rb {
        width: 50%;
        margin-left: 0%;
    }
}
@media only screen and (max-width: 639px) {
    p {
        margin-bottom: 2px;
    }

    .col {
        margin: 0px;
        padding: 0px;
    }

    #header {
        height: 38px;
        min-height: 38px;
        width: 100%;
        padding: 0px;
        border-bottom: 1px solid #424242;
        /* same as bg */
        border-top: 1px solid #424242;
        box-shadow: 0px 0px 30px #000;
    }

    #logo {
        height: 39px;
        margin: 0px;
    }

    #title {
        margin: 10px 0px 0px 6px;
        padding: 0px;
        font-size: 70%;
        width: 70%;
        Xoutline: 1px solid red;
    }

    #title > h1 {
        margin: 0px;
        padding: 0px;
        font-size: 120%;
    }

    #nav {
        top: 40px;
        height: auto;
        z-index: 999;
        min-height: 0px;
        border: 0px;
        padding: 0px 0%;
        Xwidth: 40%;
        Xmargin: 0px 0% 0px 60% width: 100%;
        margin: 0px 0% 0px 0%;
    }

    #menuopen {
        display: block;
    }

    #navmenu {
        display: none;
    }

    #first {
        margin-top: 50px;
        padding-bottom: 0px;
        padding-top: 30px;
    }

    #first .sg-1p-icon,
    #first .bookimg {
        display: block;
        float: center;
        width: 96%%;
    }

    #first .sg-1p-content,
    #first .bookinfo {
        width: 80%;
    }

    #first .sg-1p-actions,
    #first .bookbuy {
        width: 20%;
    }

    #last > div {
        padding-bottom: 46px;
    }

    #footer {
        margin: 0px;
        padding: 1%;
        width: 98%;
    }

    #footer {
        font-size: 50%;
    }

    #social-icons img {
        padding-right: 3px;
        margin-top: 2px;
    }

    #first > .sg-panel > h1 {
        font-size: 200%;
    }
}
@media only screen and (max-width: 100px) {
    #last > div {
        padding-bottom: 51px;
    }
}

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    /* works */

    #Xheader {
        border: 2px solid orange;
        outline: 2px solid red;
    }
}

/* last! */
.sg-filter.sg-panelw.sg-wrap-lb {
    width: 50%;
    padding-left: 0%;
}
.sg-filter.sg-panelw.sg-wrap-rb {
    width: 50%;
    padding-right: 0%;
}

/* FROM //s3.amazonaws.com/static2a.1-pagers.com/onepagers.css */

/* fix for gradient backgrounds */
html {
    height: 100% !important;
}
a {
 line-height: 1em;
}

.signin-card {
    display: inline-block;
    padding: 20px 25px 30px;
    Xfloat: right;
    width: 285px !important;
    color: white;
    /* new look? */

    padding: 2%;
    margin: 0% 0%;
    Xwidth: auto;
    position: relative;
}
.signin-card.dialog {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    Xcolor: #888;
    color: #fff;
    text-shadow: 0px 1px 3px #434343;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.77);
}

/*
.signin-card.dialog a {
	text-shadow:none;
}
*/
.signin-card #Email,
.signin-card #Passwd,
.signin-card .captcha {
    Xdirection: ltr;
    height: 44px;
    font-size: 16px;
}
.signin-card input[type=email],
.signin-card input[type=password],
.signin-card input[type=text],
.signin-card input[type=submit] {
    width: 100%;
    display: block;
    margin-bottom: 10px;
    z-index: 1;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.signin-card label {
    font-size: 17px;
    Xcolor: #444;
}
.signin-card input[type=radio] {
    margin-bottom: 4px;
}
.signin-card input[type=email],
.signin-card input[type=number],
.signin-card input[type=password],
.signin-card input[type=tel],
.signin-card input[type=text],
.signin-card input[type=url] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    height: 36px;
    padding: 0 8px;
    margin: 0;
    background: #FFF;
    border: 1px solid #D9D9D9;
    border-top: 1px solid #C0C0C0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    font-size: 15px;
    color: #404040;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) inset;
    border-radius: 4px;
}
.signin-card input:not([type]),
input[type="color"],
.signin-card input[type="email"],
.signin-card input[type="number"],
.signin-card input[type="password"],
.signin-card input[type="tel"],
.signin-card input[type="url"],
.signin-card input[type="text"] {
    padding: 1px 4px;
}
.signin-card input,
.signin-card textarea,
.signin-card keygen,
.signin-card select,
.signin-card button,
.signin-card isindex,
.signin-card meter,
.signin-card progress {
    -webkit-writing-mode: horizontal-tb;
    display: inline-block;
    vertical-align: top;
    margin: 0em;
    font: -webkit-small-control;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: start;
}
.signin-card input[type=email],
.signin-card input[type=password],
.signin-card input[type=text],
.signin-card input[type=submit] {
    width: 100%;
    display: block;
    margin-bottom: 10px;
    z-index: 1;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.signin-card .rc-button,
.signin-card .rc-button:visited {
    display: inline-block;
    min-width: 46px;
    text-align: center;
    color: #444;
    Xfont-size: 14px;
    font-weight: 700;
    height: 36px;
    padding: 0 8px;
    line-height: normal;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    /*
	-o-transition: all 0.218s;
	-moz-transition: all 0.218s;
	-webkit-transition: all 0.218s;
	transition: all 0.218s;
	*/

    Xborder: 1px solid #dcdcdc;
    border: 1px solid #008000;
    /* 1P green */

    background-color: #F5F5F5;
    background-image: -webkit-linear-gradient(top, #F5F5F5, #F1F1F1);
    background-image: -moz-linear-gradient(top, #f5f5f5, #f1f1f1);
    background-image: -ms-linear-gradient(top, #f5f5f5, #f1f1f1);
    background-image: -o-linear-gradient(top, #f5f5f5, #f1f1f1);
    background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
    /* original border: 1px solid #98FF28; */

    border: 1px solid #f1f1f1;
    /* 1p green */
    /* original background: #B2EA2B; */

    background: #53a869;
    Xbackground-image: -moz-linear-gradient(top, #B2EA2B, #98FF28);
    Xbackground-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B2EA2B), to(#98FF28));
    Xbackground-image: -webkit-linear-gradient(top, #B2EA2B, #98FF28);
    Xbackground-image: -o-linear-gradient(top, #B2EA2B, #98FF28);
    Xbackground-image: linear-gradient(to bottom, #B2EA2B, #98FF28);
    Xbackground-repeat: repeat-x;
    /* 1p blue
	background: #DDF1FF ;
	background: -moz-linear-gradient(-45deg, #DDF1FF  0%, #445ABC 50%, #437FAF  100%);
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#DDF1FF ), color-stop(50%,#445ABC), color-stop(100%,#437FAF ));
	background: -webkit-linear-gradient(-45deg, #DDF1FF  0%,#445ABC 50%,#437FAF  100%);
	background: -o-linear-gradient(-45deg, #DDF1FF  0%,#445ABC 50%,#437FAF  100%);
	background: -ms-linear-gradient(-45deg, #DDF1FF  0%,#445ABC 50%,#437FAF  100%);
	background: linear-gradient(135deg, #DDF1FF  0%,#445ABC 50%,#437FAF  100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DDF1FF ', endColorstr='#437FAF ',GradientType=1 );
	border: 1px solid #437FAF;
	*/

    -o-transition: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    transition: none;
    user-select: none;
    cursor: default;
    font-size: 120%;
    color: #FFF;
    text-shadow: none;
    cursor: pointer;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}
.signin-card input[type="submit"]:hover {
    color: #FFF;
    /* 1p green */

    border: 1px solid #B2EA2B;
    /* background: #98FF28; */
    /* 1p blue
	background: #437FAF;
	*/
}
.signin-card.shadow,
.signin-card.dialog {
    box-shadow: #ded 0px 2px 10px 0px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 10px 0px;
}
.signin-card.dialog {
    /* background: transparent; was for bb */
    /* margin-top: 13%; */
}
#home .sg-plugin.abs .signin-card.dialog,
/* works bc more specific */
.green-background-reverse,
.green-background {
    /* 1p green */
    /* FROM #1a7612	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #8adbc0), color-stop(50%, #206d00), color-stop(100%, #8adbc0)); */
    /*
    background: #8adbc0;
    background: -moz-linear-gradient(-45deg, #8adbc0 0%, #206d00 50%, #8adbc0 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #8adbc0), color-stop(50%, #206d00), color-stop(100%, #8adbc0));
    background: -webkit-linear-gradient(-45deg, #8adbc0 0%, #206d00 50%, #8adbc0 100%);
    background: -o-linear-gradient(-45deg, #8adbc0 0%, #206d00 50%, #8adbc0 100%);
    background: -ms-linear-gradient(-45deg, #8adbc0 0%, #206d00 50%, #8adbc0 100%);
    background: linear-gradient(135deg, #8adbc0 0%, #206d00 50%, #8adbc0 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#8adbc0', endColorstr='#8adbc0', GradientType=1);
    */
    /* 1p blue
	background: #44ACBC ;
	background: -moz-linear-gradient(-45deg, #44ACBC  0%, #134C73 50%, #438FAF  100%);
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#44ACBC ), color-stop(50%,#134C73), color-stop(100%,#438FAF ));
	background: -webkit-linear-gradient(-45deg, #44ACBC  0%,#134C73 50%,#438FAF  100%);
	background: -o-linear-gradient(-45deg, #44ACBC  0%,#134C73 50%,#438FAF  100%);
	background: -ms-linear-gradient(-45deg, #44ACBC  0%,#134C73 50%,#438FAF  100%);
	background: linear-gradient(135deg, #44ACBC  0%,#134C73 50%,#438FAF  100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44ACBC ', endColorstr='#438FAF ',GradientType=1 );
	*/
    background-color: #59bc67e8;
}
#home .sg-plugin.abs::before {
    /* works bc more specific */

    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #9EDC71 rgba(0, 0, 0, 0);
}
.signin-card.dialog a {
    Xcolor: #587ED2;
    color: #fff;
}

/* deprecated
.green-background-reverse {
	background: #206d00;
	background: -moz-linear-gradient(-45deg, #206d00 0%, #8adbc0 50%, #206d00 100%);
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#206d00), color-stop(50%,#8adbc0), color-stop(100%,#206d00));
	background: -webkit-linear-gradient(-45deg, #206d00 0%,#8adbc0 50%,#206d00 100%);
	background: -o-linear-gradient(-45deg, #206d00 0%,#8adbc0 50%,#206d00 100%);
	background: -ms-linear-gradient(-45deg, #206d00 0%,#8adbc0 50%,#206d00 100%);
	background: linear-gradient(135deg, #206d00 0%,#8adbc0 50%,#206d00 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#206d00', endColorstr='#8adbc0',GradientType=1 );
}
*/
.sg-plugin {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 1;
    font-size: 16px;
    /* display:table; zoom all messed up on IE */

    display: table;
}
.signin-card #sg-plugin-login-signin-message {
    display: inline-block;
    vertical-align: top;
    float: right;
    width: 185px;
    margin: 25px 0px 0px 0px;
}
.signin-card #sg-plugin-login-message-signin,
.signin-card #sg-plugin-login-message-signup {
    Xfont-size: 260%;
    font-size: 26px;
    margin-top: 9%;
}
.signin-card #sg-plugin-login-message-welcome {
    font-size: 180%;
}
.signin-card #sg-plugin-login-message-tocontinue {
    font-size: 160%;
}
.signin-card #sg-plugin-login-EmailStatic {
    text-align: left;
    width: 100%;
    display: inline-block;
    /*vertical-align:middle;
	height:96px;
	padding-left:10px;
	position: absolute;
	top: 26px;
	right: 12px;
	Xfont-size:14px;
	*/
}
.signin-card #sg-plugin-login-link-forgot-passwd {
    display: none !important;
}
.signin-card #sg-plugin-login-err {
    display: none;
    color: red;
    Xbackground-color: #fee;
    padding: 2px 10%;
    border-radius: 12px;
    width: 80%;
    text-shadow: none;
}
.signin-card .profile-img {
    width: 96px;
    height: 96px;
    Xmargin: 0 auto 10px auto;
    margin: 0 auto 10px 0;
    display: inline-block;
    vertical-align: top;
    float: left;
    -moz-border-radius: 10%;
    -webkit-border-radius: 10%;
    border-radius: 10%;
    border: 2px solid white;
}
.signin-card .bubble {
    background-color: #FFF;
    padding: 15px;
    margin-top: -1px;
    font-size: 11px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.signin-card .remember .bubble-wrap {
    position: absolute;
    padding-top: 3px;
    -o-transition: opacity .218s ease-in .218s;
    -moz-transition: opacity .218s ease-in .218s;
    -webkit-transition: opacity .218s ease-in .218s;
    transition: opacity .218s ease-in .218s;
    left: -999em;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    width: 314px;
    margin-left: -20px;
}
.signin-card .hidden-label {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    height: 0px;
    width: 0px;
    overflow: hidden;
    visibility: hidden;
}
.signin-card #link-forgot-passwd {
    font-size: 80%;
    float: right;
}
.signin-card input[type=email].regformon,
.signin-card input[type=password].regformon,
.signin-card input[type=radio].regformon,
.signin-card .regformon,
.signin-card .uformon,

/*.signin-card .uformon-cell,*/
.signin-card .loggedinformon,

/*.signin-card .loggedinformon-cell,*/
.signin-card .firstformoff {
    display: none;
}
.signin-card .firstformon {
    Xdisplay: inline-block;
}
.signin-card #gobackl {
    text-align: left;
    font-size: 60%;
    float: left;
}
.signin-card #EmailStatic {
    margin-bottom: 20px;
}
.signin-card #sg-plugin-login-diffl {
    margin-top: 20px;
    cursor: pointer;
    width: 100%;
    margin-top: 4%;
    text-align: center;
}
.sg-plugin.abs {
    display: block !important;
    position: fixed;
    width: auto;
    height: auto;
    left: 20px;
    top: 52px;
    z-index: 999998;
}
.sg-plugin.abs .sg-plugininner {
    Xzoom: 100% !important;
}
.sg-plugin.abs .signin-card.dialog {
    background: white;
    background: rgba(255, 255, 255, 0.95);
    /*
	color:#888;
	text-shadow:none;
	*/
}
.sg-plugininner {
    /* display:table; zoom all messed up on IE */

    display: table-cell;
    vertical-align: middle;
}
.sg-plugin.abs .signin-card {
    margin: 0 !important;
    padding: 5% !important;
}
.sg-plugin.abs:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 28px;
    top: -30px;
    border-style: solid;
    border-width: 0px 30px 30px 6px;
    border-color: transparent;
    /* border-color: transparent transparent #C0F997 transparent;
	border-color: #EDFFDF;
	border-color: transparent transparent #EDFFDF transparent;
	border-color: transparent transparent #9EDC71 transparent ; */

    border-color: transparent transparent #fff transparent;
    opacity: 0.7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
.signin-card #sg-plugin-login-account {
    float: left;
    margin: 7%;
}
.signin-card #sg-plugin-login-signOut {
    float: right;
    margin: 7%;
}
#top > div:first-child {
    display: inline;
}
a {
    Xcolor: #607E66;
    Xcolor: #157415;
    color: #3BB7FF;
    cursor: pointer;
}
.hidden {
    display: none;
}
#home #topbar {
    display: inline-block;
    vertical-align: top;
    margin: 0%;
    padding: 4px 0px;
    /* need to keep fixed since basing offsets on this */

    width: 100%;
    Xbackground: #f0fff0;
    Xbackground: rgba(243, 255, 243, 0.9);
}
#home .topbar-opener {
    /*opacity:0.1;*/

    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
#home .topbar-opener.sg-userinfo {
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5)";
}
#home .topbar-opener:hover,
#home #headc.on .topbar-opener {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.sg-container {
    X-webkit-transition: all 250ms ease-in-out;
    -webkit-transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
#home .container {
    Xposition: relative !important;
    position: static;
    overflow: visible;
    /* hidden fixes box shadows, no seems to ruin for dl ch?? */

    background-position: 50% 50%;
    background-repeat: no-repeat;
}
#home .container#headc {
	/* or topbar wouldnt show */
    overflow: visible;
	z-index: 999991; /* note 1 works on some */
	position: fixed;
	top: 0px;
}
#home .container.sg-level-1-c {
    overflow: visible;
    /* fixes hidden control openers */
}
#home .sg-pan {
    Xposition: relative !important;
    background-color: transparent;
    background-size: cover;
    /*background-position: center;
	background-repeat:no-repeat;*/
    /* overflow:hidden; / ************** TEMPORARY! ************* THIS RUINED BOX SHADOWS */

    background-position: center 20%;
    background-repeat: no-repeat;
}
#home #acct {
    transition: opacity .2s ease-out;
    -webkit-transition: opacity .2s ease-out;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    Xposition: absolute;
    position: fixed;
    left: -1000px;
    width: 300px;
    padding: 0px;
    color: white;
    z-index: 999991;
}
#home #acct:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 39px;
    top: -50px;
    border-style: solid;
    border-width: 0px 30px 30px 6px;
    /* 1p green */

    border-color: transparent transparent #76d282 transparent;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #76d282 rgba(0, 0, 0, 0);
    /* 1p blue
	border-color: transparent transparent #6EBEC5 transparent;
	border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(79, 176, 185, 0.82) rgba(0, 0, 0, 0); */
}
#home #acct #profile {
    width: 260px;
    padding: 20px;
}
#home #config-img-32,
#home #opener-opener,
#home .profile-img-96,
#home #profile-info,
#home #profile-email {
    display: inline-block;
    vertical-align: top;
    font-size: 13px !important;
    background-size: cover;
}
#home #profile-email {
    margin-bottom: 10px;
}
#home #profile-info {
    margin-left: 0px;
    /* why not 5px?? */

    width: 155px;
}
.profile-img {
    background: none no-repeat center center #fff;
}
.topbar-item {
    float: right;
    margin-top: 3px;
}
#home-a {
    /*float: right;*/
	position:absolute;
	right: 4px;
    /* margin-right: 8px; */
    opacity: 0.7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
#home-a:hover {
    opacity: 1.0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/* #config-img-32,
#profile-img-32 */
.topbar-button {
    float: left;
    border-radius: 50%;
    margin-left: 8px;
    Xbackground-color: #8adbc0;
    /* old 1p border: 2px solid #E0FFE4; */

    border: 2px solid #E0F6FF;
    cursor: pointer;
    Xbackground: none no-repeat center center rgba(0, 0, 0, 0);
    /* old 1p background: none no-repeat center center #8adbc0; */

    background: none no-repeat center center #91e3ac;
    background-size: 100%;
    background-size: cover;
}
#sg-apps {
    width: 20%;
}
#sg-status {
    text-align: center;
    font-size: 14px;
    border-radius: 20px;
    /* text-shadow: 1px 1px 0px #FFF; */
    display: none;
    /* new look */

    background-color: #FFF;
    position: fixed;
    top: 0px;
    right: 0px;
    width: auto;
    height: auto;
    z-index: 9999999999999999;
    visibility: visible;
    margin: 8px;
    padding: 8px;
    display: block;
    transition: opacity 2.0s ease-out;
}
#config-img-32 {
    background: urlX('images/config6.png') no-repeat center center #5DE429;
    border: 2px solid #E0FFE4;
    cursor: pointer;
}
.profile-img-96 {
    width: 96px;
    height: 96px;
    background-size: 96px 96px;
    border-radius: 50%;
}
#home #profile-img-change {
    position: absolute;
    left: 20px;
    width: 96px;
    top: 86px;
    font-size: 13px;
    font-weight: bold;
    line-height: 12px;
    text-align: center;
    background: #B3DF93;
    background: rgba(240, 255, 240, 0.5);
    cursor: pointer;
}
#home #acct #profile-buttons {
    display: inline-block;
    vertical-align: top;
    width: 300px;
    height: 60px;
    /* background:#BCE59D;
	background:rgba(255, 255, 255, 0.28);
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px; */

    text-align: center;
}
#home #profile-buttons #profile-signout {
    display: inline-block;
    vertical-align: middle;
    width: 150px;
    margin: 10 75px;
    text-align: center;
    height: 40px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    line-height: 37px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    background: rgba(250, 250, 250, 0.38);
    color: #fff;
}
#home .toolbar-button {
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    background-size: 28px 28px;
    Xfloat: left;
    border-radius: 50%;
    cursor: pointer;
    margin: 4px 2px 0px 2px;
    font-size: 30px;
    text-align: center;
    Xcolor: #E0FFE4;
    color: #4F4F4F;
    line-height: .8;
    Xopacity: 0;
    X-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    transition: opacity .5s ease-out;
    z-index: 1;
    /* old 1p background-color:#8adbc0;
	border: 2px solid #E0FFE4; */

    border: 2px solid #E0F6FF;
    background-color: #91e3ac;
}
#home .toolbar-section {
    display: inline-block;
    vertical-align: top;
    Xmargin-right: 2%;
    text-align: left;
    /* was right, why? */

    padding: 2px 0px 3px 0px;
}
#home .toolbar-item {
    position: relative;
    /* caused pointer issue on first button XXXXXXXXtransform: translateX(0px) translateY(0px);  why?? */
    left: 0px;
    top: 0px;
    border-radius: 10%;
    margin: 0px 0.5%; /* was 1px, was 2px */
}
#home .toolbar-item > .toolbar-secret-field {
    transition: all 0.2s ease-out;
    cursor: pointer;
    left: 0px;
    top: 0px;
}
#home .toolbar-item/*,
#home .toolbar-item-wide5 */
{
    display: inline-block;
    vertical-align: top;
    text-align: left;
    /* white-space: nowrap; */
    /* why?? */

    background-color: #FFF;
    background-color: rgba(255, 255, 255, 0.06);
    /* border-radius: 50%; */

    cursor: pointer;
    /* 	box-shadow: 1px 1px 2px 1px #6F6F6F;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.11);
 */

    overflow: hidden;
    border-radius: 10%;

	color: #fff;
	text-align: center;
	font-weight: bold;
}

/*#home .toolbar-item-wide5  {
	text-align: right;
}*/

/* #home .toolbar-item#sg-tb-fixattach,
#home .toolbar-item#sg-tb-speedgui {
	background: url(images/sg-favicon.png) no-repeat transparent;
	background-size:100%;
	background-size:contain;
	position:absolute !important;
	box-shadow:none !important;
	opacity: .05;
}
#home .toolbar-item#sg-tb-fixattach {
	margin-top:25px;
}
 */
#home .toolbar-item#sg-tb-value,
#home .toolbar-item#sg-tb-movedown,
#home .toolbar-item#sg-tb-suggest {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}
#home .toolbar-item#sg-tb-icon,
#home .toolbar-item#sg-tb-moveup {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}
#home .toolbar-item#sg-tb-label,
#home .toolbar-item#sg-tb-sublabel,
#home .toolbar-item#sg-tb-helptext,
#home .toolbar-item#sg-tb-summary,
#home .toolbar-item#sg-tb-name,
#home .toolbar-item#sg-tb-valid,
#home .toolbar-item#sg-tb-filter {
    border-radius: 0;
}
#home .toolbar-item#sg-tb-label,
#home .toolbar-item#sg-tb-icon,
#home .toolbar-item#sg-tb-sublabel,
#home .toolbar-item#sg-tb-moveup
/* ,#home .toolbar-item#sg-tb-value */
{
    margin-right: 0px;
}
#home .toolbar-item#sg-tb-label,
#home .toolbar-item#sg-tb-sublabel,
#home .toolbar-item#sg-tb-value,
#home .toolbar-item#sg-tb-movedown,
#home .toolbar-item#sg-tb-suggest {
    margin-left: 0px;
}
#home .toolbar-item.inset {
    /* margin-top:2px;
	margin-bottom:2px;
	 */
    /* old look
	box-shadow: 1px 3px 0px 0px #737171;
	box-shadow: 2px 2px 2px 0px #6F6F6F;
	box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.11);
	*/
}
#home .toolbar-item#sg-tb-sublabelinner,
#home .toolbar-item#sg-tb-suggestinner {
    height: 50%;
    line-height: 16px;
    border-radius: 50%;
    margin: 9px 4px 0px 0px;
}
#home .toolbar-item > span {
    /* font-size:100%; no relatives bc user fonts */

    font-size: 20px;
    color: transparent;
    text-align: left;
    width: 29%;
    line-height: 0.9em;
    top: 1px;
    font-weight: bold;
}
#home .toolbar-item#sg-tb-addpanel > span,
#home .toolbar-item#sg-tb-background > span,
#home .toolbar-item#sg-tb-backvideo > span,
#home .toolbar-item#sg-tb-icon > span {
    /* font-size:81%; no relatives bc user fonts */

    font-size: 16px; /* was 20px; */
}

/*#home #sg-addnew,
#home #sg-addicon,
#home #sg-addback,
#home #sg-addvideo {
	display: inline-block;
	text-align: left;
	cursor:pointer;
}
*/

/* #home #sg-addnew {
	padding-right: 2%;
	font-size:80%;
#home #sg-addback,
#home #sg-addicon {
	padding-right: 0%;
	font-size:70%;
}
#home #sg-addvideo {
	padding-right:4%;
	font-size:70%;
}
}*/
.sg-tb-label-left {
    float: left;
    /* padding-left: 23%; */

    padding-left: 36%;
    padding-right: 0;
    display: inline-block;
    vertical-align: top;
    text-align: left;
}
.sg-tb-label-right {
    font-size: 75%;
    line-height: .9em;
    font-weight: bold;
    text-align: left;
    display: inline-block;
    vertical-align: top;
    text-align: right;
    float: right;
}
.sg-tb-label-right u {
    text-decoration: underline;
    cursor: pointer;
}

/* #home .toolbar-item.selected2 > span { display:block !important; } / * these two kludgey */
#home .toolbar-item.selected2 > .toolbar-item {
    display: none !important;
}
#home .toolbar-item#sg-tb-label,

/* #home .toolbar-item#sg-tb-sublabel, */
#home .toolbar-item#sg-tb-value,

/* #home .toolbar-item#sg-tb-suggest, */
#home .toolbar-item#sg-tb-summary,
#home .toolbar-item#sg-tb-name,
#home .toolbar-item#sg-tb-valid,
#home .toolbar-item#sg-tb-helptext {
    text-align: left;
    line-height: 13px;
}
#home .toolbar-item#sg-tb-icon {
    background-image: url(images/tb/tb-icon.png);
}
#home .toolbar-item#sg-tb-clonemeone {
    background-image: url(images/tb/tb-new.png);
}
#home .toolbar-item#sg-tb-addpanel {
    background-image: url(images/tb/tb-new.png);
}
#home .toolbar-item#sg-tb-moveup {
    background-image: url(images/tb/tb-up.png);
}
#home .toolbar-item#sg-tb-movedown {
    background-image: url(images/tb/tb-down.png);
}
#home .toolbar-item#sg-tb-delete {
    background-image: url(images/tb/tb-detach.png);
}
#home .toolbar-item#sg-tb-onstar_2,
#home .toolbar-item#sg-tb-onstar {
    background-image: url(images/tb/tb-onstar.png);
}
#home .toolbar-item#sg-tb-label {
    background-image: url(images/tb/tb-label.png);
}
#home .toolbar-item#sg-tb-sublabel {
    background-image: url(images/tb/tb-label.png);
}
#home .toolbar-item#sg-tb-value {
    background-image: url(images/tb/tb-content.png);
}
#home .toolbar-item#sg-tb-suggest {
    background-image: url(images/tb/tb-content.png);
}
#home .toolbar-item#sg-tb-helptext {
    background-image: url(images/tb/tb-helptext.png);
}
#home .toolbar-item#sg-tb-summary {
    background-image: url(images/tb/tb-summary.png);
}
#home .toolbar-item#sg-tb-background {
    background-image: url(images/tb/tb-background.png);
}
#home .toolbar-item#sg-tb-backvideo {
    background-image: url(images/tb/tb-backvideo.png);
}
#home .toolbar-item#sg-tb-color {
    background-image: url(images/tb/tb-color.png);
}
#home .toolbar-item#sg-tb-app {
    background-image: url(images/tb/tb-app.png);
}
#home .toolbar-item#sg-tb-storage_system {
    background-image: url(images/tb/tb-storage.png);
}
#home .toolbar-item#sg-tb-name {
    background-image: url(images/tb/tb-name.png);
}
#home .toolbar-item#sg-tb-valid {
    background-image: url(images/tb/tb-valid.png);
}
#home .toolbar-item#sg-tb-acton {
    background-image: url(images/tb/tb-acton.png);
}
#home .toolbar-item#sg-tb-order {
    background-image: url(images/tb/tb-order.png);
}
#home .toolbar-item#sg-tb-filter {
    background-image: url(images/tb/tb-filter.png);
}
#home .toolbar-item#sg-tb-ref {
    background-image: url(images/tb/tb-ref.png);
    /* overflow: visible; not sure why it was there but messed up clicks to the left */
}
#home .toolbar-item#sg-tb-speedgui {
    background-image: url(images/sg-favicon.png);
    opacity: 0.85;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
}
#home .toolbar-item#sg-tb-more {
    background-image: url(images/tb/tb-more.png);
}
#home .toolbar-item#sg-tb-back_1,
#home .toolbar-item#sg-tb-back_2,
#home .toolbar-item#sg-tb-back_3 {
    background-image: url(images/tb/tb-back.png);
}
#home .toolbar-item#sg-tb-more,
#home .toolbar-item#sg-tb-back_1,
#home .toolbar-item#sg-tb-back_2,
#home .toolbar-item#sg-tb-back_3,
#home .toolbar-item#sg-tb-clonemeone,
#home .toolbar-item#sg-tb-addpanel,
#home .toolbar-item#sg-tb-moveup,
#home .toolbar-item#sg-tb-movedown,
#home .toolbar-item#sg-tb-delete,
#home .toolbar-item#sg-tb-onstar_2,
#home .toolbar-item#sg-tb-onstar,
#home .toolbar-item#sg-tb-helptext,
#home .toolbar-item#sg-tb-value,
#home .toolbar-item#sg-tb-summary,
#home .toolbar-item#sg-tb-storage_system,
#home .toolbar-item#sg-tb-name,
#home .toolbar-item#sg-tb-valid,
#home .toolbar-item#sg-tb-acton,
#home .toolbar-item#sg-tb-order,
#home .toolbar-item#sg-tb-filter,
#home .toolbar-item#sg-tb-ref,
#home .toolbar-item#sg-tb-background,
#home .toolbar-item#sg-tb-backvideo,
#home .toolbar-item#sg-tb-color,
#home .toolbar-item#sg-tb-speedgui,
#home .toolbar-item#sg-tb-app {
    background-repeat: no-repeat;
    /* background-size:100%;
	background-size:contain; */

    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.53);
    /* background-position: 10% center; */
    /* new look? */

    background-position: center center;
    background-size: 80%;
}
#home .toolbar-item#sg-tb-clonemeone {
    background-color: #ea91d9;
}
#home .toolbar-item#sg-tb-addpanel {
    Xbackground-color: #afa;
    background-color: #83D49C;
}

/* #home .toolbar-item#sg-tb-icon, */
#home .toolbar-item#sg-tb-sublabel,
#home .toolbar-item#sg-tb-helptext,
#home .toolbar-item#sg-tb-label {
    Xbackground-color: #c3c3c3;
    background-color: #AFBFBF;
}
#home .toolbar-item#sg-tb-value {
    Xbackground-color: #aef;
    /*z-index:1;no!*/

    background-color: #86D3DE;
}
#home .toolbar-item#sg-tb-suggest {
    background-color: #aef;
    /*z-index:2;no!*/
}

/* #home .toolbar-item#sg-tb-background { background-color: transparent; box-shadow:none; margin-left:3px; margin-right:-3px; } */

/* #home .toolbar-item#sg-tb-backvideo { background-color: transparent; box-shadow:none; margin-left:3px; margin-right:-3px; } */
#home .toolbar-item#sg-tb-color {
    Xbackground-color: #E5E56D;
    background-color: #A3BE72;
}
#home .toolbar-item#sg-tb-style {
    background-color: #afa;
}
#home .toolbar-item#sg-tb-summary {
    background-color: #aef;
}
#home .toolbar-item#sg-tb-acton {
    background-color: #FFC4E1;
}
#home .toolbar-item#sg-tb-storage_system,
#home .toolbar-item#sg-tb-name,
#home .toolbar-item#sg-tb-valid {
    background-color: #8CE8FF;
}
#home .toolbar-item#sg-tb-order,
#home .toolbar-item#sg-tb-filter,
#home .toolbar-item#sg-tb-ref {
    background-color: #FFB681;
}
#home .toolbar-item#sg-tb-delete {
    Xbackground-color: #FDB2B2;
    background-color: #B8A0A3;
}
#home .toolbar-item#sg-tb-movedown,
#home .toolbar-item#sg-tb-moveup {
    Xbackground-color: #8DC8FF;
    background-color: #74B5DE;
}
#home .toolbar-item#sg-tb-speedgui {
    background-color: #fff;
}
#home .toolbar-item#sg-tb-clonemeone,
#home .toolbar-item#sg-tb-addpanel,
#home .toolbar-item#sg-tb-onstar_2,
#home .toolbar-item#sg-tb-delete,
#home .toolbar-item#sg-tb-onstar {
    border-radius: 50%;
}
#home .toolbar-item#sg-tb-onstar_2,
#home .toolbar-item#sg-tb-onstar {
    Xbackground-color: #7979B8;
    background-color: #6275A4;
}
#home .toolbar-item#sg-tb-more {
    background-color: transparent;
    box-shadow: none;
}
#home .toolbar-item#sg-tb-label,
#home .toolbar-item#sg-tb-value {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80%;
}
#home .toolbar-item#sg-tb-sublabel,
#home .toolbar-item#sg-tb-suggest {
    background-repeat: no-repeat;
    background-position: 40% 75%;
    background-size: 33%;
}
#sg-sgdata-ref-div {
    float: right;
    width: 60%;
    height: 100%;
    background-color: #fff;
}
#home .toolbar-item#sg-tb-icon {
    background-repeat: no-repeat;
    /* background-size:100%;
	background-size:contain; */
    /* new look */

    background-size: 64%;
    background-position: 10px 6px;
}
#home .toolbar-item#sg-tb-app {
    box-shadow: none;
    background-color: transparent;
}
#home .toolbar-item#sg-tb-more,
#home .toolbar-item#sg-tb-back_1,
#home .toolbar-item#sg-tb-back_2,
#home .toolbar-item#sg-tb-back_3 {
    background-color: transparent;
    box-shadow: none;
}

/* #home .toolbar-item >form {
	display:none;
}*/
#home .toolbar-item > select {
    background-color: transparent;
}
#home .toolbar-item > span,
#home .toolbar-item > .toolbar-secret-field,
#home .toolbar-item > select {
    position: absolute;
}
#home .toolbar-item > span {
    left: 0px;
    /* dont know why */
}
.toolbar-secret-field {
    background-color: transparent !important;
    cursor: pointer;
    font-size: 16px;
    Xcolor: rgba(208, 0, 0, 0.99);
    Xbackground-color: #00F !important;
    width: 100%;
    height: 100%;
}
.toolbar-secret-select,
.toolbar-secret-field {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    Xheight: 20px;
    Xleft: 0px;
    color: transparent;
    Xfont-size: 0px;
    border: 0px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    /* width: boxsize */

    margin-left: 0px;
    /* was a bug, cant do 30 if width <30 (25 for ex) */
    /* TODO: */

    z-index: 199;
    /* imp! */
}
.toolbar-secret-select {
    left: 0px;
    /* dont know why */
}
textarea.toolbar-secret-field {
    cursor: text;
}
.toolbar-secret-popout {
    background-color: white !important;
    color: black !important;
    /* position: fixed !important; / * necessary unfortunately */
    /* border: 2px solid #000 !important;
	border-color: transparent black black black !important;
	border-bottom-left-radius: 20px !important;
	border-bottom-right-radius: 20px !important;
	*/
}
.toolbar-secret-field.toolbar-secret-popout {
    /* left:0px !important; no! */

    width: 300px !important;
    margin-left: 0px !important;
    /* imp bc dont want to use initial, hmmm... */

    height: 100px !important;
}
#home .toolbar-item-spacer {
    display: inline-block;
    /* height: boxsize */

    background-color: #efe;
    background-color: rgba(255, 255, 255, 0.72);
}
#home #sg-control .toolbar-option,
#home #sg-control .toolbar-option-separator {
    display: none;
    vertical-align: middle;
}

/* this thing is so darn specific, it overrides legit css */
#home #sg-control .sg-tbon-any,
/* NB */
#home #sg-control.sg-tbon-none .sg-tbon-none,
/* NB */
#home #sg-control.sg-tbon-none .selected,
/* NB */
#home #sg-control.sg-tbon-clonemeone .sg-tbon-clonemeone,
#home #sg-control.sg-tbon-addpanel .sg-tbon-addpanel,
#home #sg-control.sg-tbon-icon .sg-tbon-icon,
#home #sg-control.sg-tbon-label .sg-tbon-label,
#home #sg-control.sg-tbon-sublabel .sg-tbon-sublabel,
#home #sg-control.sg-tbon-value .sg-tbon-value,
#home #sg-control.sg-tbon-suggest .sg-tbon-suggest,
#home #sg-control.sg-tbon-background .sg-tbon-background,
#home #sg-control.sg-tbon-backvideo .sg-tbon-backvideo,
#home #sg-control.sg-tbon-color .sg-tbon-color,
#home #sg-control.sg-tbon-style .sg-tbon-style,
#home #sg-control.sg-tbon-helptext .sg-tbon-helptext,
#home #sg-control.sg-tbon-summary .sg-tbon-summary,
#home #sg-control.sg-tbon-acton .sg-tbon-acton,
#home #sg-control.sg-tbon-storage_system .sg-tbon-storage_system,
#home #sg-control.sg-tbon-name .sg-tbon-name,
#home #sg-control.sg-tbon-valid .sg-tbon-valid,
#home #sg-control.sg-tbon-order .sg-tbon-order,
#home #sg-control.sg-tbon-filter .sg-tbon-filter,
#home #sg-control.sg-tbon-ref .sg-tbon-ref,
#home #sg-control.sg-tbon-delete .sg-tbon-delete,
#home #sg-control.sg-tbon-moveup .sg-tbon-moveup,
#home #sg-control.sg-tbon-movedown .sg-tbon-movedown,
#home #sg-control.sg-tbon-speedgui .sg-tbon-speedgui,
#home #sg-control.sg-tbon-onstar_2 .sg-tbon-onstar_2,
#home #sg-control.sg-tbon-onstar .sg-tbon-onstar,
#home #sg-control.sg-tbon-more .sg-tbon-more {
    display: inline-block;
}

/* new look */
#home .toolbar-item.selected2 {
    border-top-left-radius: 2px !important;
    border-top-right-radius: 2px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    cursor: default;
    background-size: contain !important;
    background-position: 0px 0px !important;
    overflow: visible;
    margin: 0px;
    /* left:4px; */

    z-index: 201;
}
#home .toolbar-item > span {
    color: #fff;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    transition: opacity 1s ease-in;
    position: absolute;
    z-index: 199;
}
#home .toolbar-item.selected > span,
#home .toolbar-item.selected2 > span {
    /* line-height:24px; */
    /* left:auto; */

    z-index: 201;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#home .toolbar-item.selected > .sg-tb-closer,
#home .toolbar-item.selected2 > .sg-tb-closer {
    display: inline-block;
    /* float: left; */
	left: 0px;
    position: absolute;
    /* req for z */

    z-index: 203;
    cursor: pointer;
    /* line-height:62px !important;
	font-size:62px !important;
	background-color: #aaa; */
}
#home .toolbar-item.selected > form,
#home .toolbar-item.selected > .sg-tb-closer {
    z-index: 999999;
    position: relative;
    /* req for z */

    color: transparent;
    /* kludge */
}
#home .toolbar-item.selected > .sg-tb-closer {
    /* margin-left: 50px; MAYBE LATER */
    /* background-color:white !important; */

    padding-right: 50px;
}

/* #home .toolbar-item.selected2 > span,*/

/*#home .sg-tb-label-left,
#home .sg-tb-label-right  ,
#home .toolbar-item > .toolbar-secret-field
#home #sg-sgdata-addpanel
{
	display:none !important;
} */

/*
#home .toolbar-item.selected > span > select {
	background-color:white;
}
*/
#home .toolbar-item.selected2 > .toolbar-secret-field {
    left: auto !important;
    right: 0px !important;
    overflow: visible;
    width: 70%;
    height: 100%;
    z-index: 202;
    /* imp! */
}
#home .toolbar-item.selected2 > .toolbar-secret-field.zoomopen {}
#home .toolbar-item.selected2 > textarea.toolbar-secret-field {
    background-color: white !important;
    color: #000 !important;
    border: 0px solid black !important;
    cursor: text;
    overflow-y: scroll;
    overflow-x: hidden;
}
#home .toolbar-item > form {
    position: absolute;
    left: 0px;
    top: 0px;
    border: 0px;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#home input[type="file"] {
    width: 600px !important;
    height: 200px !important;
    position: absolute;
    left: -250px;
    background-color: transparent;
    opacity: 0;
    cursor: pointer;
    /* background-color: rgba(147, 54, 54, 0.48); */

    z-index: 198;
    /* imp! */
}
#home .toolbar-item.selected > form > input[type="file"],
#home .toolbar-item.selected2 > form > input[type="file"] {
    z-index: 201;
    /* imp! */
}
#home .toolbar-item-spacer,
#home .toolbar-item.selected,

/* #home .toolbar-item#sg-tb-background.selected, */
#home .toolbar-item.selected3 {
    /* box-shadow: 0px 0px 6px 6px #FFF; */

    box-shadow: 0px 0px 2px 2px #FFF;
}
#home .toolbar-item.selected3 {
    margin: 0px;
}
#home .sg-tb-closer {
    display: none;
    float: left;
    /* cant be seen on devices */
    /* width, height: boxsize */

    background: url(images/close6.png) no-repeat transparent;
    background-size: contain;
    cursor: pointer;
    margin: 0%;
}
#home .toolbar-field {
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
}
#home .toolbar-field > label {
    margin: 0px 2px 0px 4px;
    line-height: 24px;
    color: #FFF;
    font-weight: bold;
}
#home .toolbar-field > input {
    width: 100px;
    max-height: 23px;
    font-size: 13px !important;
}
#home .sg-tb-field > .toolbar-item {
    background-color: #ddd;
}
#home .sg-tb-container > .toolbar-item {
    background-color: #ddf;
}
#home .sg-tb-datalink > .toolbar-item {
    background-color: #fdd;
}
#home #sg-sgdata-def_valuef.open,
#home #sg-sgdata-def_valuef.open input {
    width: 100%;
    display: block;
    Xheight: 60px;
}

/* #home #sg-sgdata-sublabel,
#home #sg-sgdata-def_value {
	font-size:8px;
} */

/* imp! */
#home .toolbar-item#sg-tb-icon,
#home .toolbar-item#sg-tb-backvideo,
#home .toolbar-item#sg-tb-background {
    /* overflow:hidden !important; - no more, now a sgdiv! */

    Xbackground-color: #CCF0BB;
    background-color: #7AB49D;
}
#home #sg-sgdata-isa {
    font-weight: bold;
    margin: 0px 4px 0px 30px;
    background-color: #FFF;
    padding: 4px;
    float: left;
}
#home #sg-option-wrapper {
    width: 100%;
    overflow-x: scroll; /* why did i have hidden? */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin-top: 0px; /* was 15px; */
    box-shadow: 2px 2px 2px 0px #6F6F6F;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.11);
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}
#home #sg-option-wrapper-text {
    /* position: absolute; */
    width: 100%;
    height: 8px;
    /* 51 */

    font-size: 12px;
    /* font-weight: bold; */
    text-align: left;
    color: #B6D8D8;
    color: rgba(255, 255, 255, 0.65);
    margin-left: 0px;
    border-bottom: 2px solid #538F96;
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
    padding-bottom: 8px;
}
#home #sg-option-wrapper-text-spacer {
    height: 51px;
}
#home #sg-option-container {
    /* width:3350px; in home */

    height: 100%;
    padding-top: 3px;
    width: auto !important;
    white-space: nowrap !important;
}
#home .toolbar-option-group {
    display: inline-block;
    vertical-align: top;
    padding: 3px 0px 0px 0px;

    /* experiment */
    padding: 0px;
    background: #ffffff38;
    border-radius: 25px;
    border: 0px solid #ffffff36;
    margin-right: 0px;
}
#home .toolbar-option-group.selected {
    background-color: #5A9291;
    background-color: rgba(255, 255, 255, 0.27);
    border-radius: 25px;
    margin-right: 6px;
}
#home .toolbar-option-group > .toolbar-option {
    /*display:none;*/

    max-width: 0px;
    overflow: hidden;
    margin: 1px 0px 1px 0px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    transition: max-width 0.8s ease-in, margin 0.4s 0.0s ease-out, opacity 0.4s ease-out, transform 0.1s ease-out;
    white-space: normal !important;
}
#home .toolbar-option-group.selected > .toolbar-option {
    /*display:inline-block;*/

    max-width: 100px;
    overflow: visible;
    margin: 1px 2px 1px 0px;
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
#home .toolbar-option-group.selected > .toolbar-option.sg-tbon-addpanel {
    opacity: 1;
    /* these always on */

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#home .toolbar-option.sg-tbon-clonemeone,
#home .toolbar-option.sg-tbon-addpanel {
    border-radius: 2px;
}
/* complicated cadence touched / selected */
#home .toolbar-option-group > .toolbar-option.touched {
    display: inline-block !important;
    max-width: 100px !important;
    opacity: 0.5;
    overflow: visible;
    margin: 1px 2px 1px 0px;
}
#home .toolbar-option-group > .toolbar-option.selected,
#home .toolbar-option-group > .toolbar-option.touched {
    max-width: 100px;
    overflow: visible;
    margin: 1px 2px 1px 0px;
}
#home .toolbar-option-group > .toolbar-option.selected {
    opacity: 1;
}
#home .toolbar-option-separator {
    display: inline-block;
    vertical-align: top;
    /* font-weight: bold; */
    height: auto;
    line-height: normal;
    font-size: 8px;
    /* was 10 */

    text-align: center;
    margin: 2px;
    Xpadding: 1px;
    padding: 2px 5px;
    border-radius: 2px;
}
#home .toolbar-option-group > .toolbar-option-separator::after {
    content: "\BB";
}
#home .toolbar-option-group.selected > .toolbar-option-separator::after {
    content: "";
}
#home #sg-sgdata-options2 {
    width: auto;
    display: inline-block;
    vertical-align: top;
    margin: 0px 0px 0px 10px;
}
#home #sg-sgdata-options {
    width: auto;
    display: inline-block;
    vertical-align: top;
    Xmargin: 10px 0px 10px 0px;
    margin: 0px;
    Xoverflow-x: auto;
    Xoverflow-y: hidden;
    Xheight: 85px;
    Xwidth: 100%;
    Xtext-align: left;
}

/*
#sg-sgdata-options-container {
	width:6000px;
	height:100%;
}
*/
#home .toolbar-option2 {
    display: inline-block;
    vertical-align: top;
    margin: 0px 2px 0px 2px;
    width: 24px;
    height: 24px;
    color: transparent;
    border-radius: 50%;
    background-color: #fff;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    cursor: default;
}
#home .sg-cpanel-button {
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    font-size: 27px;
    line-height: 22px;
    height: 24px;
    width: 24px;
    color: #333;
    margin: 0px 6px 0px 4px;
    background-color: #DFDFDF;
    border-radius: 50%;
}
#home #sg-option2-more {
    line-height: 10px;
}
#home #sg-sgdata,
#home #sg-delete,
#home #sg-makeapp {
    /* float:left; / * away from opener */

    font-size: 12px;
    font-weight: bold;
}
#home #sg-sgdata {
    background: url('images/sg-favicon.png') no-repeat transparent;
    background-size: contain;
}
#home .sg-up {
    line-height: 1;
    font-size: 16px !important;
    display: inline-block;
    /* position:absolute; made see through some upper popups */

    position: static;
    /*
	box-shadow: 6px 6px 12px 2px #aaa;
	box-shadow: 6px 6px 12px 2px rgba(0, 0, 0, 0.50);
	now handled by level
	*/

    border-radius: 6px;
    background-color: white;
    color: #444;
    padding: 2px;
    margin: 2px;
    /* cursor:pointer; better not to trick them */

    background: url(images/upload6.png) no-repeat center center #dadada;
    background-color: rgba(0, 0, 0, 0.05);
    background-size: 80%;
    /* width: 25px;
	height: 25px; */

    bottom: 0px;
    right: 0px;
    overflow: hidden;
}
.sg-up-inline {
    display: inline-block;
    position: relative;
    margin-left: 10%;
}
.sg-up-inline > input[type="file"] {
    width: 100px;
}
#home #sg-up-form {
    display: inline-block;
    vertical-align: top;
}
#home .toolbar-option {
    display: inline-block;
    vertical-align: top;
    Xfont-size: 6px;
    Xline-height: 5px;
    text-align: center;
    /* margin:5px 2px; done above now */

    text-shadow: 1px 1px 0px #FFF;
    color: #000;
    border-radius: 50%;
    border: 0px solid #E0FFE4;
    cursor: pointer;
    text-align: center;
    background-color: #fff;
    background-size: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    box-shadow: 2px 2px 2px 0px #6F6F6F;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.11);
    overflow: visible;
    /* DO show text outside of circle */
}
#home .toolbar-option2.selected,
#home .toolbar-option.selected,
#home .toolbar-item.selected {
    background-color: #fff;
    color: transparent;
    /* kludgey */

    Xtext-shadow: #000 0.1em 0.1em 0.2em;
    Xtext-shadow: #fff 0.0em 0.0em 0.2em;
    text-shadow: 1px 1px 0px #FFF;
    border-color: #fff;
    Xbox-shadow: 0px 0px 24px 2px #FFF;
    /* OLD box-shadow: 0px 0px 1px 5px #FFF !important; */

    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    Xoutline: 2px solid rgba(239, 239, 239, 0.86);
    Xborder-radius: 0;
    overflow: visible;
    color: #000;
    font-weight: bold;
    z-index: 100;
}

/* #home .toolbar-option.sg-tbon-value { text-shadow: 1px 1px 0px #AAEEFF; }
#home .toolbar-option.sg-tbon-color { text-shadow: 1px 1px 0px #E5E56D; }
#home .toolbar-option.sg-tbon-label { text-shadow: 1px 1px 0px #C3C3C3; }
 */
#home .toolbar-button-right {
    position: absolute;
    z-index: 999;
    /* right:0px; newlook */

    left: 0px;
    margin-top: 4px;
    top: 0px;
}
#opener-opener {
    /* margin-left:76px; dynamic */

    margin-right: 6px;
    Xopacity: 0.5;
    X-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    background-image: none;
}
#home .control {
    position: absolute;
    /* old 1p
	background-color:white;
	background-color:#E0FFE4;
	background-color:transparent;
	background-color: rgba(224, 255, 228, 0.29); */

    right: 0px;
    display: none;
    /* bc i dont think we can leave on like this */
    /* newlook */

    float: left !important;
    margin-left: 0px !important;
    margin-top: 0px !important;
    margin-right: 0px !important;
    position: static !important;
    left: auto !important;
    background-color: transparent;
    /* background-color: rgba(145, 205, 227, 0.29);
	 border: 2px solid #1E99C6;
	border: 2px solid rgba(30, 153, 198, 0.69); */

    border: 2px solid transparent;
}
#home .control.clonemeone-opener {
    background-color: #ea91d9;
    background-color: rgba(234, 145, 217, 0.35);
    border: 2px solid #c81eae;
    border: 2px solid rgba(200, 30, 174, 0.69);
}

#home #sg-tb-part-1,
#home #sg-tb-part-2 {
    /* margin-top:5px;  trimup */
    /* no box-shadow: 0px 0px 2px 2px #FFF; */

    /* margin-bottom: 16px; */
    /* height: 70px; / * hover over for scroll better if higher */

    /* margin: 6px 0 4px 0; bad */
}
#home #head,
#home #headc #head #topbar,
#home .control {
    transition: opacity 1s;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    height: 0px;
}
#home #headc.on #head #topbar,
#home #headc.on #head {
    Xopacity: 0.8;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    Xmin-height: 51px;
    height: auto;
    z-index: 999991 !important;
    /* new look * /
	background-image: url("http://www.1-pagers.com/app3/backs/speedgui/SgData/speedgui~00000141289529889744.png"); */
}
#home #headc.on #profile-img-32 {
    /* right:37px; newlook */
    /* left:37px; dynamic */
}
#home #headc #head-closer {
    display: none;
    font-size: 13px;
    line-height: 26px;
    background-image: url('images/close6.png');
}
#home #headc.on #head-closer {
    display: inline-block;
}
#home #opener-opener.on,
#home .control.on {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    display: inline-block;
    /* bc i dont think we can leave on like this */

    Xz-index: 999995;
    /* imp bc must be above topbar guy - not anymore - needed top dls? no, hidden by actionbar actually */
    /*-webkit-transform: translate3d(0, 0, 0); / * terrible hack to put into different z plane */

    background-image: url(images/dot6.png);
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
#home #opener-opener.on > .opener-overlay,
#home .control.on > .opener-overlay {
    width: 100%;
    height: 100%;
    margin-left: -2px;
    margin-top: -2px;
    background-color: #74ce9c;
    background-color: #74ce9c4a;
    border-radius: 50%;
    border: 2px solid #c3ffcc;
    border: 2px solid #c3ffcced;
    transform-origin: 50% 50%;
    animation: spin 4s infinite linear;
    transition: all 0.5s ease-out;
}
#home .control.active {
    /* display: none; dont hide active opener anymore */
    /* opacity:1; */

    /* background-image: none; */
}
#home .control-opener.active > .opener-overlay {
    animation: none;
    /* border-radius: 0;
    position: absolute; */
}
#home .sg-panelw100 .control.active > .opener-overlay {
    /* position: fixed; takes it out of the parent div and 100% makes huge */
    left: 0;
}
#home .controlbar-buttons {
    z-index: 999990; /* should always be seen to click on */
	height:auto;
}
#home .controlbar-buttons.active,
#home .control.active {
    z-index: 999995; /* should always be seen if active */
	opacity: 1;
}
#home .control.bottom {
    bottom: 0px;
}
#home .control.top {
    /* for now */

    visibility: hidden;
}
#home #panel-addnew {
    position: absolute;
    Xdisplay: none;
    right: 1px;
    xfloat: right;
    Xbackground: url('images/panel-addnew-32x32.png') no-repeat center center transparent;
    Xmargin: 20px 20px 0px 0px;
    margin: 0px;
    Xoutline: 1px solid red;
    color: white;
    top: 40px;
    display: none !important;
    /* temporary */
}
#first,
#op2c {
    Xheight: 0px;
    transition: all .5s ease-out;
    background-color: #efe;
    overflow: hidden;
}
#home .sg-control {
    display: inline-block;
    Xtext-align: center;
    text-align: left;
    height: 0px;
    width: 100%;
    Xpadding: 4px 1%;
    /* 1% for sg */

    background-color: transparent;
    /* background-color: #E5FEE5;
    Xbackground-color: #f0f0f0;
    background-color: rgba(0, 255, 0, 0.1);
    Xbackground-color: red !important;
    xtransition: all .5s ease-out; */
    overflow: hidden;
    /* workaround */

    /* padding-top: 2px;  no */
    /* trimup */
}

/* .sg-hide,
.container.sg-hide {
	display:none !important;
}
*/
#home .wrapper {
    /* height:1000%; / * td: temporary */

    Xopacity: 0.4;
    X-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    background-color: transparent;
    /*
	  This fixes a Google Chrome PC bug, introduced on or around
	  version 37.0.2062.102 m.  Some composited rendered blocks
	  were not being drawn. Quick fix was to make wrapper composited.
	  Probable not best/final solution.
	  Note, this makes an element an offsetParent, so use with caution.

	  Update: version 37 on mobile also changed text zoom to 2.5 (instead of 500%)
	  Update: bug also happens on mobile
	  Update:

	-webkit-transform:translateZ(0);
	*/
}
#home .wrapper div#headc {
    /* position:fixed !important; */

    top: 0px !important;
    z-index: 999991 !important;
    width: 100%;
    /* !important; */

    height: 0px;
    /* imp! */
    /* new look */

    position: static;
}
#home .sg-1p-icon {
    margin: 10px;
}
#home .sg-1p-actions a {
    color: #333;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 4px 10px;
}
#home #op-controlc {
    z-index: 3;
    /* keep below dots, even on top one (since should be sliding down anyway) */

    position: relative;
    padding-bottom: 51px;
    /* this is to allow room for scrollbars, margin-bottom didnt work dkw */

    position: fixed;
    top: 0px;
    /* top, not bottom. auto messes with cp pos calc */

    left: 0px;
    z-index: 999994;
    position: absolute;
    text-align: center;
    overflow: visible;
    width: 98%; 
    margin-left: 0px; /* imp, was 0.5% */
    max-width: 800px; /* experiment 410px; was 780px;, 759px; */
}
#home #op-controlc > .sg-close {
    height: 25px;
    width: 25px;
    position: absolute;
    background-color: #74cf7f;
    z-index: 9999999;
    left: -23px;
    top: -23px;
    border-radius: 50%;
    background-image: url('images/close6.png');
    background-size: cover;
    /*	border: 4px solid rgba(224, 246, 255, 0.41); */

    border: 4px solid transparent;
    cursor: pointer;
}

/* #home #op-controlc:before */
#home #op-controlc-before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    /* right: 24px; */

    left: 39px;
    left: 90%;
    top: -80px;
    border-style: solid;
    /* border-width: 0px 12px 60px 36px; */
    border-width: 0px 0px 60px 60px;
    /* 1p green */

    border-color: #59bc67f7;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #59bc67f7;
    /* 1p blue
	border-color: transparent transparent #6EBEC5 transparent;
	border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(79, 176, 185, 0.82) rgba(0, 0, 0, 0); */
    /* border-color: transparent transparent #4FB0B9 transparent; */
}
#home #op-controlc:after {
    content: ' ';
    position: absolute;
    width: 30;
    height: 30;
    left: 0px;
    top: 0px;
}
#home #op-controlc.stick-to-bottom {
    /*position:fixed;
	bottom:0px;*/

    z-index: 9999999993;
}
#home #op-controlsg {
    position: relative;
    top: -98%;
    left: 0px;
    /* width: 98%; its a sg-panel now */

    height: 96%;
    background-color: #F5F5F5;
    Xdisplay: inline-block;
    display: none;
    z-index: 2;
    height: 46%;
    text-align: right;
    padding-left: 25px;
    margin-right: -25px;
}
.sg-cp-offscreen {
    left: -99999px !important;
}
.sg-panel {
    padding-top: 0px;
    background-color: transparent;
    padding-bottom: 0px;
    overflow: visible;
}
.static {
    z-index: 99;
}
#home #op0c.container > #op0.sg-pan {
    height: 51px !important;
}
.columnok {
    width: 50%;
    float: left;
    min-width: 320px;
}
.sg-collection > .sg-1p-content {
    Xwidth: 23%;
    Xmax-height: 170px;
    margin: 1%;
    Xmin-width: 200px;
    Xmin-height: 170px;
}
.sg-collection > .sg-1p-content > .sg-container {
    outline: 1px solid black;
    overflow: auto;
}
.sg-container > .sg-data {
    outline: 1px solid gray;
}

/*
.sg-level-0 { zoom:100%; }
.sg-level-1 { zoom:80%; }
.sg-level-2 { zoom:80%; }
.sg-level-3 { zoom:80%; }
.sg-level-4 { zoom:80%; }
.sg-level-5 { zoom:80%; }
.sg-icon img {
	max-width:100px;
	max-height:100px;
}

.sg-div  {
	display:inline-block;
	vertical-align:top;
	text-align:center;
}
*/

/*** sg ***/
.sg-outer,
.sg-placeholder {
    display: inline-block;
    vertical-align: top;
    Xbackground: rgba(72, 202, 72, 0.08);
}

/*** TODO: take out of here and put in sg3render rules */
/* .sg-readonly > .sg-field > .sg-overflowcontainer > .sg-selectitem, why was this included? */
.sg-readonly > .sg-field > .sg-overflowcontainer > .sg-datalinkspacer,
.sg-overflowcontainernot > .sg-datalinkspacer {
    display: none;
}
.sg-readonly > .sg-field > .sg-overflowcontainer > .sg-selectitem.sg-selected {
    display: inline-block;
}

#home .sg-readonly > .sg-field > .sg-isafield > .sg-field > .sg-fieldback > .sg-fieldbackinner > .sg-up,
#home .sg-readonly > .sg-field > .sg-isafield > .sg-field > .sg-fieldicon > .sg-fieldiconinner > .sg-up {
    display: none;
}
.sg-placeholder {
    Xbackground-color: transparent !important;
    Xbackground-color: rgba(240, 240, 240, 0.5) !important;
    /* outline: 1px dashed #ddd !important; ugly! */
    /*border-radius:none !important;*/
    /*display:none;*/

    Xbackground-color: #ffe !important;
    Xbackground-color: rgba(255, 255, 170, 0.33) !important;
    /*min-height:2px;
	min-width:2px;*/

    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;

    /* opacity: 0.2;  For now, dont do this.  sg-container can be sg-placeholder (should it tho?) and it doesnt close the div. working on that)
}
.sg-placeholder > .sg-filter {
    position: relative;
    z-index: 9999;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.sg-closer,
.sg-fieldtextarea {
    display: none;
}
#sg-popup {
    position: absolute;
    top: 0px;
    Xvisibility: hidden;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10%;
    width: 80%;
    Xheight: 80%;
    margin-left: 25%;
    margin-right: 25%;
    width: 50%;
    height: auto;
    background: white;
    background: transparent;
    /*	transition: all .3s ease-in;
	-webkit-transition: all .3s ease-in;
	transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	transform: scale3d(0,0,1);
	-webkit-transform: scale3d(0,0,1);
*/
}
.controlbar-buttons {
    position: relative;
    /* z-index:990988; / * imp used to be 4, 99 puts above screen (90)  - NO, only actives now - */

    z-index: 4;
    /* its BACK, needs to be over sg-outer et al  */

    height: 0px;
    /* collapse imp */

    Xmargin-top: -11px;
    /* NO - gives height, we wanta collapsed */

    background-color: transparent;
    /* we are back to having a height (in index) */
}
#home .sg-level-1-c > .controlbar-buttons,
#home .sg-outer[sg-popuplevel] > .controlbar-buttons {
    margin-top: 0px;
    /*	left:0px;
	position:absolute; */
}

/*
#home .sg-level-1-c > .controlbar-buttons,
#home .sg-outer[sg-popuplevel] > .controlbar-buttons {
	left:auto;
	right:0px;
}
*/
#home .sg-level-1-c > .controlbar-buttons > .control,
#home .sg-level-1 > .controlbar-buttons > .control,
#home .sg-outer[sg-popuplevel] > .controlbar-buttons > .control {
    Xborder-color: #69CD69;
    /* old 1p background-color: #69CD69;
	background-color: rgba(105, 205, 105, 0.50); */

    margin-top: 0px !important;
    background-color: #91e3ac;
    background-color: rgba(145, 205, 227, 0.50);
}
#home .sg-level-1-c > .controlbar-buttons > .control.clonemeone-opener,
#home .sg-level-1 > .controlbar-buttons > .control.clonemeone-opener,
#home .sg-outer[sg-popuplevel] > .controlbar-buttons > .control.clonemeone-opener {
    background-color: #ea91d9;
    Xbackground-color: rgba(234, 145, 217, 0.35);
    border: 2px solid #c81eae;
    border: 2px solid rgba(200, 30, 174, 0.50);
}
#home .sg-level-1-c > .sg-pan > .sg-outer > .sg-actionbar,
#home .sg-outer[sg-popuplevel] > .sg-actionbar {
    position: absolute;
    top: 0px;
}
#home .sg-outer[sg-popuplevel] .controlbar-buttons {
    margin-left: 1px;
}
#wait {
    /* from fs */

    z-index: 999999;
    display: block;
}
.op-foot {
    position: fixed;
    bottom: 0px;
    /* TODO: this is no good */

    width: 100%;
    text-align: center;
    font-size: 13px;
    color: #5ADA28;
    margin: 8px 0px 4px 0px;
}
.op-foot a {
    vertical-align: bottom;
}
.op-foot img {
    height: 16px;
}
.op-bottom-spacer {
    margin: 0px;
    padding: 0px 0px 200px 0px;
}

/* warning: this is a tricky redefine!! */

/* plaintext normally show fieldtext */

/* also, sg-hidetext falls here */
.sg-isafield.sg-editable > .sg-field {
    /* display:table; zoom all messed up on IE */

    display: inline-block;
}
.sg-isafield > .sg-field.sg-plaintext > .sg-fieldtext {
    /* display:table-cell; parent, should be table right? */

    display: table;
    /* zoom all messed up on IE, trying again */
    /* display:inline-block; */
}

/* a level below the too roundeds need to valign */
.sg-toorounded > .sg-field > .sg-isafield > .sg-field.sg-plaintext > .sg-fieldtext {
    display: table;
    /* exception to rule, ok on IE */

    table-layout: fixed;
    cursor: pointer;
}
.sg-isafield > .sg-field.sg-plaintext > form,
.sg-isafield > .sg-field.sg-plaintext > form > .sg-fieldtextarea {
    display: none;
}

/* plaintext EDITABLE switch around */
.sg-isafield.sg-editable > .sg-field.sg-text > .sg-fieldtext,
.sg-isafield.sg-editable > .sg-field.sg-plaintext > .sg-fieldtext {
    display: none;
}
.sg-isafield.sg-editable > .sg-field.sg-text > form,
.sg-isafield.sg-editable > .sg-field.sg-plaintext > form {
    /* display:table-cell; zoom all messed up on IE */
    /* display:inline-block; */

    width: 100%;
    height: 100%;
    display: table;
    table-layout: fixed;
    cursor: pointer;
}
.sg-isafield.sg-editable > .sg-field.sg-text > form > .sg-fieldtextarea,
.sg-isafield > .sg-field.sg-plaintext > form > .sg-fieldtextarea {
    /* display:inline-block; */

    display: table-cell;
    vertical-align: middle;
    overflow: auto;
    cursor: text;
}
.sg-isafield.sg-editable > .sg-field.sg-text.sg-singleline > form > .sg-fieldtextarea,
.sg-isafield > .sg-field.sg-plaintext.sg-singleline > form > .sg-fieldtextarea {
    white-space: nowrap;
}

/* richtext EDITABLE keep same, but some minor formatting*/

/* .sg-isafield.sg-editable > .sg-field.sg-richtext > .sg-fieldtext {
	font-size:18px;
	color:#373737;
}
*/
.sg-isafield.sg-editable > .sg-field.sg-text.sg-multiline,
.sg-isafield > .sg-field.sg-plaintext.sg-multiline {
    overflow: auto !important;
}

/*  Rendering engine wants to hide text
Order imp
*/
.sg-isafield > .sg-field.sg-hidetext > .sg-fieldtext {
    display: none !important;
    /* needed to override inline */
}

/* moved to blog custom css, messes with popups badly
#home .sg-outer[sg-defaultaction]:hover { opacity:0.80; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } */

/* devices dont like hover */
@media only screen and (min-width: 1025px) {
    #home .sg-outer[sg-defaultaction] {
        /* opacity:0.99; / * worry: what if they had 1?  yep - it happened*/
    }
    /* #home .control:hover {
		opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	} */

    #home .toolbar-option:hover {
        opacity: 0.75 !important;
        color: black;
        transform: translateY(-3px);
    }

    #home .toolbar-option.selected:hover {
        opacity: 1 !important;
        color: black;
        transform: none;
    }

    .sg-actionbar > * > div:hover {
        Xbackground-color: #d8d8d8 !important;
        Xbackground-color: rgba(205, 205, 205, 0.55) !important;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    #home #sg-addnew:hover {
        text-decoration: underline;
    }

    .hovered {
        transform: scale(1.1);
        margin: 3% 0;
    }

    .hovered > .sg-panelw100 {
        Xtransform: scale(.83333);
    }

    .nothovered {
        XX-webkit-filter: blur(0.3px) saturate(0.5) brightness(0.8);
        ;
        X-webkit-filter: opacity(0.5);
        transform: scale(0.8);
    }

    #home .toolbar-part:hover,
    #home #sg-option-wrapper:hover {
        margin-bottom: 0px !important;
        overflow-x: auto;
    }
}

/*@media only screen and (max-width < 1025px) {
	.hovered {
		transform: none;
		margin:3% 0;
	}
	.nothovered {
		X-webkit-filter: blur(0.3px) saturate(0.5) brightness(0.8);;
		-webkit-filter: opacity(0.5);
		transform: none;
	}
	#home #sg-option-wrapper {
		overflow-x:auto;
	}
} */
.sg-actionbar {
    position: relative;
    width: 100%;
    line-height: 0;
    /* imp */
}
.sg-actionbar > * > div {
    border-radius: 50%;
}
.sg-actionbar > .sg-actionbarleft {
    Xborder-bottom-right-radius: 30%;
}
.sg-actionbar > .sg-actionbarright {
    Xborder-bottom-left-radius: 30%;
}
.sg-actionbar > * {
    background-color: rgba(0, 0, 0, 0.05);
}
.sg-icon {
    /* float:left !important; / *********** was temporary **********/
}
#home #sg-apphome {
    font-size: 13px;
    line-height: 26px;
    background-image: url('images/config6.png');
}
.sg-outer[sg-defaultaction] {
    cursor: pointer;
}
.sg-outer[sg-defaultaction="new"] > .sg-actionbar > .sg-maximizer,
.sg-outer[sg-defaultaction="maximize"] > .sg-actionbar > .sg-maximizer,
.sg-outer[sg-defaultaction="app"] > .sg-actionbar > .sg-launcher {
    display: none;
}
#sg-greenbarw {
    display: none;
    position: absolute;
    Xbackground-color: #71D642;
    Xbackground-color: #8adbc0;
    Xbackground-color: rgba(180, 227, 145, 0.69);
    Xbackground-color: #7BBD4A;
    Xbackground-color: #206d00;
    Xbackground-color: #78A5C3;
    background-color: #006897;
    background-color: rgba(126, 253, 251, 0.4);
    width: 200px;
    height: 16px;
    z-index: 999991;
    Xopacity: 0.81;
    X-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=81)";
    Xbox-shadow: 0px 0px 2px 2px #FFF;
    Xbox-shadow: 0px 0px 6px 4px rgba(255, 255, 255, 0.7);
    box-shadow: none;
    Xborder: 4px solid #006897;
    Xborder: 4px solid rgba(0, 104, 151, 0.7);
    Xborder-right-width: 0px;
    border: 0px;
    margin-left: 0.5%;
    transition: opacity .5s ease-out;
    border-top-left-radius: 16px;
}
#sg-greenbarh {
    display: none;
    position: absolute;
    Xbackground-color: #71D642;
    Xbackground-color: #8adbc0;
    Xbackground-color: rgba(180, 227, 145, 0.69);
    Xbackground-color: #7BBD4A;
    Xbackground-color: #206d00;
    Xbackground-color: #78A5C3;
    background-color: #006897;
    background-color: rgba(126, 253, 251, 0.4);
    width: 16px;
    height: 100%;
    z-index: 999994;
    top: 0px;
    Xopacity: 0.81;
    X-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=81)";
    Xbox-shadow: 0px 3px 2px 2px #FFF;
    Xbox-shadow: -1px 8px 6px 4px rgba(255, 255, 255, 0.7);
    box-shadow: none;
    Xborder: 4px solid #006897;
    Xborder: 4px solid rgba(0, 104, 151, 0.7);
    Xborder-top-width: 0px;
    Xborder-bottom-width: 0px;
    border: 0px;
    margin-left: 0.5%;
    transition: opacity .5s ease-out;
}

/* to ensure old css compatability * /
#home .sg-cs-none.sg-outer[sg-popuplevel="1"],
#home .sg-cs-none.sg-outer[sg-popuplevel="2"],
#home .sg-cs-none.sg-outer[sg-popuplevel="3"],
#home .sg-cs-none.sg-outer[sg-popuplevel="4"],
#home .sg-cs-none.sg-outer[sg-popuplevel="5"],
#home .sg-cs-none.sg-outer[sg-popuplevel="6"],
#home .sg-cs-none.sg-outer[sg-popuplevel="7"],
#home .sg-cs-none.sg-outer[sg-popuplevel="8"],
#home .sg-cs-none.sg-outer[sg-popuplevel="9"],
#home .sg-cs-none.sg-outer[sg-popuplevel="10"]
*/

/* to ensure old css compatability */
#home .sg-outer[sg-popuplevel="1"],
#home .sg-outer[sg-popuplevel="2"],
#home .sg-outer[sg-popuplevel="3"],
#home .sg-outer[sg-popuplevel="4"],
#home .sg-outer[sg-popuplevel="5"],
#home .sg-outer[sg-popuplevel="6"],
#home .sg-outer[sg-popuplevel="7"],
#home .sg-outer[sg-popuplevel="8"],
#home .sg-outer[sg-popuplevel="9"],
#home .sg-outer[sg-popuplevel="10"] {
    /*background-color:#ddd !important;
	background-color: rgba(245, 245, 245, 0.95) !important;*/
    /* background-color: #fff !important; / * TOTAL KLUDGE but necc */
    /*  oldbackground-color: rgba(221, 221, 221, 0.95) !important; */
    /* transition: opacity 2s ease; JQUERY better, no plane issues */
    /* box-shadow: 0px 1px 2px 2px rgba(0, 0, 0, 0.15); */

    box-shadow: 0px 0.5px 1px 0.5px #aaa !important;
    box-shadow: 0px 0.5px 1px 0.5px rgba(170, 170, 170, .50) !important;
    /* thin line test
	box-shadow: 0px 0px 0.2px 0.2px rgba(5, 0, 0, 0.21) !important;
	*/

    background-color: #fff;
    /* this is ok. app img could overlay */
}
#home .sg-outer[sg-popuplevel="2"] {
    transition: transform .5s ease-out;
}

/*
#topbar, #profile-img-32-opener {
	display:none !important;
}
*/

/* anything ABOVE ipad portrait */
@media only screen and (min-width: 769px) {
    .controlbar-buttons {
        /* override some sg-pan stuff */
        /* width: 50px; / * TODO: MUST be moved to home */
        margin-right: 0;
    }
}

/* ipad landscape and below */
@media only screen and (max-width: 1024px) {
    .sg-plugininner {
        Xzoom: 85%;
    }
    /* 	#home #sg-tb-speedgui {
		display: none !important;
	}
 */
}

/* smartphone and below */
@media only screen and (max-width: 649px) {
    .sg-plugininner {
        Xzoom: 60%;
    }
}

/* cellphone and below */
@media only screen and (max-width: 320px) {
    .sg-plugininner {
        Xzoom: 35%;
    }
}
#home .toolbar-part {
    overflow-x: hidden;
    overflow-y: hidden;
}

#home .toolbar-option-separator {
    /*
	color: #FFF;
	background-color: #eee;
	background-color: rgba(255, 255, 255, 0.31);

	background-color: #2F2F2F;
	background-color: rgba(0, 0, 0, 0.50);

	color: #3D3D3D;
	background-color: #FFF;
	background-color: rgba(255, 255, 255, 0.75);
	*/

    color: #FFF;
    Xbackground-color: #888484;
    Xbackground-color: rgba(255, 255, 255, 0.3);
    background-color: transparent;
    cursor: pointer;
}
.sg-outer[data-sg-reloadable="1"]/* > .sg-overlayouter  */
> .sg-overlay,
/* tagged for reloading */
.sg-outer[data-sg-reloadable="50"]/* > .sg-overlayouter  */
> .sg-overlay,
/* image resetting */
.sg-outer[data-sg-reloadable="100"]/* > .sg-overlayouter  */
> .sg-overlay/* going to be tagged */
{
    /* display:block; */
}

/*
.sg-overlayouter {
	position:relative;
	width: 100%;
	height: 100%;
}
*/
.sg-overlay {
    Xdisplay: none;
    /* position: absolute; */

    position: relative;
    background: url(images/wait4.gif) no-repeat center center transparent;
    Xbackground-color: rgba(135, 255, 97, 0.24);
    Xbackground-color: rgba(255, 255, 255, 0.24);
    background-color: rgba(135, 255, 97, 0.50);
    z-index: 99;
    /* no longer needed? causes problems btw  NEEDED NOW  - well 99 seems better than 999999999999999 */

    background-size: contain;
    width: 100%;
    height: 100%;
    /* green waves - too fast
	background-image: url(http://33.media.tumblr.com/a008a56dcafcf072936545a332bc7bfc/tumblr_ni6vvsmWWz1r2geqjo1_500.gif);
	*/
    /* electrons - no
	background-image: url(http://38.media.tumblr.com/1c104e822d2fcd69ffdc371907b39ff0/tumblr_mrsjwox3jJ1r2geqjo1_500.gif);
	*/
    /* graph paper * /
	opacity:0.1;
	background-size: contain;
	background-repeat:repeat;
	background-image: url(http://nosmoke.cycle-it.com/wp-content/uploads/2013/04/ScrollingTiles.gif); */
    /* bulging circles * /
	opacity: 0.1;
	background-size: cover;
	background-repeat: repeat;
	background-image: url(http://31.media.tumblr.com/ba237c32bec4018693e06b3bb443490e/tumblr_n70t6vfHv21r2geqjo1_500.gif); */
    /* ani hexes */

    opacity: 0.1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    background-size: contain;
    background-repeat: repeat;
    /* background-image: url(http://jmhz.net/wp-content/uploads/2013/08/Bees-Not_bombs-Hexagons_pulsin.gif); */

    background-image: url(images/Bees-Not_bombs-Hexagons_pulsin.gif);
}
.sg-overlayinner {
    display: none;
}
.sg-overlay[sg-reloadcode="1"] > .sg-overlayinner {
    display: block;
    background-image: url(images/wait4.gif);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

/*
::-webkit-scrollbar              { background-color:transparent; }
::-webkit-scrollbar-button       { background-color:transparent; }
::-webkit-scrollbar-track        { background-color:transparent; }
::-webkit-scrollbar-track-piece  { background-color:transparent; }
::-webkit-scrollbar-thumb        { background-color:transparent; }
::-webkit-scrollbar-corner       { background-color:transparent; }
::-webkit-resizer                { background-color:transparent; }
*/
.sg-container {
    text-align: left;
}
/* TODO: prob shouldnt need */
.sg-outer,
.sg-outer > .sg-field {
    text-align: left;
}
.sg-isacollection > .sg-field {
    text-align: left;
    /* because now we expand a lot */
    /* if center is needed, maybe a more specific selector */
}

/*.sg-outer, .sg-outer > .sg-field.sg-image { text-align:center; }*/
.controlbar-buttons {
    float: left;
	opacity: 0.5;
}
.toolbar-secret-field > .speedgui {
    -o-transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
    /* not sure display:none; */
    /* background:#f0f !important; */
}

/* since this can be added dynamically, needs to span parent entirely */
.speedgui {
    width: 100%;
    height: auto; /* was 100%, but then we lost scrolling, then too short if scrolling enabled, etc. */
    /* outsides need this! - the CP sgdata bug */

    overflow: hidden;
    font-size: 16px;
    font-weight: normal;
}

/* hmmm.. */
#home .toolbar-item.selected2 .speedgui {
    overflow: visible;
}

/*  TODO: worry - what is this?
.sg-container:after {
content: ' ';
background:blue;
position:relative;
left:0px;
top:0px;
width:100%;
height:100%;
}
 */
#sg-iframe-error {
    height: 500px;
    position: fixed;
    top: 0px;
    z-index: 999999999999999;
    background-color: #FFF;
    width: 100%;
    left: 0%;
}

/* TEMPORARY */
#home .toolbar-item#sg-tb-helptext,
#home .toolbar-item#sg-tb-suggest,
#home .toolbar-item.sg-tb-spacer,
#home .toolbar-item#sg-tb-summary {
    visibility: hidden;
}

/*
.mce-menu {
    background: #CFCFCF !important;
}

/ * this goes on my elems * /
.mce-edit-focus {
    outline: 0px dotted #333 !important;
    / * zoom problems anyway * /
}
span.mce-edit-focus {
    / * background-color: rgba(0, 255, 23, 0.14) !important; * /
}
*/
#home .sg-field.sg-richtext {
    /* background-color: rgba(255, 255, 255, 0.64); */

    background-color: rgba(255, 255, 255, 0.90);
}
/*
#home .sg-field.sg-richtext .mce-edit-focus {
    outline: 1px dotted #333 !important;
    / * zoom problems anyway * /
    / *background-color:white;* /
}
*/
#home .sg-field.sg-richtext img {
    max-width: 100%;
    height: auto;
    /* just for now */

    width: 48%;
    max-width: 48%;
    height: auto;
    float: left !important;
    margin: 1%;
}
#home .sg-field.sg-richtext img:first {
    width: 100%;
    max-width: 100%;
}
#home .sg-field.sg-richtext a {
    padding: 0px 4px !important;
}
/*
.mce-content-body,
.mce-edit-focus {
    cursor: text !important;
}
.mce-panel,
.mce-tinymce-inline {
    z-index: 99999999999965535 !important;
}
.mce-item-table,
.mce-item-table td,
.mce-item-table th,
.mce-item-table caption {
    border: 0px !important;
}

/ * #sg-mce-inline-toolbar * /
.mce-tinymce-inline {
    position: fixed !important;
    top: 0px !important;
    right: 0px !important;
    left: auto !important;
    z-index: 99999999999965535 !important;
    / *left:50%;
	width:100%;
	text-align:center;* /
}
*/
.sg-highlighted {
    background-color: #DCFFDF !important;
    background-color: rgba(0, 255, 23, 0.14) !important;
    /* new , more white*/

    background-color: rgba(168, 255, 176, 0.14) !important;
}
#home .sg-outlined,
#home .sg-container.sg-outlined > .sg-pan {
    Xoutline: 1px dotted #4AAEB7;
    outline: 1px solid #4AAEB7;
}
#home .sg-highlightedstrong {
    background-color: #4AAEB7 !important;
    background-color: rgba(74, 174, 183, 0.49) !important;
}

/* which outer is picked by code */
#home .sg-container.sg-highlightedstrong > .sg-pan {
    background-color: #4AAEB7 !important;
    background-color: rgba(74, 174, 183, 0.49) !important;
}
#home .sg-container.sg-highlightedstrong > .sg-filter {
    opacity: 0.7;
}
#home .sg-outlinedred,
#home .sg-container.sg-outlinedred > .sg-pan {
    outline: 1px solid red;
}
#home .sg-highlightedstrongred {
    background-color: red !important;
}

/* which outer is picked by code */
#home .sg-container.sg-highlightedstrongred > .sg-pan {
    background-color: red !important;
}
#home .sg-container.sg-highlightedstrongred > .sg-filter {
    opacity: 0.7;
}
#home .sg-container.sg-bottomgreen:after {
    content: ' ';
    width: 100%;
    height: 20px;
    background-color: #9AE09A;
    outline: 1px dotted #4AAEB7;
}
@media only screen and (max-width: 640px) {
    /*.mce-panel {*/
    /* NB!! These are terrible! */
    /*
    .mce-container[aria-label="Insert link"] {
        zoom: .77 !important;
    }

    .mce-container[aria-label="Insert/edit image"] {
        zoom: .77 !important;
    }

    .mce-container[aria-label="Your files"] {
        left: 0px !important;
    }

    .mce-tinymce-inline {
        zoom: .65 !important;
        left: 0px !important;
    }
    */
    /* end */
}

/* a test of effects */
.sg-icon,
.sg-label {
    /* position:relative; not necc since filter now before all others */
}
.sg-filter {
    /* content: ' '; */

    display: block;
    left: 0px;
    top: 0px;
    Xwidth: 100%;
    /* position:relative; not necc since filter now before all others */

    overflow: hidden;
}
.sg-filter.sg-panel {
    /* panelw100 gets cs color */

    background-color: transparent !important;
    /* TODO: separate layout from style in pan css */
}
.sg-filterimg {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background-position: center 20%;
    background-repeat: no-repeat;
}
.sg-filtervid {
    width: 100%;
    height: 100%;
    text-align: center;
}
.sg-filterover {
    width: 100%;
    height: 100%;
    position: relative;
    /* top:-100%; */
}
.sg-filter.sg-filterblackshade > .sg-filterimg > .sg-filtervid > .sg-filterover {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.10));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr=#00000000, endColorstr=#1A000000,GradientType=0)";
}
html.ie9 .sg-filter.sg-filterblackshade > .sg-filterimg > .sg-filtervid > .sg-filterover {
    background-color: black;
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}
.sg-filter.sg-filterblackshademore > .sg-filterimg > .sg-filtervid > .sg-filterover {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr=#00000000, endColorstr=#8D000000,GradientType=0)";
}
html.ie9 .sg-filter.sg-filterblackshademore > .sg-filterimg > .sg-filtervid > .sg-filterover {
    background-color: black;
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}
.sg-filter.sg-filterslightestblackglass > .sg-filterimg > .sg-filtervid > .sg-filterover {
    background-color: black;
    opacity: 0.1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
}
.sg-filter.sg-filterslightblackglass > .sg-filterimg > .sg-filtervid > .sg-filterover {
    background-color: black;
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}
.sg-filter.sg-filterblackglass > .sg-filterimg > .sg-filtervid > .sg-filterover {
    background-color: black;
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}
.sg-filter.sg-filterdark > .sg-filterimg > .sg-filtervid > .sg-filterover {
    background-color: black;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.sg-filter.sg-filterwhiteshade > .sg-filterimg > .sg-filtervid > .sg-filterover {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.10));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr=#00FFFFFF, endColorstr=#1AFFFFFF,GradientType=0)";
}
html.ie9 .sg-filter.sg-filterwhiteshade > .sg-filterimg > .sg-filtervid > .sg-filterover {
    background-color: white;
    opacity: 0.1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
}
.sg-filter.sg-filterwhiteshademore > .sg-filterimg > .sg-filtervid > .sg-filterover {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr=#00FFFFFF, endColorstr=#8DFFFFFF,GradientType=0)";
}
html.ie9 .sg-filter.sg-filterwhiteshademore > .sg-filterimg > .sg-filtervid > .sg-filterover {
    background-color: white;
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}
.sg-filter.sg-filterslightestfade > .sg-filterimg > .sg-filtervid > .sg-filterover {
    background-color: white;
    opacity: 0.1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
}
.sg-filter.sg-filterslightfade > .sg-filterimg > .sg-filtervid > .sg-filterover {
    background-color: white;
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}

/* legacy */
.sg-filter.sg-filterfademore > .sg-filterimg > .sg-filtervid > .sg-filterover,
.sg-filter.sg-filterfade > .sg-filterimg > .sg-filtervid > .sg-filterover {
    background-color: white;
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}
/* was 0.3 */
.sg-filter.sg-filterwhiteout > .sg-filterimg > .sg-filtervid > .sg-filterover {
    background-color: white;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

/* sg-filtershade in color-schemes css */

/* .sg-filter.sg-filtertint > .sg-filterimg > .sg-filtervid > .sg-filterover { opacity:0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; } */
.sg-filter.sg-filterslightesttint > .sg-filterimg > .sg-filtervid > .sg-filterover {
    opacity: 0.10;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
}
.sg-filter.sg-filterslighttint > .sg-filterimg > .sg-filtervid > .sg-filterover {
    opacity: 0.20;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}
.sg-filter.sg-filtertint > .sg-filterimg > .sg-filtervid > .sg-filterover {
    opacity: 0.3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
.sg-filter.sg-filterwash > .sg-filterimg > .sg-filtervid > .sg-filterover {
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.sg-filterover2,
.sg-filterover2t {
    content: ' ';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-repeat: repeat;
}
.sg-filter.sg-overfilterxcross > .sg-filterimg > .sg-filtervid > .sg-filterover2 {
    background-repeat: no-repeat;
    background-size: cover;
}

/* filter overlays * /
.sg-filter.sg-overfilterxcross > .sg-filterimg > .sg-filtervid > .sg-filterover2 {
	content:' ';
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-image: url("http://static1.1-pagers.com/images/overlays/x-cross.png");
	background-repeat: repeat;
}
.sg-filter.sg-overfilterflag > .sg-filterimg > .sg-filtervid > .sg-filterover2 {
	content:' ';
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-image: url("http://static1.1-pagers.com/images/overlays/flag.png");
	background-repeat: no-repeat;
	background-size:cover;
}
.sg-filter.sg-overfilterflag2 > .sg-filterimg > .sg-filtervid > .sg-filterover2 {
	content:' ';
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-image: url("http://static1.1-pagers.com/images/overlays/flag2.png");
	background-repeat: no-repeat;
	background-size:cover;
}
*/
.sg-container.sg-filter2blur > .sg-pan.sg-knownheight,
.sg-container.sg-filter2blurmore > .sg-pan.sg-knownheight {
    background: none !important;
}
.sg-filter.sg-filter2blur > .sg-filterimg {
    filter: blur(1px);
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    /* filter: url(blur.svg#blur); */

    filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius='1');
}
.sg-filter.sg-filter2blurmore > .sg-filterimg {
    filter: blur(2px);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    /* filter: url(blur.svg#blur); */

    filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius='2');
}
.sg-filter.sg-filter2blur > .sg-filterimg,
.sg-filter.sg-filter2blurmore > .sg-filterimg {
    height: 130% !important;
    /* bc imp elsewhere */

    width: 130% !important;
    /* bc imp elsewhere */

    top: -10%;
    left: -10%;
}

/* ie doesnt need it  (ie9+ cannot blur btw)  TODO: implement blur */
.sg-gfx-borderszoom.sg-filter2blur > .sg-filter.sg-filter2blur > .sg-filterimg,
.sg-gfx-borderszoom.sg-filter2blurmore > .sg-filter.sg-filter2blurmore > .sg-filterimg,
.sg-outer.sg-gfx-borderszoom > .sg-filter.sg-filter2blur > .sg-filterimg,
.sg-outer.sg-gfx-borderszoom > .sg-filter.sg-filter2blurmore > .sg-filterimg {
    /* reset */

    height: 100% !important;
    width: 100% !important;
    top: 0%;
    left: 0%;
}
.sg-filter.sg-filter2blur > .sg-filtervid,
.sg-filter.sg-filter2blurmore > .sg-filtervid {
    width: 84.7%;
    height: 84.7%;
}

/* layer context */

/* TODO: this method is beter, but hard to maintain */

/* .sg-level-1-c .sg-filterblackglass > .sg-pan > .sg-outer,
/ * .sg-level-1-c .sg-filterblackshade > .sg-pan > .sg-outer, doesnt use opacity * /
.sg-level-1-c .sg-filterdark > .sg-pan > .sg-outer,
/ * .sg-level-1-c .sg-filterfade > .sg-pan > .sg-outer, doesnt use opacity * /
.sg-level-1-c .sg-filterwhiteout > .sg-pan > .sg-outer,
.sg-level-1-c .sg-filtershade > .sg-pan > .sg-outer,
.sg-level-1-c .sg-filtertint > .sg-pan > .sg-outer,
.sg-level-1-c .sg-filterwash > .sg-pan > .sg-outer,
.sg-level-1-c .sg-filter2blur > .sg-pan > .sg-outer,
.sg-level-1-c .sg-filter2blurmore > .sg-pan > .sg-outer,
/ *  dupe* /
.sg-level-1-c.sg-filterblackglass > .sg-pan > .sg-outer > .sg-head,
/ * .sg-level-1-c.sg-filterblackshade > .sg-pan > .sg-outer > .sg-head, doesnt use opacity * /
.sg-level-1-c.sg-filterdark > .sg-pan > .sg-outer > .sg-head,
/ * .sg-level-1-c.sg-filterfade > .sg-pan > .sg-outer > .sg-head, doesnt use opacity * /
.sg-level-1-c.sg-filterwhiteout > .sg-pan > .sg-outer > .sg-head,
.sg-level-1-c.sg-filtershade > .sg-pan > .sg-outer > .sg-head,
.sg-level-1-c.sg-filtertint > .sg-pan > .sg-outer > .sg-head,
.sg-level-1-c.sg-filterwash > .sg-pan > .sg-outer > .sg-head,
.sg-level-1-c.sg-filter2blur > .sg-pan > .sg-outer > .sg-head,
.sg-level-1-c.sg-filter2blurmore > .sg-pan > .sg-outer > .sg-head
{
	opacity: .99;
}
*/

/* everybody except topmost container */

/* can NOT do top level, bc outer .99 covers rest of them */

/*

now 1c and 2c dont go .99 - IS THIS OK???

no, because makes badges un-clickable. ok, made .99 for sg-sticky too

*/
.sg-level-2-c .sg-container.sg-hasfilter > .sg-pan > .sg-outer,
.sg-container.sg-sticky.sg-hasfilter > .sg-pan > .sg-outer,
.sg-outer.sg-hasfilter > .sg-field,
.sg-outer.sg-hasfilter > .sg-head {
    /* put field on top of outer (and norooms subseq)*/

    opacity: .99;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
}
.sg-container.sg-hasfilter > .sg-pan > .sg-outer > .sg-head,

/*.sg-container.sg-hasfilter > .sg-pan > .sg-outer > .sg-field, / * ALL fields (to fix H inside W, level 2) ........ ok??? no, ruins popups*/
.sg-container.sg-hasfilter > .sg-pan > .sg-isafield > .sg-field,

/* .sg-container.sg-hasfilter > .sg-pan > .sg-isadatalink > .sg-field, / * because cant access scrollbar (selectable outers clickable only bc happen to have filter!)
	disaster, causes clipping from later down the page (?)
*/
.sg-container.sg-hasfilter > .sg-pan > .sg-isadatalink > .sg-field,
.sg-container.sg-hasfilter > .sg-pan > .sg-isadatalink > .sg-field > .sg-overflowcontainer,

/* new way of doing wraps    .sg-container.sg-hasfilter > .sg-pan > .sg-outer[sg-wrappos="1"] > .sg-field / * was a bug - need field too IF WRAPPING ONLY (do outer?) */
.sg-pan.sg-hasfilter.sg-wrap-lb > .sg-outer,
.sg-pan.sg-hasfilter.sg-wrap-rb > .sg-outer {
    opacity: 1; /* avoids problems with filters, with added 9s there is no perceptible bleedthrough, but entire field from behind bleeds through without 1 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/* .sg-head { / * TODO: VERY TEMPORARY!! caused problems with popups since lower elems are at VERY top of staciing * /
	opacity: .99; /*  try to not use !imp * /
}*/

/* TODO: this is temporary for demo purposes * /
.sg-container > .sg-filter { transition: height 1s ease-in; }
.sg-container > .sg-pan > .sg-outer > .sg-head > .sg-icon,
.sg-container > .sg-pan > .sg-outer > .sg-head > .sg-label
{ transition: zoom 1s ease-in; } */

/*  move to sg3-render.css if it works out */

/* working out well, now only for 'inside' wrapper */
.wrapper .sg-screen {
	background-color: #000;
	opacity: .65;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";

    z-index: 1; /* important to hide things behind it*/

    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;

}

.sg-fieldtextinner img {
    /* width: 50%;
	height: auto; */
    /* max-width:400px; */

    vertical-align: top;
}

/* .sg-overflowcontainer > .sg-outer:hover {
	transform: scale3d(1.2,1.2,1);
	z-index: 9999999999999;
	position: absolute;
} */
.sg-overflowcontainer > .sg-outer {
    vertical-align: top;
    /* middle didnt work on horiz filtered overflow objects */
}

/* menus, no margins - quick fix */
.sg-pluginmenubar > .sg-pan > .sg-outer > .sg-field > .sg-overflowcontainer > .sg-outer {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
.sg-filter > .sg-filterimg > .sg-filterborder {
    display: none;
}
.sg-filter > .sg-filterimg > .sg-filterborder.sg-hasborder {
    /* content: ' '; */

    position: absolute;
    display: block;
    border: 0px solid black;
    /* width: 100%; */

    height: 98%;
    /* lame hack, fix this  - also, ruins border top, setting that to 0px below */

    z-index: 1;
    /*
	******************* THIS WILL REQUIRE SHIM/POLYFILL - can remove now?
	*/

    box-sizing: border-box;
}
.sg-filter > .sg-filterimg > .sg-filterborder.sg-borderall {
    border-width: 1px;
}
.sg-filter > .sg-filterimg > .sg-filterborder.sg-borderbottom {
    border-bottom-width: 1px;
}
.sg-filter > .sg-filterimg > .sg-filterborder.sg-bordertop {
    border-top-width: 1px;
    height: 0px;
}
.sg-filter > .sg-filterimg > .sg-filterborder.sg-bordertop.sg-borderaddthicker {
    border-top-width: 2px;
}
.sg-filter > .sg-filterimg > .sg-filterborder.sg-borderbottom.sg-borderaddthicker {
    border-bottom-width: 2px;
}
.sg-filter > .sg-filterimg > .sg-filterborder.sg-borderall.sg-borderaddthicker {
    border-width: 2px;
}
.sg-filter > .sg-filterimg > .sg-filterborder.sg-borderaddfavicon {
    height: 10px;
    border-top-width: 1px;
    border-bottom-width: 0px;
    /* border-bottom-width: 1px; */
}
.sg-filter > .sg-filterimg > .sg-filterborder.sg-borderaddfavicon::after {
    content: ' ';
    position: absolute;
    /* border: 1px solid #000; */

    width: 100%;
    height: 16px;
    z-index: 2;
    /* box-sizing: border-box; */
    /* background-image: url(http://accessoryjane.com/favicon.ico); */

    background-image: url(/favicon.png);
    background-repeat: no-repeat;
    background-position: 50% 0px;
}
.sg-filter > .sg-filterimg > .sg-filterborder.sg-bordertop.sg-borderaddfavicon {
    top: 8px;
}
.sg-filter > .sg-filterimg > .sg-filterborder.sg-bordertop.sg-borderaddfavicon::after {
    top: -8px;
    width: 16px;
}
.sg-filter > .sg-filterimg > .sg-filterborder.sg-borderbottom.sg-borderaddfavicon {
    bottom: 0px;
}
.sg-filter > .sg-filterimg > .sg-filterborder.sg-borderbottom.sg-borderaddfavicon::after {
    bottom: 1px;
    /* set to 1 because was getting clipped (clipped now on other side??) */

    width: 16px;
}
.sg-filter > .sg-filterimg > .sg-filterborder.sg-borderaddfavicon.sg-borderaddfavicongap::after {
    background-color: #fff;
    width: 40px;
    margin-left: -20px;
}

#home .sg-labeltextinner {
    /* font-family: 'Comfortaa', serif; */
    /* font-family: 'Pacifico', serif !important; */

    font-weight: 6sg300 !important;
    display: table-cell;
    /* IE ok i think */
}
#home .sg-labeltextinnersublabel {
    /* font-family: 'Oswald', serif; */
    /* font-family: 'Pacifico', serif !important; */
    /* font-family: 'Raleway', serif !important; */

    /* font-weight: thinner !important; */
    font-weight: 400 !important;
}

/* .sg-pluginmenubar,
.sg-pluginmenubar > .sg-pan > .sg-outer > .sg-field
{
	overflow: visible !important;
}*/

/* .sg-pluginmenubar > .sg-pan > .sg-outer > .sg-field > .sg-outer:hover,
.sg-pluginmenubar > .sg-pan > .sg-outer > .sg-field > .sg-overflowcontainer > .sg-outer:hover
{
	/ * box-shadow: 0px 0px 4px 4px #FFF !important; * /
	/ *transform:scale3d(1.1,1.1,1);* /
	/ *
	transform-origin:50% 50%;
	transform:translateY(-4px); looks weird, artifacts * /
}
*/
.sg-pluginmenubar > .sg-pan > .sg-outer > .sg-field > .sg-outer.sg-cs-inverted:hover,
.sg-pluginmenubar > .sg-pan > .sg-outer > .sg-field > .sg-overflowcontainer > .sg-outer.sg-cs-inverted:hover {
    transform: none;
}

/*********** squarespace classes **********/
.text-align-center {
    text-align: center;
}

/* put at bottom */
@media only screen and (max-width: 768px) {
    #onepagers #header > a {
        display: block !important;
    }

    #home .toolbar-item.selected2 {
        /*left:0px;*/
    }

    #home #sg-tb-part-1,
    #home #sg-tb-part-2 {
        margin: 0px;
    }

	#home #sg-option-wrapper,
	#home #sg-option-container {
		margin:0px;
		padding:0px;
	}

	#home #sg-option-container {
		overflow-x: auto;
	}

	#home #sg-option-wrapper-text,
	#home #sg-option-wrapper-text-spacer
	{
		display:none;
	}

    #home .toolbar-item#sg-tb-addpanel > span,
    #home .toolbar-item#sg-tb-background > span,
    #home .toolbar-item#sg-tb-backvideo > span,
    #home .toolbar-item#sg-tb-icon > span,
    #home .toolbar-item > span {
        font-size: 20px;
        text-align: right;
    }
    /* .sg-tb-label-left {
		padding-left: 42%;
	} */

    #home .toolbar-option-separator {
        font-size: 20px;
        font-weight: bold;
    }

    #home #sg-sgdata-sublabel,
    #home #sg-sgdata-def_value {
        font-size: 12px;
        /* 8 was just too small */
    }
}
@media only screen and (max-width: 640px) {
    .signin-card .profile-img {
        width: 48px;
        height: 48px;
    }

    .signin-card #sg-plugin-login-signin-message {
        margin: 0px;
    }

    .wrapper .sg-screen2 {
        /* display:none !important; */
        opacity: 1 !important;
        -ms-filter: none !important;
    }

    .plan {
        margin: 1% 1% 6% 1% !important;
        padding: 5% 0% !important;
        width: 98%;
        float: none;
        /*margin:0 auto;*/
    }

    #home .toolbar-item#sg-tb-addpanel > span,
    #home .toolbar-item#sg-tb-background > span,
    #home .toolbar-item#sg-tb-backvideo > span,
    #home .toolbar-item#sg-tb-icon > span,
    #home .toolbar-item > span {
        width: 100%;
        font-size: 23px;
    }

    #home .toolbar-option-separator {
        font-size: 20px;
    }

    #home .sg-outer[sg-popuplevel="1"],
    #home .sg-outer[sg-popuplevel="2"],
    #home .sg-outer[sg-popuplevel="3"],
    #home .sg-outer[sg-popuplevel="4"],
    #home .sg-outer[sg-popuplevel="5"],
    #home .sg-outer[sg-popuplevel="6"],
    #home .sg-outer[sg-popuplevel="7"],
    #home .sg-outer[sg-popuplevel="8"],
    #home .sg-outer[sg-popuplevel="9"],
    #home .sg-outer[sg-popuplevel="10"] {
        /* background-image: none !important; */
    }
}
.sg-overflowcontainer.sg-slideshow {
    /* hopefully this applies well, it's primarily for animated scrollers */
    /*overflow:hidden; no,already done */

    opacity: .99;
    /* has effect of clipping */
}

/* special open up for popups on devices, don't do sg0 */
.sg-level-1 .sg-outer.sg-openupoverflow,
.sg-level-1 .sg-outer.sg-openupoverflow > .sg-field,
.sg-level-1 .sg-outer.sg-openupoverflow > .sg-field > .sg-overflowcontainer {
    height: auto !important;
}
.sg-level-1 .sg-outer.sg-openupoverflow > .sg-field {
    width: auto !important;
}
.sg-level-1 .sg-outer.sg-openupoverflow > .sg-head {
    float: none !important;
}
.sg-container.sg-isfullscreen {
    height: 100% !important;
}
.sg-level-1 .sg-outer.sg-isfullscreen {
    /* position:absolute !important; / * need to use space in all cases */
    /* margin-top:0px !important; TESTING */

    display: block !important;
    opacity: 1 !important;
}
.sg-level-1 .sg-outer.sg-showfullscreen {
    opacity: 1 !important;
    /* transition-duration:.3s !important;
	transform: translate3d(0px, 0px, 0px) !important; */
}

/* opacity popups annoyance */
.sg-opa1 {
    opacity: 1 !important;
}

/* #sg-0-field {
	transition-duration:3s;
} */
.sg-ontop {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0.97;
    /* 1p green */

    background-color: #59bc67f7;

    border-radius: 28px;
    border: 20px solid transparent;
    box-shadow: 6px 6px 2px 1px #000;
    box-shadow: 26px 26px 22px 1px rgba(0, 0, 0, 0.45);
}

/* FROM //s3.amazonaws.com/static2a.1-pagers.com/sg3-render.css */
html {
    height: 100%;
    -ms-touch-action: pan-x pan-y;
    /* disable zoom */
    /* -ms-content-zooming: none; / * ie10, not sure difference */
}

/* select, input, textarea, button { font:99% sans-serif; } */
textarea,
textarea:focus,
input:focus {
    outline: 0;
    /* font-size:100%; */
}
input[type="text"],
textarea {
    resize: none;
    outline: none;
    overflow: hidden;
    /* font-family:Arial;font-size:100%; */

    margin: 0px;
    padding: 4px 1px 1px 2px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    -moz-border-radius: 0px;
}

/* JUST FOR NOW * / WAS A BUG! - RUINED INPUT ON IOS
* {
-webkit-touch-callout:none;
-webkit-user-select:none;
-webkit-user-drag:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
*/

/* TODO: target better */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
.sg-row {
    display: table-row;
}

/* div centering scheme */
.sg-container {}
.sg-contentwrapper {
    float: right;
    right: 50%;
    /*    position: relative; */

    position: absolute;
    /*z-index:20;*/
}

/* only apply these to main inside a content wrapper */
.sg-contentwrapper > .sg-main {
    /* lots of this is overriden on iOS */

    float: right;
    right: -50%;
    position: relative;
}
.sg-main {
    background-color: #fff;
    overflow: hidden;
    border: 0px solid red;
    margin: 0px;
    Xopacity: 0.4;
}
.sg-main {
    /* box-shadow: 0px 0px 5px #aaa; */

    box-shadow: 5px 5px 10px #888;
}
.sg-container2 {
    border: 0px solid red;
}
.sg-contentwrapper2 {
    float: right;
    right: 50%;
    position: relative;
    position: absolute;
    border: 0px solid orange;
}

/*
was a bug, somehow stops children from setting margins, also apparently not needed
.sg-main div {
	margin:0px;
	padding:0px;
}
.sg-main a { display:table-cell;vertical-align:middle;padding-left:4px;/ * works why? * / }
*/
.sg-main img {
    margin: 0px;
    padding: 0px;
    border: 0px;
    outline: 0px;
}
.sg-outer {
    /*box-shadow: 2px 2px 5px #aaa;*/

    color: #666;
    /* box-shadow: inset 0 0px 30px #eec; cant combine with shadow! */
    /* background-color:#ff8; needs to be invisible sometimes */
    /* display:block; NO!!! causes overlapping.  Let sg-clearfix do its work */
    /* clearX:both; */
    /* box-shadow: 0 20px 50px #548035;margin: 3px; */

    overflow: hidden; /* needed for various cosmetic reasons, rounded corners, etc. */

    /* newlook 	background-color:#fff;
	background-color:rgba(255, 255, 255, 0.64); */

    background-color: #eeeeee;
    /* background-color:rgba(240, 240, 240, 0.95); / * dont like */
    /* background-color:rgba(240, 240, 240, 0.80); / * hmm... yeah cant do */
    /* TODO: make these better defaults, then change the php code too */

    width: 0px;
    height: 0px;
    margin: 0px;
    /* line-height:1 !important; */
    /* position:relative; / * this is to allow position:absolutes inside */

    position: static;
    /* do your own relative divs if you want that, otherwise cant pop out */

    background-repeat: no-repeat;
    background-position: 50% 50%;
    /*transition: opacity .3s linear; */

    transition: transform .1s ease-outer;
    -webkit-transition: transform .1s ease-outer;
    Xtransform: scale3d(1, 1, 1);
    transform-origin: 50% 0%;
    /* upwards */

    -webkit-transform-origin: 50% 0%;
}
.sg-pan > .sg-outer {
    overflow: visible;
    /* experiment . inside a pan, let me spill out */
}
.sg-openable {
    /* cursor:pointer; now, maximize thing opens */
}
.sg-icon,
.sg-title,
.sg-label,
.sg-field,
.sg-value {
    display: inline-block;
    border: 0px solid green;
    white-spaceX: nowrap;
    overflow: hidden;
    float: left;
    /*	box-shadow: inset 0 0px 30px #eec; */

    width: 0px;
    height: 0px;
    margin: 0px;
}
.sg-icon {
    /* cursor:default; */

    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    /* background-position:center; TODO: maybe move back? */

    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    /* background-position:left top; */
    /* to make room for buttons */

    background-color: #999;
    /* / *737375*/

    ;
    cursorX: crosshair;
}
.sg-icon.sg-nolabel {
    background-color: transparent;
}
.sg-label {
    /* cursor:default; */

    background-color: #999;
    /* / *737375 #A4C5B0 */

    ;
    font-size: 80%;
    cursorX: default;
    font-weight: bold;
    color: white;
    /* overflow:hidden; testing out again. now that we wrap labels a little better * /
	overflow:visible; */
    /* it's not bad, but somehow still hidden in chrome, visible in ie, which looks bad - REVISIT */

    overflow: hidden;
}
.sg-pan > .sg-outer {
    overflow: visible;
}
.sg-head {
    float: left;
    /* seems to be ok for layout=h too? not for popups, but must have it now */

    line-height: 0;
}

/* these are very imp to allow height auto on device popups */
.sg-field > .sg-outer.sg-isfullscreen {
    overflow: hidden !important;
}
.sg-field > .sg-outer.sg-isfullscreen > .sg-head,
.sg-field > .sg-outer.sg-isfullscreen > .sg-field {
    float: none;
}
.sg-field > .sg-outer.sg-isfullscreen {
    position: relative !important;
}

/**/

/* .sg-nofield > .sg-label, this ruined buttons */
.sg-nofield > .sg-field > .sg-noroom {
    background-color: transparent !important;
    /* background-color:rgba(255,255,255,0.5) !important; / * for now, override cs, later include this in all cs's */
}

/* .sg-nofield > .sg-head > .sg-label > .sg-labeltext > .sg-row {
	height:100%;
} */
.sg-nofield > .sg-head > .sg-label > .sg-labeltext > .sg-row > .sg-labeltextinner {
    /* color:#fff !important; / * see above * / this ruined buttons a little */
}

/* not sure why we used to want this, but it's more of a default in a now cs world
.sg-nofield > .sg-field > .sg-noroom > .sg-noroominnersys, / * for no icons * /
.sg-nofield > .sg-field > .sg-noroom > .sg-noroominner {
	/ * color:#999 !important; / * see above * /
	color:#fff !important; / * we have text shadow * /
}
*/
.sg-field {
    /* background-color:#fff; transparent now */
    /*display:table; TODOx: worry, fix this later, when text, restore it - WILL have parents
of table-cells do it */
    /* display:inline-table; BTW does not work either */
    /* display:inline-block; BTW does not work because no height (need clearfix?) */

    display: block;
    /* remember (below) block leaves an edge, BUT is it ok here??????? */
    /* text-align:center; TODO: in IE, this also aligns DIVs (bad)  Maybe revisit later
though */
    /* display:inline-table; / *  too allow textareas to height on my auto height - go back to block if problems  - back - causes little ridges around the edges*/

    overflow: visible;
    /* hidden fixes box shadows, no seems to ruin for dl ch?? */
    /* -webkit-overflow-scrolling:touch; NOT on every one!! */
    /* white-space: nowrap; no! messes up vertical lists */

    line-height: 0;
}
.sg-launch-er {
    background-image: url('images/sg-launcher6.png');
}
.sg-maximize-er {
    background-image: url('images/sg-maximize6.png');
}
.sg-close-er {
    background-image: url('images/close6.png');
}
.sg-done-er {
    background-image: url('images/done.png');
}
.sg-select-er {
    background-image: url('images/select2.png');
}
.sg-new-er {
    background-image: url('images/new-er6.png');
}
.sg-select-er-selected {
    background-image: url('images/select2-selected.png');
}
.sg-actionbarleft {
    position: absolute;
    left: 0px;
    Xtext-align: left;
}
.sg-actionbarright {
    position: absolute;
    right: 0px;
    Xtext-align: right;
}
.sg-launch-er,
.sg-maximize-er,
.sg-done-er,
.sg-select-er,
.sg-new-er,
.sg-select-er-selected,
.sg-close-er {
    display: inline-block;
    vertical-align: top;
    /* html5 pickey? */

    z-index: 9;
    background-color: transparent;
    outline: 0px solid black;
    font-size: 0px !important;
    background-size: cover;
    background-repeat: no-repeat;
    Xposition: absolute;
    cursor: pointer;
    Xbox-shadow: 0px 0px 5px 1px white;
    opacity: 0.75;
    /* float:right; / * bc written with priority this way - crap, NO, ruins circles among other things */
}

.sg-isadatalink.sg-selectable[sg-selectable="1"][sg-whatnotrendered] > .sg-field > .sg-overflowcontainer > .sg-selectitem > .sg-actionbar > * > .sg-select-er,
.sg-isadatalink.sg-selectable[sg-selectable="9999"][sg-whatnotrendered] > .sg-field > .sg-overflowcontainer > .sg-selectitem > .sg-actionbar > * > .sg-select-er,
.sg-outer[sg-actionutil="new"] > .sg-actionbar > * > .sg-select-er {
    display: none;
}
.sg-outer[sg-maximizable] > .sg-actionbar > * > .sg-maximize-er {
    Xbackground-color: rgba(26, 212, 255, 0.06);
}

/*
broken now .sg-outer[sg-whatnotrendered=""] > .sg-actionbar > * > .sg-maximize-er,
.sg-outer[sg-maximizable="9999"] > .sg-actionbar > * > .sg-maximize-er {
	background-color: rgba(255, 151, 26, 0.36)
}
*/
.sg-isacollection > .sg-field {
    /* font-size:0%; */

    text-align: left;
    /*
	text-align: center;
	for now, better than lopsided collection child divs
	NO - it messes with top-level slides
	*/
}

/* janky on ie (but so also is non-inset, so also is border-radius, etc etc */
.sg-glasslike,
.sg-paperlike {
    box-shadow: inset 0 0px 15px #e8e8e8;
}

/* has datalink so what?? * /
.sg-field:not([sg-objreftype='']) {
	background-color: #ddd;
}
*/
.sg-iconnew {
    width: 100%;
    height: 100%;
    background-image: url(images/new-er6.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.sg-outerlabel {
    background-color: black;
    color: white;
    font-weight: bold;
    padding: 4px;
    width: 1033px;
}
.sg-outerlabel span {
    padding: 4px;
}
.sg-labeltext {
    display: inline-table;
    table-layout: fixed;
    /* disallows overflow */

    text-align: left;

    font-size: 100%;
    /* 	width:98%;
	height:98%;
	margin:1%;
 */

    padding: 0%;
    width: 100%;
    height: 100%;
    margin: 0%;
    /* margin:0px 2px 0px 2px; cleaner without, since middle */
}

.sg-outer[sg-layout="h"] > .sg-head > .sg-label > .sg-labeltext {
    text-align: right;
}

.sg-labeltextinner {
    /* display:table-cell; zoom all messed up on IE */

    display: inline-block;
    vertical-align: middle;
    /*display:table-cell;
	vertical-align:middle;
	padding:2%;*/
    /* line-height:0.85; */
    /* line-height:0.75; / * for some reason now 85 is too big (bc large fonts?) was nice but not for non Calibri*/

    line-height: 1.15em;
    /* zoom:80%; if we use this, it wont inherit */
}
.sg-outer[sg-popuplevel] > .sg-head > .sg-label > .sg-labeltext > .sg-row > .sg-labeltextinner,
.sg-isacollection > .sg-head > .sg-label > .sg-labeltext > .sg-row > .sg-labeltextinner {
    /* vertical-align:bottom;
	/ * give middle a try */

    vertical-align: middle;
}
.sg-level-1 > .sg-head > .sg-label > .sg-labeltext > .sg-row > .sg-labeltextinner {
    vertical-align: middle;
}
.sg-labeltextinnersublabel {
    /* display:block; */
    /* display:table-cell; zoom all messed up on IE */

    display: inline-block;
    vertical-align: top;
    /* font-size:38%; if we use this, it wont inherit */

    font-weight: normal;
    /* line-height:0.96; nice but not for non Calibri */
    /* line-height:1em; */

    line-height: 1.3em;
}
.sg-level-1 .sg-labeltextinner {
    /* text-align: center; nah */
}
.sg-fieldtext {
    /* display:table; zoom all messed up on IE */

    display: inline-block;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0px;
    font-size: 100%;
    height: 100%;
    /* background-color:#ffe; needs to be invisible sometimes */
    /* width:98%;
	margin:0px 1%;
	margins must be done in render bc might zoom */

    padding: 0px;
    line-height: 1;
}
.sg-multiline > .sg-fieldtext {
    line-height: 1.2;
}
.sg-multiline > form > .sg-fieldtextarea {
    line-height: 1.2;
    overflow: auto;
}
.sg-fieldtextinner {
    /* display:table-cell; zoom all messed up on IE */
    /* display:inline-block; */

    display: table-cell;
    /* trying again... */

    vertical-align: middle;
    /* overflow:auto;
	white-space:nowrap;
	cursor:text; */

    overflow: hidden;
    Xcursor: default;
    /* keep? */

    width: 100%;
    /* ok? */

    height: 100%;
    /* ok?  good for mce, did not seem to be cause of ipod post too tall bug*/

	font-weight: 400;
}

/* a level below the too roundeds need to valign */
.sg-toorounded > .sg-field > .sg-isafield > .sg-field.sg-plaintext > .sg-fieldtext > .sg-fieldtextinner {
    display: table-cell;
    /* exception to rule, ok on IE */

    white-space: normal !important;
    /* experimental */
}
.sg-toorounded > .sg-field > .sg-isafield > .sg-field.sg-plaintext > .sg-fieldtext {
    margin: 0px 20% !important;
    width: 60% !important;
    /* TODO conflicts with inline css */
}
.sg-field.sg-richtext > .sg-fieldtext > .sg-fieldtextinner {
    vertical-align: top;
    line-height: normal; /* was 1.7em; */






    /* font-size: 120%; ///////////// temporarily disable */
    




}
.sg-field.sg-stretch > .sg-fieldtext > .sg-fieldtextinner {
    zoom: 1 !important;
    /* fixes widgets? ie too? */
}
.sg-field.sg-plaintext > .sg-fieldtext > .sg-fieldtextinner {
    vertical-align: middle;
    text-overflow: ellipsis;
}
.sg-field > form {
    display: none;
}
.sg-fieldtextarea {
    display: none;
    /* font-family:arial; / * TODOX: inherit */

    width: 100%;
    /* height:25px; */

    height: 100%;
    /* height:auto; caused problems, need to determine what it was for */

    border: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: transparent;
    line-height: 1em;
    padding: 2px; /* 2% percentages dont work / zoom? */
    background-color: rgba(255, 255, 255, 0.64);
}
.sg-fieldback,
.sg-fieldicon {
    /* position:relative; messes with z-index planes */

    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}
.sg-fieldiconinner {
    /* needed for uploader thing */
    /* position:relative; made see through some upper popups */

    position: static;
    height: 100%;
    width: 100%;
    /* text-align: center; */

    text-align: right;
}
.sg-editable > .sg-field {
    color: black;
}
.sg-isaaction {
    cursor: pointer;
}
.sg-action > .sg-head > .sg-icon,
.sg-actionutil > .sg-head > .sg-icon {
    /* background-color:transparent; seems better without? */

    box-shadow: none;
}
.sg-outer[sg-defaultaction] {
    cursor: pointer;
}
.sg-action,
.sg-actionutil {
    /*cursor:pointer;*/
    /*border:4px solid transparent;
	margin:-4px;*/
}
.sg-invisible {
    box-shadow: none !important;
    background-color: transparent !important;
    border-color: transparent !important;
    /* jic */

    Xcursor: default !important;
    /* maybe inherit? */
}

/* this selector eliminates collection objects from getting the css - no more
.sg-field > .sg-container > .sg-pan > .
.sg-field > .sg-somewhatinvisible {
*/
.sg-somewhatinvisible {
    box-shadow: none !important;
    /* now, prob not needed imp */

    background-color: transparent !important;
    border-color: transparent !important;
}
.sg-invisible > .sg-field,
.sg-invisible > .sg-head > .sg-icon,
.sg-invisible > .sg-head > .sg-label {
    visibility: hidden;
}
.sg-hide {
    display: none !important;
}
.sg-hidden {
    display: none !important;
}
.sg-hiddenforpopup {
    display: none !important;
}

/* two levels seems to be enough - TODO: cant have a form right under a form, can you? well
maybe... */
.sg-outer[sg-flag="dirty"] > .sg-field > .sg-hideifdirty,
.sg-outer[sg-flag="dirty"] > .sg-field > .sg-container > .sg-pan > .sg-hideifdirty,
.sg-outer[sg-flag="dirty"] > .sg-field > .sg-outer > .sg-field > .sg-hideifdirty,
.sg-outer[sg-flag="dirty"] > .sg-field > .sg-container > .sg-pan > .sg-outer > .sg-field > .sg-hideifdirty,
.sg-almostinvisible {
    box-shadow: none !important;
    cursor: default !important;
    opacity: 0.25;
}
.sg-showifdirty {
    Xbox-shadow: none !important;
    /* hmmm problem */

    cursor: default !important;
    opacity: 0.25;
}
.sg-outer[sg-flag="dirty"] > .sg-field > .sg-showifdirty,
.sg-outer[sg-flag="dirty"] > .sg-field > .sg-container > .sg-pan > .sg-showifdirty,
.sg-outer[sg-flag="dirty"] > .sg-field > .sg-outer > .sg-field > .sg-showifdirty,
.sg-outer[sg-flag="dirty"] > .sg-field > .sg-container > .sg-pan > .sg-outer > .sg-field > .sg-showifdirty,
.sg-almostinvisible {
    Xbox-shadow: none !important;
    /* hmmm problem */

    cursor: pointer !important;
    opacity: 1;
}
.sg-readonly.sg-showifeditable {
    display: none;
}

/* .sg-isadatalink.sg-readonly > .sg-field > .sg-overflowcontainer > . { */
.sg-drilldown > .sg-field > .sg-outer {
    cursor: pointer;
}

/* the 101% avoids little strips of background on certain zoom renderers */
.sg-noroom {
    /*display:inline-block; / * IMP block leaves an edge */

    display: inline-table;
    /* need this to center ghost (for now only) -
	BUT whats the problem with this again? */
    /* table-layout:fixed; */

    table-layout: fixed;
    /* disallows overflow */
    /* 	width:101%;
	height:101%; maybe we can stop this kludge now? */

    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 100%;
    /* cursor:pointer; no! */
    /* cursorX:default; */

    outline: 0px solid red;
    /* margin:-1px !important; / * TODOx: hack! this sucks, ok, removed */
    /* overflow:hidden; might not need, since sg-field is overflow hidden, with it, bottom of text gets clipped */

    background-repeat: no-repeat;
    background-position: center center;
}
.sg-noroominnersys,
/* this one for when there's no icon */
.sg-noroominner {
    /* cursorX:pointer; */

    display: table-cell;
    /* zoom all messed up on IE - but really need it... - REVISIT IE */
    /* display:inline-block; */

    vertical-align: middle;
    /* was middle, why?  why not? */
    /* Experiment - just let it be
	/ * white on black * /
	color:#F7F7F7;
	text-shadow: 1px 1px 2px #000;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.78); * /

	/ * black on white * /
	color:#333;
	text-shadow: 1px 1px 2px #fff;
	text-shadow: 1px 1px 2px rgba(255,255,255, 0.78);
	*/

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /*background-color: rgba(224, 0, 36, 0.05) !important;*/
    /* padding-top:4px !important; not anymore */

    /* line-height: 0.8; */

    line-height: 1.0em;
	text-overflow: ellipsis;
	overflow: hidden;
}

.sg-noroominnerinner {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    margin-bottom: 0px !important;
    /* background-color:white; looks bad */

    opacity: 0.7;
    /* ok */
    /* background-color: rgba(224, 0, 36, 0.05) !important;
	font-size:10px !important; */

    overflow: hidden;
    line-height: 1;
    /* this messed up height of noroom, but ok now that we use ellipsis */

    text-overflow: ellipsis;
}
.sg-textshadow {}
.sg-overflowcontainer {
    /* doesnt seem to be necessary
	-webkit-transform:translate3d(0,0,0);
	also, should immediately style.webkitTransform = '' after load
	*/
    /* font-size:0%; / * very imp. */
    /* background-color: #DFDFDF;
	background-color: rgba(255, 255, 255, 0.43); nice to have defined, but better transparent */

    background-color: transparent;

	/* Xposition: relative;
	to allow for absolute top-level outers (slideshow, etc)
	hopefully doesnt actually affect positioning
	Apparently wasnt necessary if you use sideways collections for slideshows */
}
.sg-overflowcontainerw {
    width: 0px;
    margin: 0px;
    padding: 0px;
    /*display:table;
	text-align:left;
	vertical-align:middle;*/
	/* overflow: hidden; does NOT mess with popups, that was sg-outer actually, but apparently also not necessary to fix slideshows */
}

/*
.sg-overflowcontainerw > .sg-outer {
	display:table-cell;
}
.sg-overflowcontainerw > .sg-anchorouter {
	display:none;
}
*/
.sg-overflowcontainerh,
.sg-overflowcontainert {
    /* height:0px; */

    height: auto;
    margin: 0px;
    padding: 0px;
    /* DEBUG * /
	cursor: not-allowed; */
}

/* flexbox
.sg-overflowcontainer {
        display:flex;
}
.sg-overflowcontainerw {
        flex-direction: row;
        align-items:center;
}
.sg-overflowcontainerh { align-items:flex-start; flex-direction:column; }
.sg-overflowcontainert { align-items:flex-start; flex-wrap:wrap; }
*/
.sg-overflowcontainernot {
    /* display:inline; not sure if a reason for this, but block displays correctly */

    display: block;
    width: auto;
    width: auto;
    margin: 0px;
    padding: 0px;
}
.sg-slideshow > .sg-outer {
    position: absolute;
    Xdisplay: none;
    visibility: hidden;
}
.sg-slideshowactive {}
.sg-formwrapper {
    display: none;
}

/* float:none;clear:both;margin:5px;border:1px solid gray;display:none; } */
.sg-borders {
    Xoutline: 1px solid #ddd;
    outline-width: 1px;
    /* TODO: IE8 needs DOCTYPE for this */

    outline-style: solid;
}
.sg-selectable > .sg-field > .sg-overflowcontainer > .sg-selectitem {
    cursor: pointer;
}
.sg-isadatalink.sg-selectable.sg-editable > .sg-field > .sg-selected,
.sg-isadatalink.sg-selectable.sg-editable > .sg-field > .sg-overflowcontainer > .sg-selected {
    Xbox-shadow: 0px 0px 6px #AFA !important;
    Xbox-shadow: 0px 0px 40px #AFA inset !important;
    Xbox-shadow: 0px 0px 1px 10px #BDFABD inset !important;
    Xbox-shadow: 0px 0px 1px 10px rgba(0, 255, 0, 0.23) inset !important;
    Xbox-shadow: 0px 0px 1px 100px #BDFABD inset !important;
    /* interesting... */

    Xbox-shadow: 0px 0px 1px 100px rgba(0, 255, 0, 0.23) inset !important;
    Xbox-shadow: 0px 0px 20px 20px rgba(0, 255, 0, 0.4) inset !important;
    Xoutline: 1px solid #ADFF2F;
    Xbackground-color: rgba(173, 255, 47, 0.17);
    Xbox-shadow: 0px 0px 10px 1px #BDFABD inset !important;
    
    /* green highlight */
    box-shadow: 0px 0px 12px 1px #29FF29 inset !important;
    outline: 2px solid #0cff00 !important;
}
.sg-isadatalink.sg-selectable > .sg-field > .sg-selected > .sg-actionbar > * > .sg-select-er,
.sg-isadatalink.sg-selectable > .sg-field > .sg-overflowcontainer > .sg-selected > .sg-actionbar > * > .sg-select-er {
    background-image: url(images/select2-selected.png);
}

/* using negating method now */
.sg-isadatalink.sg-selectable[sg-whatnotrendered] > .sg-field > .sg-selected,
.sg-isadatalink.sg-selectable[sg-whatnotrendered] > .sg-field > .sg-overflowcontainer > .sg-selected {
    box-shadow: none !important;
}
.sg-isadatalink.sg-selectable[sg-whatnotrendered] > .sg-field > .sg-selected > .sg-actionbar > * > .sg-select-er,
.sg-isadatalink.sg-selectable[sg-whatnotrendered] > .sg-field > .sg-overflowcontainer > .sg-selected > .sg-actionbar > * > .sg-select-er {
    background-image: none;
}
.sg-overlayselect {
    position: relative;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.sg-overlayselectinner {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: none;
    background-position: left center;
    background-size: 100% 100%;
    /* was contain */

    background-repeat: no-repeat;
    background-color: #ddd;
    /* NO! background-color: #FFF; */
    /* opacity: 0.55; trying this out */

    -webkit-tap-highlight-color: transparent;
    z-index: 90;
    /* z-index:0; / * this was needed after started using webkit filters */

    opacity: 0.2;
}

/* messes with selections in iOS, and no way to easily avoid * /
.sg-overlayselect:hover { opacity:0; } */
.sg-overlayselectselected > .sg-overlayselectinner {
    opacity: 1.00;
    /* was 0.30 */

    background-color: transparent;
    /* background-image:url('sg-overlayselectselected.png'); */
    /* background-image:none; */
    /* z-index:999; / * this was needed after started using webkit filters */
}
.sg-overlayselectcheck > .sg-overlayselectinner {
    /* background-image:url('images/sg-checkmark5-w30pct.png');
	background-position:left center; */
    /* background-image:url('images/sg-checkmark4a.png'); background-size:100% 100%;
	background-position:center center; */
    /* center center because too hard to see on small devices */

    background-image: url('images/sg-checkmark.png');
    opacity: 0.2;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
.sg-aux > .sg-overlayselect > .sg-overlayselectinner {
    background-color: transparent;
    opacity: 0;
}
.sg-aux > .sg-overlayselect:hover > .sg-overlayselectinner {
    background-image: none;
}
.sg-aux.sg-selected {
    box-shadow: 0px 0px 6px #AFA !important;
    /* border: 2px solid rgba(0, 255, 0, 0.2); */
}
.sg-aux.sg-selected:hover {
    /* border: 2px solid rgba(0, 255, 0, 0.5); */
}
.sg-aux.sg-selected > .sg-overlayselect > .sg-overlayselectinner {
    background-image: url('images/sg-checkmark.png');
    /* green check */

    background-size: contain;
    background-color: transparent;
    opacity: 0.2;
}
.sg-aux.sg-selected > .sg-overlayselect:hover > .sg-overlayselectinner {
    background-image: url('images/sg-checkmark.png');
    /* green check */

    background-size: contain;
    background-color: transparent;
    opacity: 0.5;
}
.sg-outer.sg-editable.sg-selectable > .sg-overlayselectselected > .sg-overlayselectinner {}

/* .sg-outer[sg-whatnotrendered] > .sg-field > .sg-isadatalink > .sg-field > .sg-overflowcontainer > .sg-selectable > .sg-overlayselectcheck > .sg-overlayselectinner {
	background-image:none;
}
 */
#sg-up-form2 {
    text-align: center;
}
#sg-up-file,
#sg-up-file2 {
    width: 85px;
    border: px solid red;
    margin-right: 2px;
}
#sg-up-file {
    float: left;
}
#sg-up-sig,
#sg-up-sig2 {
    width: 100px;
    float: left;
    border: 0px;
    background-color: transparent;
}
#sg-up-submit,
#sg-up-submit2 {
    display: none;
    width: 70px;
    cursor: pointer;
}
#sg-up-cancel,
#sg-up-cancel2 {
    width: 70px;
    cursor: pointer;
}
.sg-level-1 > .sg-head > .sg-label,
.sg-level-2 > .sg-head > .sg-label {
    font-size: 70%;
}
/* really?? */
.sg-main {
    text-align: center;
}
/* might change to use margins instead */
.sg-level-1 {
    text-align: left;
}
.sg-datalinkspacer {
    margin: 0px;
    padding: 0px;
    background-colorX: #eee;
    display: none;
    font-size: 0%;
    float: none;
    vertical-align: top;
}

/* long horizontal bar - For High */
.sg-datalinkspacerh {
    display: block;
    width: auto;
    /*12.5px;*/

    height: 4px;
    margin: 4px 0px 0px 0px !important;
    /*
	background-image: -ms-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background-image: -moz-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background-image: -o-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background-image: -webkit-gradient(linear, bottom, left, color-stop(0, rgba(255,255,255,1)), color-stop(1, rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	*/

    background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.11) 100%);
    background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.11) 100%);
    background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.11) 100%);
    background-image: -webkit-gradient(linear, bottom, left, color-stop(0.11, rgba(0, 0, 0, 1)), color-stop(1, rgba(255, 255, 255, 0)));
    background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.11) 100%);
    background-image: linear-gradient(tobottom, #FFF 0%, rgba(0, 0, 0, 0.11) 100%);
}

/* short vertical bar - for Wide and Tile */
.sg-datalinkspacerv,
.sg-datalinkspacert {
    width: 4px;
    height: 12.5px;
    margin: 0px 1px 0px 2px !important;
    display: inline-block;
    /*
	background-image: -ms-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background-image: -moz-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background-image: -o-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background-image: -webkit-gradient(linear, right, left, color-stop(0.11, rgba(255,255,255,1)), color-stop(1, rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.11) 100%);
	background-image: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	*/

    background-image: -ms-linear-gradient(right, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.11) 100%);
    background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.11) 100%);
    background-image: -o-linear-gradient(right, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.11) 100%);
    background-image: -webkit-gradient(linear, right, left, color-stop(0.11, rgba(0, 0, 0, 1)), color-stop(1, rgba(255, 255, 255, 0)));
    background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.11) 100%);
    background-image: linear-gradient(to right, #FFF 0%, rgba(0, 0, 0, 0.11) 100%);
}
.sg-datalinkspacert {
    float: none;
    /* left seems to NOT work for TILES, remove first sign of any trouble - confusing?? */
}
#sg-favicon {
    background-image: url('images/1px.gif');
    background-size: cover;
    /* code sets parent div to boxsize */

    background-repeat: no-repeat;
    float: left;
    margin: 4px;
}
#sg-favicon:hover {
    background-image: url('images/sg-faviconboxonly.png');
}
.sg-wholescreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#sg-wait {
    z-index: 999999;
    background: url('images/wait2.gif') center 20% no-repeat rgba(255, 255, 255, 0.35);
    display: block;
}
#sg-debug {
    max-height: 800px;
    overflow: auto;
    display: none;
    font-size: 12px;
    font-weight: bold;
}
.sg-debug1 {
    zoom: 33%;
    color: #aaa;
    display: none;
    /*block;*/

    line-height: 1;
    white-space: nowrap;
}

.sg-opening {
    display: none !important;
}

.sg-aux {
    display: none !important;
    position: absolute;
    top: 0px;
    /* background-color:transparent; / * TODO: figure out problem with 'new' popup divs (since not white) - made top level white, rest not*/

    opacity: 0;
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform: scale3d(.1, .1, 1);
    -webkit-transform: scale3d(.1, .1, 1);
    box-shadow: 2px 2px 3px #AAA !important;
    /* composite
	-webkit-transform : translateZ(0);
	-o-transform : translateZ(0);
	-moz-transform : translateZ(0);
	transform : translateZ(0);
	*/
}
.sg-auxshow {
    display: block !important;
}
.sg-overlayselect {
    display: none !important;
}

/* experimental */
.sg-overflowcontainer.sg-jumpout {
    width: 100% !important;
    /* yes, prob good in TILE too */
}
.sg-field.sg-jumpout {
    /*clear:both;*/

    position: absolute;
    left: 0px;
    width: 100% !important;
    /* we dont need width after all on fullscreen popups, so avoid problem of inline overriding this */

    top: 0px;
    Xheight: 1000px !important;
}
.sg-container.sg-jumpout {

    position: static;
    /* was important, probably needs that */
    /*zoom:.1;*/

    width: 100%;
}
.sg-container.sg-jumpout.sg-wrap-50 {
    width: 50%;
}
.sg-level-1 > .sg-field {
    Xheight: 2000px !important;
    /* its big for popups */

    Xheight: auto !important;
    /* looks good but ruins popups */
}

/* importants bc toolbar-right */
#profile-img-32-opener {
    z-index: 999991 !important;
    position: fixed !important;
}

/* NB - MIN width for NON cell things that cant be negated */
@media only screen and (min-width: 650px) {}
@media only screen and (max-width: 649px) {
    #home .wrapper {
        transition: none !important;
        -webkit-transition: none !important;
    }

    #home #sg-status {
        display: none;
    }
    #home #home-a {
        width: 60px;
    }
	.sg-ontop {
		border-width:2px;
	}
	#home #op-controlc > .sg-close {
		left: 274px;
		top: 30px;
		z-index: 9;
	}
	#home #op-controlc-before {
		left: 45%;
		top: -42px;
		border-width: 0px 14px 40px 14px;
	}
}
@media only screen and (max-width: 360px) {
    #home #home-a {
        display: none;
        /* because boxsize so big */
    }
	#home #op-controlc > .sg-close {
		left: 246px;
		top: 30px;
		z-index: 9;
	}
	#home #op-controlc-before {
		left: 40%;
		top: -62px;
		border-width: 0px 36px 60px 36px;
	}
}

/* very imp, allows popups to overlap top level guy */
.sg-level-1-c > .sg-pan > .sg-outer > .sg-field {
    overflow: visible;
}

/* TODO: trying to get something like this working


		.sg-level-1-c.sg-sticky.sg-headshrink > .sg-pan > .sg-outer > .sg-head

*/

/* sticky - overrides mainly */

/* toplevel  and not */
#home .sg-level-1-c.sg-sticky > .sg-pan > .sg-outer > .sg-head,
#home .sg-level-1-c .sg-sticky.sg-headshrink {
    position: fixed;
    z-index: 1;
    /* IMP */
    /* box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.78); */

    Xwidth: 100%;
    background-color: transparent !important;
    /* TODO: separate layout from style in pan css */

    overflow: hidden;
    /* fixes 1px issue */

    left: 0px !important;
    /* transition: zoom 2s linear; /*  just a test * /
	zoom:100%; */

    transition: transform .2s ease-out;
    -webkit-transition: transform .2s ease-out;
    transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
    transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
}
#home .sg-level-1-c.sg-sticky > .sg-pan > .sg-outer.sg-gfx-borderszoom > .sg-head {
    left: auto !important;
}
#home .sg-level-1-c.sg-sticky > .sg-pan > .sg-outer > .sg-head
/* ,
#home .sg-level-1-c .sg-sticky.sg-headshrink */
{
    white-space: nowrap;
    /* OK, stops div wrapping, but dont inherit downwards */
}

/* this also apparently fixed the not lining up menubar scroll issue */
#home .sg-level-1-c.sg-sticky > .sg-pan > .sg-outer > .sg-head > .sg-label {
    white-space: normal;
    /* dont inherit downwards */
}

/* toplevel */
#home .sg-level-1-c.sg-sticky > .sg-pan > .sg-outer > .sg-head {
    top: 0px !important;
    /* this is first one only */
}
#home .sg-level-1-c.sg-sticky.sg-gfx-borderszoom > .sg-pan > .sg-outer > .sg-head {
    /* special stuff for level 1 head (is sticky here) */

    zoom: inherit;
    /* ie */

    padding: 0% !important;
    /* ie */
}

/* toplevel */
#home .sg-level-1-c.sg-sticky > .sg-pan > .sg-outer > .sg-actionbar,
#home .sg-level-1-c.sg-sticky > .sg-pan > .sg-outer > .controlbar-buttons/* TODO: more than just the one opener? */
{
    position: fixed;
    z-index: 999991;
}

/* toplevel */
#home .sg-level-1-c.sg-sticky > .sg-pan > .sg-outer > .sg-head > .sg-icon,
#home .sg-level-1-c.sg-sticky > .sg-pan > .sg-outer > .sg-head > .sg-label {
    display: inline-block !important;
    float: none !important;
    vertical-align: top !important;
    clear: both;
}

/* no longer needed bc now using inline-block instead of float
.sg-level-1-c.sg-sticky > .sg-pan > .sg-outer > .sg-head > .sg-label {
	margin-right: -0.3px; / * fixes precision issues  btwn raw sg-panel and calced outer widths * /
}
*/

/* toplevel */
#home .sg-level-1-c.sg-sticky > .sg-filter {
    position: fixed;
    z-index: 999990;
    /* IMP */
}

/* hacky */
#home .sg-level-1-c.sg-sticky > .sg-pan > .sg-outer {
    opacity: 1;
    /* change context (?) */
}

/* hacky  - collapse everything*/
#home .sg-level-1-c .sg-sticky.sg-headshrink > .sg-pan > .sg-outer,
#home .sg-level-1-c .sg-sticky.sg-headshrink > .sg-pan > .sg-outer > .sg-field,
#home .sg-level-1-c .sg-sticky.sg-headshrink > .sg-pan > .sg-outer > .sg-field > .sg-overflowcontainer,
#home .sg-level-1-c .sg-sticky.sg-headshrink > .sg-pan > .sg-outer > .sg-field > .sg-overflowcontainer > .sg-outer {
    height: auto;
    /* for some bizarre reason important doesnt work, but lower non-important auto does  !important; */

    min-height: 0px !important;
    /* margin-top:0px !important;
	margin-bottom:0px !important; */

    vertical-align: middle !important;
}
#home .sg-level-1-c .sg-sticky > .sg-pan > .sg-outer,
#home .sg-level-1-c .sg-sticky > .sg-pan > .sg-outer > .sg-field,
#home .sg-level-1-c .sg-sticky > .sg-pan > .sg-outer > .sg-field > .sg-overflowcontainer,
#home .sg-level-1-c .sg-sticky > .sg-pan > .sg-outer > .sg-field > .sg-overflowcontainer > .sg-outer {
    transition: margin .2s linear;
    /* just a test */

    -webkit-transition: margin .2s linear;
    min-height: 0px !important;
    /* dont really like, but fixes glitch on maximized */
}

/* toplevel */
#home .sg-level-1-c.sg-sticky > .sg-pan > .sg-outer > .sg-head,
#home .sg-level-1-c.sg-sticky > .sg-filter,
#home .sg-level-1-c .sg-container.sg-sticky {
    z-index: 999990;
    /* one lower than toolbar stuff */
    /* -webkit-transform-origin:0% 0%; */
}

/* toplevel */
#home .sg-level-1-c.sg-sticky.sg-headshrink > .sg-pan > .sg-outer > .sg-head {
    /* zoom:50%; */

    transform: scale3d(.5, .5, 1);
    -webkit-transform: scale3d(.5, .5, 1);
}

/* toplevel * /
#home .sg-level-1-c.sg-sticky.sg-headshrink > .sg-filter > .sg-filterimg {
	height:50%;
} */

/* toplevel  (instead) (total cheat, prob will have browser compat issues) */

/* also, NOT good, changes aspect of filter background image */
#home .sg-level-1-c.sg-sticky.sg-headshrink > .sg-filter {
    transform: scale3d(1, .5, 1);
    -webkit-transform: scale3d(1, .5, 1);
    transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
}

/* hacky * /
#home .sg-level-1-c .sg-container.sg-sticky.sg-headshrink > .sg-pan > .sg-outer {
	margin:0px !important;
	height:25px !important; / * TODO: move to index * /
	min-height:25px !important; / * TODO: move to index * /
} */

/* toplevel and not */

/* #home .sg-level-1-c.sg-headshrink > .sg-pan > .sg-outer > .sg-head, */
#home .sg-level-1-c.sg-headshrink > .sg-filter,
/* means no filter, no box shadow, which is prob ok */
#home .sg-level-1-c .sg-headshrink {
    /* TODO: size adjust to zoom (4px is assuming zoom 5x) */

    box-shadow: 0px 2px 4px -2px #aaa;
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.27);
}

/* POPUPS */

/* breaks Safari */

/* override all back if popped up */
#home .sg-container.sg-sticky.sg-popup {
    /* position:fixed !important; */
}
#home .sg-container.sg-sticky.sg-popup > .sg-filter {
    display: none !important;
    /* TODO: show somehow? need to? */
}

/* allows sub popups to expand outside a popup BUG: small occasional problems with rounded corners */
.sg-popup {
	overflow: visible;
}

/*#home .sg-container.sg-sticky.sg-popup > .sg-pan > .sg-outer {
	position: relative !important;
} doing in js now*/

/* WRAP stuff */
#home .sg-level-1-c .sg-container.sg-stickywrap.sg-headshrink {
    position: fixed;
    left: 50% !important;
    /* top is calculated in js */

    top: 0px !important;
    transition: transform .2s ease-out;
    -webkit-transition: transform .2s ease-out;
    transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transform: scale3d(.5, .5, 1);
    -webkit-transform: scale3d(.5, .5, 1);
}
#home .sg-level-1-c .sg-container.sg-stickywrap.sg-headshrink.sg-biggersmallish {
    transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
}

/* #home .sg-headshrink.sg-sticky[sg-sticky-idx="0"] > .sg-filter, */
#home .sg-headshrink.sg-stickywrap[sg-sticky-idx="0"] > .sg-pan > .sg-outer > .sg-head {
    transform: scale3d(.5, .5, 1);
    -webkit-transform: scale3d(.5, .5, 1);
    text-align: right;
}
#home .sg-headshrink.sg-stickywrap[sg-sticky-idx="0"] {
    text-align: right !important;
}
#home .sg-headshrink.sg-stickywrap[sg-sticky-idx="0"] > .sg-pan > .sg-outer > .sg-head > .sg-label {
    text-align: left;
    /* careful */
}

/* #home .sg-headshrink.sg-sticky[sg-sticky-idx="0"],
#home .sg-headshrink.sg-sticky[sg-sticky-idx="0"] > .sg-pan > .sg-outer > .sg-head,
#home .sg-headshrink.sg-sticky[sg-sticky-idx="0"] > .sg-filter,
#home .sg-headshrink.sg-sticky[sg-sticky-idx="1"],
#home .sg-headshrink.sg-sticky[sg-sticky-idx="1"] > .sg-pan > .sg-outer > .sg-head
{
	Xwidth:50%;
	Xmargin:0px;
	Xpadding:0px;
} */
#home .sg-headshrink.sg-stickywrap[sg-sticky-idx="0"] > .sg-pan {
    margin-right: 0px !important;
    padding-right: 0px !important;
}
#home .sg-headshrink.sg-stickywrap[sg-sticky-idx="1"] > .sg-pan {
    width: 100%;
    margin: 0px;
    padding: 0px;
    z-index: 999992;
    /* text-align:center; */

    text-align: left;
}

/* used? */
#home .sg-level-1-c .sg-container.stickywrap[sg-sticky-idx="1"].sg-sticky.sg-headshrink {
    top: 0px !important;
    left: 25%;
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
}

/* hack - hide background on sticky side shrink */
#home .stickywrap[sg-sticky-idx="1"].sg-headshrink > .sg-pan
/* ,#home .stickywrap[sg-sticky-idx="1"].sg-permaheadshrink > .sg-pan  */
{
    background-image: none !important;
    float: none !important;
}
#home .stickywrap[sg-sticky-idx="1"].sg-headshrink > .sg-filter > .sg-filterimg
/* ,#home .stickywrap[sg-sticky-idx="1"].sg-permaheadshrink > .sg-filter > .sg-filterimg */
{
    background-image: none !important;
}

/* hack end */
./* sg-level-1-c.sg-permaheadshrink > .sg-filter,
.sg-level-1-c.sg-headshrink > .sg-filter,
.sg-level-1-c.sg-permaheadshrink > .sg-pan > .sg-outer,
.sg-level-1-c.sg-headshrink > .sg-pan > .sg-outer
{
	Xheight: 12.5px !important;
	Xmin-height: 12.5px !important;
}

.sg-level-1-c.sg-permaheadshrink > .sg-pan > .sg-outer > .sg-field,
.sg-level-1-c.sg-headshrink > .sg-pan > .sg-outer > .sg-field {
	margin-top:12.5px !important;
} */

/* #home .sg-level-1-c.sg-sticky.sg-permaheadshrink > .sg-pan > .sg-outer > .sg-head
{
	Xzoom:50%;
	transform:scale3d(.5,.5,1);
	width:50%;
	padding:0px;
	margin:0px;
	text-align:right;
}
#home .sg-level-1-c.sg-sticky.sg-permaheadshrink > .sg-pan > .sg-outer > .sg-head > .sg-label
{
	text-align:left; / * careful * /
}
#home .sg-level-1-c.sg-sticky.sg-permaheadshrink > .sg-filter
{
	Xzoom:50%;
	transform:scale3d(.5,.5,1);
	width:50%;
} */

/* #home .sg-sticky {
	transition: all .2s linear;
}
 */

/* #home .sg-head{
	transition:transform 2s linear;
 }*/
#sg-error-retry {
    width: 100%;
    text-align: center;
    margin-top: 100px;
    visibility: hidden;
    position: absolute;
}
#sg-error-retry > a {
    text-decoration: underline;
}
.sg-head > .sg-icon,
.sg-head > .sg-label {
    display: inline-block !important;
    float: none !important;
    vertical-align: top !important;
    clear: both;
}

.sg-head > .sg-icon {
    background-size: 66%;
}

/* .sg-level-1-c.sg-sticky > .sg-pan > .sg-outer > .sg-field > .sg-anchor
{
	/ * TODO: put in index, like other one todo * /
	padding-top:12.5px;
	margin-top:-12.5px;
}*/
.sg-anchor {
    line-height: 0px;
    font-size: 0px;
    height: 0px;
    /* display: inline-block; hope can be block */
    /* display: block; decided in js */
    /* position:relative; ruins ie scrollintoview */

    position: static;
    /* change to relative after load */
    /*outline:1px solid red;*/

    background: red !important;
    height: 0px;
    width: 0px;
}
.sg-anchorouter {
    display: inline-block;
    background: pink !important;
    width: 0px;
    position: absolute;
    left: 0px;
    /* this is very imp for IE bc it scrollsIntoView horiz too */
}
.sg-container > .sg-anchorouter {
    display: block;
    position: absolute;
}

/* .sg-overflowcontainerh > .sg-anchor,
.sg-overflowcontainert > .sg-anchor  */
.sg-slideshow > .sg-anchor {
    display: block !important;
}
.wrapper > .speedgui > .sg-anchor,
.sg-level-1-c > .sg-pan > .sg-outer > .sg-field > .sg-anchor {
    display: block;
    position: static;
    /* why are the other ones relative? */
}

/* TEST ok but was making label take up whole screen on level 1 at least * /
.sg-level-1 > .sg-head > .sg-label,
.sg-outer[sg-popuplevel="1"] > .sg-head > .sg-label,
.sg-outer[sg-popuplevel="2"] > .sg-head > .sg-label,
.sg-outer[sg-popuplevel="3"] > .sg-head > .sg-label,
.sg-outer[sg-popuplevel="4"] > .sg-head > .sg-label,
.sg-outer[sg-popuplevel="5"] > .sg-head > .sg-label,
.sg-outer[sg-popuplevel="6"] > .sg-head > .sg-label,
.sg-outer[sg-popuplevel="7"] > .sg-head > .sg-label,
.sg-outer[sg-popuplevel="8"] > .sg-head > .sg-label,
.sg-outer[sg-popuplevel="9"] > .sg-head > .sg-label,
.sg-outer[sg-popuplevel="10"] > .sg-head > .sg-label
{
	height:auto !important;
} */
.sg-ff {
    display: inline-block;
    vertical-align: top;
    transform-origin: 0% 0% 0px;
    -webkit-transform-origin: 0% 0% 0px;
}

/* no animation ruins filter resizing for some reason, not anymore looks like */
.sg-filter,
.sg-filter > .sg-filterimg {
    transition: opacity 1s linear, height 0.1s linear, margin 0.1s linear;
}

/* FROM  //d3uc9bh03pwwy.cloudfront.net/sg3-user.css */
#speedgui[data-sg-hash-call="u31~00000141835359453343"] textarea {
    /******** TEMP *******/

    border: 1px solid #f8f8f8;
    border: 1px solid rgba(0, 0, 0, 0.05);
}