/* Reset browser styles
---------------------------------------------------------- */
body,div,form,input,p{margin: 0;padding: 0;}

/* General Styles
---------------------------------------------------------- */
html { background: #fff; }
body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#fff;}
input, select, option, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; line-height: 17px; }
strong,b{font-weight:bold;}
em{font-style:italic;}
a{outline:none; text-decoration:none;}
a img { border: 0px; }

/* Background (to change the image on the login and forgot page just replace 'Cloud_Current_Background.jpg' with the new one)
---------------------------------------------------------- */
div#picturewrapper{background:url(../images/layout/login/Cloud_Current_Background.jpg) no-repeat center -75px; background-size:cover; }

/* Container
---------------------------------------------------------- */
div#container{ margin: 60px auto 0px auto; width: 730px; overflow: hidden }

/* Header
---------------------------------------------------------- */
div#header{display:inline-block; width: 100%;}
div#header .thalentologo {width: 250px; float: left; padding: 15px 0 15px 15%; }
div#header .devorstaging {width: 250px; float: right; padding: 15px 15% 15px 0%; }
p.error{background-color: #21a2c6; color: #fff; text-align: center; padding: 17px 14px; font-weight: bold; font-size:1.3em;}
p.error a { color: #fff; text-decoration: underline; }
p.maintenance{background-color: #21a2c6; color: #fff; text-align: center; padding: 17px 14px; font-weight: bold; font-size:1.3em; margin-top: -50px;}

/* Forms
---------------------------------------------------------- */
div.content{overflow:hidden; width:243px; height: 224px; padding:20px 49px 20px 48px; float: left; background-color: white; margin-bottom: 20%;}
div.content form div.entry{width:100%; clear:both; overflow:hidden; margin:0 0 15px;}
div.content form div.entry label{display:block; font-size: 14px; color:#676767; padding:0 0 5px 4px; text-align: center;}
div.content form div.entry input {border: 1px solid #7A7A7A; height:28px; line-height: 28px; width:99%; padding: 2px 0 0 0; font-size: 12px; text-indent: 10px;}
div.content form div.entry input:disabled {background: #d3d3d3;}
div.content form div.entry select {border: 1px solid #7A7A7A; background: none; height:32px; line-height: 28px; width:100%; padding: 2px 0 0 0; font-size: 12px; text-indent: 5px}
div.content form div.btn{margin-top: 10px;}
div.content form div.btn input{border: 0; width: 100%; height: 30px; color: #fff; font-size: 16px; cursor: pointer;}

div.content form a{text-decoration:none; color:#676767; float:right; margin:14px 0 18px 0; background:url(../images/layout/login/login-forgot-pasword.png) no-repeat right 0; line-height:18px; height: 21px; padding:0 20px 0 2px; font-size: 12px;}
div.content form a:hover{color:#237b8d;}
div.content form .ihavepassword{color:#21a2c6; text-align: center; font-weight: bold; font-size:1.5em; margin-bottom: 15px;}
div.content form .ihaveshortcode{color:#92c024; text-align: center; font-weight: bold; font-size:1.5em; margin-bottom: 15px;}

div.credentials form div.btn input {background-color: #21a2c6;}
div.credentials form div.btn input:hover{background-color: #2ea8bd;}

div.shortcode { margin-left: 50px; }
div.shortcode form div.btn input {background-color: #92c024;}
div.shortcode form div.btn input:hover{background-color: #7ca31f;}

div.content.forgot {margin: auto; float: none; margin-bottom: 30%; height: 150px; }
div.content.forgot form div.btn input {background-color: #21a2c6;}
div.content.forgot form div.btn input:hover{background-color: #2ea8bd;}
div.content.forgot form a {padding: 15px 0 0 0; background: none;}

input#password { float: left; }
#showPassword { display: none; width: 16px; margin: 8px 0 0 -28px; }

div.academy { float:left; width:100%; text-align:center; margin:12px 0 0 0; }
div.academy a { text-decoration:none; background:url(../images/layout/academy/i-help.png) no-repeat right; background-size:20px 20px; padding:0 25px 0 0; color:#676767; display:inline-block; height:20px; font-size:12px; line-height:18px; }


/* Footer
---------------------------------------------------------- */
p.moreinfo{color: #3e3e40; text-align: right;}
p.moreinfo a{color: #3e3e40; text-decoration: underline;}

div#footer #aboutpeople { float: left; padding-top: 15px; padding-left: 15%; }
div#footer #aboutpeople span { font-size:3em; line-height: 17px; }
div#footer #aboutpeople span a {color: #92c024;}
div#footer #aboutpeople span a:hover {color: #7ca31f;}

div#footer #moreinfo { float: right; text-align: right; font-size:1.5em;  color:#676767; padding-top: 5px; padding-right: 20%;}

/* social media on the splash */
div#socialmedia{ margin: 0 0 20px 0; text-align: center; }
div#socialmedia a { height: 30px; width: 30px; text-indent: -9000px; display:inline-block; margin: 6px 0 0 0;  }
div#socialmedia a#linkedin { background: transparent url("../images/layout/socialmedia/linkedin_new.png") no-repeat 0 0;   }
div#socialmedia a#twitter { background: transparent url("../images/layout/socialmedia/twitter_new.png") no-repeat 0 0;  }
div#socialmedia a#facebook { background: transparent url("../images/layout/socialmedia/facebook_new.png") no-repeat 0 0;  }
div#socialmedia a#pinterest { background: transparent url("../images/layout/socialmedia/pinterest_new.png") no-repeat 0 0;  }
div#socialmedia a#slideshare { background: transparent url("../images/layout/socialmedia/slideshare_new.png") no-repeat 0 0;  }

/* Responsiveness
---------------------------------------------------------- */
@media screen and (max-width: 780px) {
	div#container { width: 100%; }
	div.content { clear: both; float: none; margin: 20px auto; }
	p.moreinfo{ margin-right: 0; }
}