/* ----------------------------------------------------------------
    Copyright (c) Demosphere International Inc.
    No permission is granted for any purpose without prior
    written consent from Demosphere International Inc.
-------------------------------------------------------------------*/
#juno-frame { width: 900px; }
.tn-badge,
.tn-profile .tn-box { margin-left: 6px; }

#dii-login-help a { float: right; color: rgb(27, 117, 187); }
#login-window input[type="text"],
#dlg-new-user input[type="text"],
#login-window input[type="password"],
#dlg-new-user input[type="password"] { border: 1px solid #c7cfd1; padding: 6px 12px; }

#reg-login-welcome  > div > div:first-child { font-size: 1.5em; }
#reg-login-welcome  > div > div:last-child { font-size: 1.2em; color: #cc7100; }

#login-window { margin-top: 12px; }
#login-window #login-remember { display: block; margin: 12px 0 18px 24px; }
#login-window #login-forgot { display: block; margin: 12px 12px 0 0; text-align: right; font-style: italic; }
#login-window #login-separator > div > div.separator { display: inline-block; height: 40px; margin: 12px 6px; border-left: 1px solid #e0e0e0; }

.tn-box .btn.btn-block { display: block; margin-bottom: 5px; padding: 0; }
.tn-box .btn i { width: 36px; line-height: 34px; font-size: 1.6em; text-align: center; }
.tn-box .btn div { display: inline-block; padding: 6px 10px; line-height: 1.4em; font-size: 14px; }
.tn-box .btn.btn-facebook { background-color: #3b5998; color: #fff; }
.tn-box .btn.btn-facebook i { border-right: 1px solid #2f4679; }
.tn-box .btn.btn-google-plus { background-color: #dd4b38; color: #fff; }
.tn-box .btn.btn-google-plus i { border-right: 1px solid #b03b2d; }
.tn-box .btn.btn-white { border: 1px solid #dbdbdb; color: #8c8c8c; }
.tn-box .btn.btn-white i { border-right: 1px solid #e0e0e0; }
.tn-box .btn.btn-white:hover { border-color: #449d44; background-color: #5cb85c; color: #fff; }
.tn-box .btn.btn-white:hover i { border-color: #449d44; }
.tn-box .btn.btn-green, .tn-box .btn.btn-gray { min-width: 120px; min-height: 30px; margin-left: 8px; padding: 0; font-weight: bold; text-align: center; line-height: 30px; font-size: 12px; color: #fff; }
.tn-box-title { color: #5174d3; }
.form-group label { font-weight: normal; }

.tn-box-content #forgot-password-form .tn-row { margin-bottom: 2px; }
.tn-box-content #forgot-password-form .btn { display: block; }
.tn-box-content #forgot-password-form .tn-value input { width: 100%; padding: 6px 6px; }

#pw-hint { margin-top: 4px; font-size: 10px; font-style: italic; color: #cc7100; }
h3#organization-name { display:none; margin-bottom: 6px; text-align: center; }

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#juno-frame { width: 100%; }
/* Styles */
	div#design-content-wrapper { width: 100% !important; }
	.tn-box .btn.btn-green { margin: 5px 0px; width: 100%; padding-top: 8px; padding-bottom: 8px; }
	#login-window #login-separator > div > div.separator { height: 1px; width: 45%; border-left: none; border-top: 1px solid #e0e0e0; float: left; margin: 12px 0; }
	#login-window #login-separator > div > div.or { width: 10%; float: left; text-align: center; margin: 4px 0 12px 0; }
	#login-window { margin: auto }
	.dii-widget-content { width: auto !important; max-width: auto !important;  }
	#login-window { width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; min-width: 0px !important; min-height: 0px !important;}
	#login-window:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
	.dii-widget-content h3#organization-name { display: block; }
	#login-window input[type="text"],
	#dlg-new-user input[type="text"],
	#login-window input[type="password"],
	#dlg-new-user input[type="password"] { padding: 6px 0px;}
}

@media only screen and (min-width : 481px) and (max-width: 900px) {
	#juno-frame { width: 100%; }
	div#design-content-wrapper { width: 100% !important; }
	.dii-widget-content { width: auto !important; max-width: none !important; }
	#dialog-claim-account-shell { height: auto !important; width: auto !important; max-width: none !important; max-height: none !important; min-width: 0px !important; min-height: 0px !important; }
	#dialog-claim-account-shell:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
	.tn-box .btn.btn-green { margin: 5px 0px; width: 100%; padding-top: 8px; padding-bottom: 8px; }
	/*#login-window #login-separator > div > div.separator { display:none; }
	#login-window #login-separator > div > div.or { display:none; }*/
	#login-window { margin: auto }
	#login-window input[type="text"],
	#dlg-new-user input[type="text"],
	#login-window input[type="password"],
	#dlg-new-user input[type="password"] { padding: 6px 0px;}
	/* Styles */
	/* Styles */
	.tn-box .tn-col-1, .tn-box .tn-col-2, .tn-box .tn-col-3, .tn-box .tn-col-4,
	.tn-box .tn-col-5, .tn-box .tn-col-6, .tn-box .tn-col-7, .tn-box .tn-col-8, 
	.tn-box .tn-col-9, .tn-box .tn-col-10, .tn-box .tn-col-12 { width: 45%; }

	.tn-box #login-form .tn-row .tn-col-1, 
	.tn-box #login-form .tn-row .tn-col-2, 
	.tn-box #login-form .tn-row .tn-col-3, 
	.tn-box #login-form .tn-row .tn-col-4,
	.tn-box #login-form .tn-row .tn-col-5, 
	.tn-box #login-form .tn-row .tn-col-6, 
	.tn-box #login-form .tn-row .tn-col-7, 
	.tn-box #login-form .tn-row .tn-col-8, 
	.tn-box #login-form .tn-row .tn-col-9, 
	.tn-box #login-form .tn-row .tn-col-10, 
	.tn-box #login-form .tn-row .tn-col-12 { width: 100%; }

	.tn-box #forgot-password .tn-row .tn-col-1, 
	.tn-box #forgot-password .tn-row .tn-col-2, 
	.tn-box #forgot-password .tn-row .tn-col-3, 
	.tn-box #forgot-password .tn-row .tn-col-4,
	.tn-box #forgot-password .tn-row .tn-col-5, 
	.tn-box #forgot-password .tn-row .tn-col-6, 
	.tn-box #forgot-password .tn-row .tn-col-7, 
	.tn-box #forgot-password .tn-row .tn-col-8, 
	.tn-box #forgot-password .tn-row .tn-col-9, 
	.tn-box #forgot-password .tn-row .tn-col-10, 
	.tn-box #forgot-password .tn-row .tn-col-12 { width: 100%; }

	.dii-widget-content h3#organization-name { display: block; }

	.tn-box #login-separator { width: 10%; }
	.tn-box #login-separator > div { text-align: center; }

	.tn-box #login-opts { padding-top: 10px; }

	.tn-offset-1, .tn-offset-2, .tn-offset-4 { margin-left: 0%; }
	.tn-label { text-align: left; }
	.tn-box .tn-value { margin: 0; }
	.tn-value input { width: 100%; margin: 5px 0px; }
	.tn-box .btn.btn-green { margin: 5px 0px; width: 100%; padding-top: 8px; padding-bottom: 8px; }
}