/*
    Colour Palette:
    ---------------
    Background (grey): rgb(42, 44, 53) / #2A2C35;
    Primary CTA (orange): rgb(232, 115, 49) / #E87331;
    Focused CTA (dark orange): rgb(229, 87, 11) / #E5570B;
    Text: rgb(136, 136, 136) / #888;
*/

@import url('https://fonts.googleapis.com/css?family=Cabin:400,400i,700,700i');

html { background: #2A2C35 url(../images/login/background.jpg) no-repeat center center fixed; background-size: cover; height: 100%; }
body { margin: 0; padding: 0; height: 100%; position: relative; font-family: Cabin,"Segoe UI",Arial,Helvetica,sans-serif; font-size: 14px; font-weight: bold; color: white; }
form { height: 100%; }
h1 { font-size: 16px; margin:30px 0 25px 0; }
p { margin: 0 0 10px 0; text-align: justify; }
a,
.link { color: rgb(232, 115, 49); text-decoration: none; transition: color 0.1s; cursor: pointer; }
a:hover,
.link:hover { color: rgb(229, 87, 11); text-decoration: underline; }
input,
select { font-family: Cabin,"Segoe UI",Arial,Helvetica,sans-serif; font-size: 14px; font-weight: bold; }
input[type=text],
input[type=password],
select { padding: 4px 6px 5px 6px; width: 348px; color: #434345; background-color: rgba(255, 255, 255, 0.85); box-shadow: 0 0 1px black, 0 0 1px black, 0 0 2px white; border: none; border-radius: 2px; }
select { padding: 3px 4px 4px 3px; width: 360px; }
input[type=text]:focus,
input[type=password]:focus,
select:focus { box-shadow: 0 0 1px #E87331, 0 0 1px #E87331, 0 0 1px #E87331, 0 0 1px #E87331, 0 0 1px #E87331; }
input[type=text].invalid,
input[type=password].invalid { background-color:rgba(255, 230, 230, 0.8); box-shadow: 0 0 1px rgb(255, 0, 0), 0 0 1px rgb(255, 0, 0), 0 0 1px rgb(255, 0, 0); }
input[type=text][readonly=readonly],
input[type=password][readonly=readonly] { background:rgba(200, 200, 200, 0.8); color:#666; box-shadow: 0 0 1px black, 0 0 1px black, 0 0 2px white; }
input::-moz-placeholder { color: #777; opacity: 1; }
input::-webkit-input-placeholder { color: #777; opacity: 1; }
input:-ms-input-placeholder { color: #777; opacity: 1; }
input:focus::-moz-placeholder { color: transparent; }
input:focus::-webkit-input-placeholder { color: transparent; }
pre { font-family: Consolas,monospace; font-size: 12px; }
.button { padding: 6px 15px 8px 15px; font-size: 14px; text-decoration: none; background-color: rgba(232, 115, 49, 0.9); color: white; box-shadow: 0 0 1px black, 0 0 1px black, 0 0 2px white; border-radius: 2px; float: right; text-shadow: 0 0 2px #222, 0 0 3px white; cursor: pointer; position:relative; transition: background-color 0.1s; }
.button:hover { background-color: rgba(229, 87, 11, 0.9); color: white; text-decoration: none; }
.button.submitted { background-color:rgba(100, 100, 100, 0.9); color:#777; text-shadow:none; box-shadow: 0 0 1px black; }
.button.submitted .animation { background:url(../images/loading-16x16-ffffff-6f6c6c.gif) no-repeat center center; position:absolute; top:0; left:0; bottom:0; right:0; }
.hidden { display: none; }
.group:after { display: block; content: ""; clear: both; }

.error-page #main .container { width: 1000px; }
.error-page,
.error-page p { text-align: center; }
.error-page .exception { background-color: rgba(0, 0, 0, 0.7); border: 1px solid white; border-radius: 3px 0 0 3px; box-shadow: 0 0 5px black; font-weight: normal; margin: 40px 0 20px 0; padding: 0 15px 8px 15px; text-align: left; max-height: 205px; overflow-y: scroll; }
.error-page .exception .azure-role-instance-id { float: right; margin-top: 10px; }
.error-page .exception h2 { font-size: 18px; margin-top: 10px; }
.error-page .exception h3 { font-size: 14px; margin-top: 15px; }
.error-page .exception p { text-align: left; }
.error-page .exception .bad { font-weight: bold; color: #E6AF22; }

.internal-user-panel { background:Black; position:fixed; left:0; right:0; bottom:0; padding:0 0 7px 5px; min-height:28px; border-top:1px solid #eef5fc; z-index:10000; color:#444; font-weight: normal; }
.internal-user-panel ul.messages { list-style:none; margin:0; padding:0 0 0 60px; }
.internal-user-panel ul.messages li { background: #c5e0fc; float: right; border-radius: 3px; border: 1px solid White; margin: 7px 6px 0 0; padding: 2px 5px; font-size: 11px; line-height: 15px; }
.internal-user-panel ul.messages li.success { background: #d6ffce; }
.internal-user-panel ul.messages li.warning { background: #fff6cd; }
.internal-user-panel ul.messages li.error { background: #ffd6d6; }
.internal-user-panel ul.messages li strong { color:black; }
.internal-user-panel ul.messages:after { content:'.'; float:none; clear:both; display:block; height:0; }
.internal-user-panel a.admin { display:block; color:white; float:left; margin:11px 0 0 5px; font-size:11px; line-height:1em; text-decoration:none; border-bottom:1px dotted white; }
.internal-user-panel a.admin:hover { border-bottom-style:solid; }

#image-preloader { width:0; height:0; overflow:hidden; }
#image-preloader .loading-1 { background:url(../images/loading-24x24-ffffff-474747.gif) no-repeat; }
#image-preloader .loading-2 { background:url(../images/loading-16x16-ffffff-6f6c6c.gif) no-repeat; }
#image-preloader .error { background: url(../images/icons/new-error.png) no-repeat; }
#image-preloader .success { background: url(../images/icons/new-success.png) no-repeat; }

#help-menu { position: absolute; top: -134px; right: 20px; width: 360px; text-align: center; box-shadow: 0 0 1px black, 0 0 1px black, 0 0 2px white; border-radius: 0 0 2px 2px; transition: top 0.1s; z-index: 2; }
#help-menu:hover,
#help-menu.hover { top: 0; }
#help-menu ul { background-color: rgba(255, 255, 255, 0.8); list-style: none; margin: 0; padding: 5px; }
#help-menu ul li a { display: block; line-height: 29px; padding-bottom: 2px; color: #888; font-weight: normal; border-radius: 2px; transition: background-color 0.1s; }
#help-menu ul li a:hover { background-color: rgba(0, 0, 0, 0.15); text-decoration: none; }
#help-menu .grip { background: rgba(232, 115, 49, 0.9); text-align:center; padding:8px 10px 9px 10px; border-radius: 0 0 2px 2px; cursor: default; transition: background-color 0.1s; }
#help-menu .grip .text { display:inline-block; background: url(../images/login/more-arrows.png) no-repeat right -64px; line-height: 21px; padding-right: 23px; text-shadow: 0 0 2px #222, 0 0 3px white; }
#help-menu:hover .grip,
#help-menu.hover .grip { background-color: rgba(229, 87, 11, 0.9); }
#help-menu:hover .grip .text,
#help-menu.hover .grip .text { background-position: right -4px; }

.user-message { height: 1px; }
.user-message .container { margin:auto; max-width:900px; color: white; font-weight: normal; }
.user-message .container-2 { background: rgba(0, 0, 0, 0.7); padding: 10px 15px 5px 15px; margin:0 15px 0 15px; box-shadow: 0 0 1px black, 0 0 1px black, 0 0 2px white; border-radius: 0 0 2px 2px; }
.user-message h1 { margin:0; padding:0; font-size:18px; }

#container { background: url(../images/background-texture.png); width: 100%; height: 100%; padding: 0; margin: 0; }

#main .container { width: 370px; height: 450px; margin:auto; text-align: center; }
#main .storefeeder-logo { width: 329px; margin: 0 0 20px 0; }
#main input[type=text],
#main input[type=password],
#main select,
#main .button { margin: 5px 0 10px 0; }
#main .panel-padding { margin: 0 5px; }
#main .slide { float: right; line-height: 19px; }
#main .slide .link { display: inline-block; background: url(../images/login/more-arrows.png) no-repeat; line-height: 19px; }
#main .slide.left .link { background-position: right -155px; padding-right: 23px; }
#main .slide.left .link:hover { background-position: right -275px; }
#main .slide.right .link { background-position: left -215px; padding-left: 23px; }
#main .slide.right .link:hover { background-position: left -335px; }

#sliding-panels { width: 100%; height: 175px; overflow: hidden; position: relative; }
#sliding-panels .panel { width: 100%; position: absolute; top: 0; transition: left 0.3s; }
#sliding-panels #login.panel { left: 0; }
#sliding-panels #change-password.panel { left: -100%; }
#sliding-panels #reset-password.panel { left: 100%; }
#sliding-panels.reset-password-active #login.panel { left: -100%; }
#sliding-panels.reset-password-active #reset-password.panel { left: 0; }
#sliding-panels.reset-password-active #change-password.panel { left: -200%; }
#sliding-panels.change-password-active #login.panel { left: 100%; }
#sliding-panels.change-password-active #reset-password.panel { left: 200%; }
#sliding-panels.change-password-active #change-password.panel { left: 0; }

.validation-summary { background: rgba(0, 0, 0, 0.7); margin:0 5px; padding: 9px 10px 9px 10px; color: white; box-shadow: 0 0 1px black, 0 0 1px white; border-radius: 2px; font-size:13px; font-weight:normal; }
.validation-summary ul { margin: 0; padding: 0; color: white; list-style:none; }
.validation-summary ul li { background: url(../images/icons/new-error.png) no-repeat left 2px; margin: 0; padding: 0 0 4px 20px; }
.validation-summary.success ul li { background-image: url(../images/icons/new-success.png); }

.optimised-for-firefox td { height:1px; }
.optimised-for-firefox .container { background: rgba(0, 0, 0, 0.8) url(../images/login/firefox-logo.png) no-repeat 11px 11px; width: 440px; margin: auto; padding: 16px 0 19px 54px; color: white; font-weight: normal; box-shadow: 0 0 1px black, 0 0 1px white; border-radius: 2px; }
.optimised-for-firefox a { font-weight: bold; }

#copyright { height: 1px; }
#copyright .container { width: 360px; margin: auto; padding: 15px; text-align: center; font-size: 11px; font-weight: normal; text-shadow: 0 0 2px black; }

#spacing { height: 0; }
.internal-user-panel-active #spacing { height: 36px; }

#channel-logos { height: 1px; }
#channel-logos .container { height: 50px; background: rgba(255, 255, 255, 0.7) url(../images/login/channel-logos.png) repeat-x; box-shadow: 0 0 1px black, 0 0 1px black, 0 0 2px white; text-align: center; overflow: hidden; }

#processing { background:rgba(0, 0, 0, 0.9); position:fixed; left:0; right:0; bottom:-51px; border-top:1px solid #EEF5FC; color:white; padding:13px; text-align:right; line-height:24px; font-weight:normal; text-transform:uppercase; z-index:9999; }
#processing .text { float:right; }
#processing .animation { background:url(../images/loading-24x24-ffffff-474747.gif) no-repeat; width:24px; height:24px; float:right; margin-left:10px; }

@media only screen and (max-device-width : 600px), only screen and (max-width: 600px)
{
    body { min-width: 380px; min-height: 460px; }
    #help-menu { left: 50%; margin-left:-180px; }
    .user-message { display: none; }
    .optimised-for-firefox { display: none; }
    #channel-logos { display: none; }
    .internal-user-panel-active #spacing { height: 64px; }
}

/* #region Magento external integration */

.external-magento { }
.external-magento #main .container { height: auto; }

/* #endregion */