/*fonts*/
@font-face{
    font-family: 'Proxima Nova';
    src: 	url('/js.ln/fonts/web/proxima_nova/ProximaNova-LightWeb.eot');
    src: 	url('/js.ln/fonts/web/proxima_nova/ProximaNova-LightWeb.eot?#iefix') format('embedded-opentype'),
    url('/js.ln/fonts/web/proxima_nova/ProximaNova-LightWeb.woff') format('woff');
    font-weight: 100;
}
@font-face{
    font-family: 'Proxima Nova';
    src: 	url('/js.ln/fonts/web/proxima_nova/ProximaNova-RegWeb.eot');
    src: 	url('/js.ln/fonts/web/proxima_nova/ProximaNova-RegWeb.eot?#iefix') format('embedded-opentype'),
    url('/js.ln/fonts/web/proxima_nova/ProximaNova-RegWeb.woff') format('woff');
    font-weight: normal;
}
@font-face{
    font-family: 'Proxima Nova';
    src: 	url('/js.ln/fonts/web/proxima_nova/ProximaNova-SboldWeb.eot');
    src: 	url('/js.ln/fonts/web/proxima_nova/ProximaNova-SboldWeb.eot?#iefix') format('embedded-opentype'),
    url('/js.ln/fonts/web/proxima_nova/ProximaNova-SboldWeb.woff') format('woff');
    font-weight: 500;
}
@font-face{
    font-family: 'Proxima Nova';
    src: 	url('/js.ln/fonts/web/proxima_nova/ProximaNova-BoldWeb.eot');
    src: 	url('/js.ln/fonts/web/proxima_nova/ProximaNova-BoldWeb.eot?#iefix') format('embedded-opentype'),
    url('/js.ln/fonts/web/proxima_nova/ProximaNova-BoldWeb.woff') format('woff');
    font-weight: bold;
}

html, body {
    padding: 0;
    margin: 0;
    background: #f2f3f5;
    width:100%;
}
html {
    height: 100%;
}
body {
    min-height: 100%;
    xmin-width:700px;
    /*overflow-y:scroll;*/ /* scroll disabled due to jquery-ui/chrome bug */
    /*---see: http://blog.ricky-stevens.com/jquery-sortable-offset-bug/ */
}


/* special hack to stop google from interfering with the page */
body > iframe#ssIFrame_google {
    display:none;
}


a { text-decoration:none; }
a:hover,
a:focus{ text-decoration:none; }
:focus {outline:0 !important;}
strong,b,.strong,.text-bold { font-weight:bold; }
/* firefox feels focus on select elements isn't part of css spec */
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }
.text-semibold { font-weight:500; }
.text-light { font-weight:100; }

.page-width { max-width:980px; margin:0 auto; }


#sl-app-container {
    min-height: 100%;
}

#sl-app-content {
    position: relative;
    min-height: 100%;
    padding-top: 77px;
    padding-bottom:30px;
}

#sl-app-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 500;
}

#sl-app-footer {
    xposition: absolute;
    xbottom: 0;
    xleft: 0;
    xheight: 30px;
    xwidth: 100%;
    xz-index: 500;
    
    height: 30px;
    text-align: center;
}
#sl-app-footer > div {
    display:inline-block;
    background-color: rgba(255,255,255,0.8);
}

#header-frame {
    position: relative;
    xheight: 77px;
    height: 205px;
    width: 100%;
    border: 0;
    z-index: 1;
    display: block;
    overflow: hidden;
}

#header-frame.expand {
    height: 800px;
}

#wrapper {
    padding: 40px 0;
}

#wrapper > .page-width {
    background: rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 1170px;
    xpadding: 30px 30px 0 30px;
    padding: 95px 30px 0 30px;
}

#wrapper #content {
    position: relative;
}

#wrapper #content.has-right-column {
    padding-right: 300px;
}

#wrapper #content > aside.right-column {
    position: absolute;
    top: 0;
    right: 0;
    width: 275px;
}

#wrapper {
    color: #444;
}

#wrapper h1,
#wrapper h2,
#wrapper h3,
#wrapper h4,
#wrapper h5 {
    font-family: Roboto, sans-serif;
}


@media (max-width: 1000px) {
    #sl-app-content {
        padding-top: 142px;
        padding-bottom:30px;
        width: 100%;
    }
    
    #wrapper {
        padding: 40px 0 40px 0;
    }
    
    #wrapper > .page-width {
        xmax-width: 980px;
        padding-top: 95px;
        padding-bottom: 5px;
    }

    #wrapper #content {
        min-height: 540px;
    }

    #wrapper #content.has-right-column {
        padding-right: 160px;
    }

    #wrapper #content > aside.right-column {
        width: 135px;
    }

    #sl-create-new-list {
        width: 135px;
    }

    #sl-create-new-list .element-meta {
        float: none;
        display: block;
        margin: 0 0 5px 0;
    }

    #header-frame {
        height: 270px;
    }

    #header-frame.expand {
        height: 800px;
    }
}


.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

#intro-overlay {
    xdisplay:none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20000;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,1);
    xmargin-top: -150px;

    -webkit-transition: opacity 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
    transition:         opacity 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
#intro-text-table {
    position: relative;
    width: 100%;
    height: 100%;
    display: table;
}
#intro-text-cell {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
    text-align: center;
    padding-bottom: 10%;

    color: black;
    font-family: Roboto, serif;
    font-size: 40px;
}
#intro-logo {
    margin-bottom: 10px;
    opacity: 0;

    -webkit-transition: opacity 2000ms cubic-bezier(0.075, 0.82, 0.165, 1);
    transition:         opacity 2000ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
#intro-text {
}

#intro-dd-part1,
#intro-dd-part2 {
    opacity: 0;

    -webkit-transition: opacity 1500ms cubic-bezier(0.075, 0.82, 0.165, 1);
    transition:         opacity 1500ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
#intro-dd-part1 .fa {
    -webkit-transition: color 1000ms cubic-bezier(0.075, 0.82, 0.165, 1);
    transition:         color 1000ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

#intro-dd-feedback {
    display:none;
}
#intro-dd-feedback .feedback-text {
    color: #444;
    font-family: Roboto, serif;
    font-size: 22px;
}


.question-element-heading { display: none; }


.content-box,
.transparent-box {
    margin-bottom:20px;
}
.content-box:last-child,
.transparent-box:last-child {
    margin-bottom:0;
}

.content-box {
    background:#ffffff; box-shadow:0 1px 2px 0 rgba(40,60,70,0.1);
    /*border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;*/
}

.content-box-title { border-bottom: 1px solid #e8ecef; height:40px; position:relative; }
.content-box-title .inner { padding:0; color:#4F78A1; }
.content-box-body { padding:20px; font-size:14px; }

.right-column .content-box-body { padding:20px; }
.content-box-body section { margin-bottom:20px; }
.content-box-body section.app-section-buttons { margin-top:30px; margin-bottom:0; text-align:right; }
.content-box-body .content-box-heading { margin-bottom:10px; font-size:22px; xline-height:34px; font-family: Roboto, sans-serif; }
.content-box .instruction { color: #999999; }


.content-box .question-preview-text { font-size:14px; }


.content-box.content-box-narrow { }
.content-box.content-box-narrow .content-box-body { padding:10px; }


#sl-request-transition-wrap {
    position:fixed; bottom:-100px; left:50%; opacity:0; width:80px; height:50px; background:#283b46; border-radius: 6px;
    -webkit-transition: opacity 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
    transition:         opacity 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
#sl-request-transition-wrap.visible {
    opacity: 1;
}
#sl-request-transition-wrap.relocate {
    bottom: 20px;
}
#sl-request-save-spinner { position:absolute; top:10px; left:24px; width:100%; }
#sl-request-save-complete-checkmark { display:none; position:absolute; width:100%; top:12px; left:0; color:#fff; text-align:center; }
#sl-request-save-complete-checkmark .glyphicons { font-size:24px; }


/*========================================*/
/*glyphicons customization*/
/*========================================*/

.glyphicons { font-size:inherit; }
.btn .glyphicons { vertical-align:baseline; }


/*========================================*/
/*bootstrap customization*/
/*========================================*/

/*modal*/
.modal { padding-top:70px; }
.modal h4.modal-title { font-size:20px; }
.modal .modal-header { border-bottom:0; padding-bottom:5px; }
.modal .modal-footer { border-top:0; padding-top:5px; }
.modal-content { box-shadow: 0 0 6px rgba(0,0,0,0.2); }

/*popover*/
.popover .popover-content p:last-child { margin-bottom:0; }

.control-label-tip .glyphicons { top:2px; color:#BEC9D5; cursor:default; }

label.radio, label.checkbox { font-weight:normal; cursor:pointer; }

.form-control { box-shadow: none; transition:none; }
.form-control:focus {
    border-color: #4F78A1; transition:none;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(83, 121, 148, 0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 1px rgba(83, 121, 148, 0.6);
}
.form-control:active { }
select.form-control option > span:after { content: "&nbsp;&nbsp;"; }
textarea.form-control { min-height: 100px; resize: vertical; }

.form-horizontal .control-label, .form-horizontal .radio, .form-horizontal .checkbox {
    padding-bottom:7px;
}

.sl-form .sl-rich-text .btn-toolbar { margin-bottom:10px; }
.sl-form .sl-rich-text textarea.form-control { min-height:70px; }

.sl-form-group { margin-bottom:15px; margin-left:180px; }
.sl-form-group .control-label { width:180px; float:left; margin-left:-180px; text-align: left; color: #7D848C; font-weight:normal; }
.sl-form-group input.form-control.inline { display:inline-block; }
.sl-form-group select.form-control { width:auto; display:inline-block; background-color:#ffffff; xpadding-right:7px; }
.sl-form-group select.form-control.full { width:100%; }
.sl-form-group select.form-control option { vertical-align:middle; }
.sl-form-group textarea.form-control { min-height:100px; resize: vertical; }

.sl-form-group-narrow { margin-bottom:10px; margin-left:120px; }
.sl-form-group-narrow .control-label { width:120px; float:left; margin-left:-120px; text-align: left; color: #7D848C; font-weight:normal; }

.sl-form-group.full { margin-left: 0; }
.sl-form-group.full .control-label { width:auto; float:none; margin-left:0; }

.sl-field-wrap > * { vertical-align:middle; }
.sl-field-wrap .btn .glyphicons { top:2px; margin-right:5px; }


.sl-form input[type="radio"],
.sl-form input[type="checkbox"] { margin-top:3px; }

textarea.form-control.list-view { min-height:150px; }
textarea.form-control.rich-text { min-height:200px; }


/* i'm not sure if this is actually doing anything since adding the fancy selectbox stuff */
select.form-control {
    -webkit-appearance: none; /* To gain control over the appearance on WebKit */
    -moz-appearance: none; /* To gain control over the appearance on Gecko */
    /* To gain control over the appearance on Presto (Opera) and Trident (IE)
     Note that it also work on Gecko and has partial effects on WebKit */
    background:#ffffff;
}
select.form-control { padding: 6px 26px 6px 6px; }

/* firefox, webkit */
select[size].form-control,select[multiple].form-control,select[multiple][size].form-control{
    background-image:none;
    padding-right:3px
}
select.form-control,select[size="0"].form-control,select[size="1"].form-control{
    /*background-image:url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);*/
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAECAYAAACHtL/sAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADJJREFUKFNjAIL/uPB/IIUVgmSgGCyArhGEwQpxQXQDQJBozSCIzQAQJEozCMIN+M8AAP4ne4UHS6XlAAAAAElFTkSuQmCC);
    background-repeat:no-repeat;
    background-position:right center;
    padding-right:20px
}

/* ie10 */
select.form-control::-ms-expand{
    display:none;
}


.form-control.form-searchbox-left,
.form-control.form-searchbox-right {
    background-image: url(/admin/image/search-icon.png);
    background-repeat: no-repeat;
}
.form-control.form-searchbox-right {
    background-position: 10px center;
    padding-left: 34px;
}

label.fancy-select-box-look { margin:0; font-weight:normal; }


/* this is a hack because controlling select box appearance is mess in webkit */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .form-horizontal .control-label {
        letter-spacing:0;
    }
    ::-webkit-validation-bubble-message{
        -webkit-box-shadow:none;
        box-shadow:none;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, #000));
        border:0;
        color:#fff;
        font:13px/17px "Lucida Grande",Arial,"Liberation Sans",FreeSans,sans-serif;
        overflow:hidden;
        padding:15px 15px 17px;
        text-shadow:#000 0 0 1px;
        min-height:16px
    }
    ::-webkit-validation-bubble-arrow,::-webkit-validation-bubble-top-outer-arrow,::-webkit-validation-bubble-top-inner-arrow{
        -webkit-box-shadow:none;
        box-shadow:none;
        background:#666;
        border-color:#666
    }
}


div.rich-text-inline h1,
div.rich-text-inline h2,
div.rich-text-inline h3,
div.rich-text-inline h4,
div.rich-text-inline h5,
div.rich-text-inline h6 { margin-top:0; }
div.rich-text-inline > p:last-child { margin-bottom:0; }


.btn-link:hover,
.btn-link:focus {
    text-decoration:none;
}

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 999px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.sl-question-checkbox-changer { margin-top: 20px; padding-left:34px; }
.sl-answers-option { margin-top: 15px; }