body {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 0.9em;
	margin: 0px;
	padding: 0px;
}
	
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzBa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBtIh4imgI8P11RFo6YPCPC0.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxoUt79146ZFaIJxILcpzmhI.woff) format('woff');
}

img.sign_in {
	border: 0px;
}

a {
	color: #000000;
	text-decoration: none;
}

a:hover {
	color: #0099CC;
	font-weight: bold;
}

a.show_qr {
	color: #0099CC;
}

h1 {
	color: #000;
	padding: 0;
	margin: 0;
	margin-bottom: 15px;
	clear: both;
}

div#browser_aler{
	display: block;
	background: #FBD6DC;
	border-bottom: 1px solid #F2768B;
	min-height: 50px;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	line-height: 50px; 
}

div#wrapper
{
	width: 100%;
	margin: 0;
	margin-top: 10px;
}

div#header 
{
	width: 100%;
	height: 77px;
	margin-bottom: 26px;
}

div#menu, div.action-bar
{
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	height: 44px;
	padding-left: 10px;
	padding-right: 10px;
}

div.action-bar a {
	cursor: pointer;
	font-size: 14px;
	width:132px;
	height:40px;
	font-weight: bold;
	margin-top: 10px;
}

ul#menu-container
{
	list-style: none;
	padding-left: 0;
	margin-top: 12px;
}

li.menu-item
{
	display: inline-block;
	font-size: 0.85em;
	margin-right: 5px;
	margin-right: 40px;
}

li.menu-item-breadcrumb
{
	display: inline-block;
	font-size: 0.85em;
	line-spacing: 10px;
	margin-right: 10px;
}

li.menu-item-breadcrumb a {
	text-decoration: none;
}


li.menu-item a
{
	text-decoration: none;
	color: #000;
}

li.menu-item a:hover
{
	text-decoration: none;
	color: #33B5E5;
	font-weight: bold;
}

li.menu-item-logout
{
	float: right;
	margin-right: 5px;
	font-weight: bold;
}

div#content
{
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
}

div#sign-in
{
	margin-left: auto;
	margin-right: auto;
	display: table;
}

#sub-menu {
	margin: 0;
	padding: 0;
}

#sub-menu-container {
	padding-left: 10px;
	margin-top: 10px;
	color: #000;
}

a.top-link {
	text-decoration: none;
	margin-right: 20px;
}

a.top-link:hover {

}

a.study-link {
	text-decoration: none;
}

a.study-link:hover {
}

/* --- Search box --- */

.search {
	background-size: 60px 60px;
	background-image: url(../images/search.png);
	background-color: #fafafa;
	background-position: left;
	background-repeat: no-repeat;
	opacity: 0.6;
    border: 1px solid #AAA;
    color: #666;
    font-size: 12px;
    outline: none;
    padding-top: 3px;
	
	padding-bottom: 3px;
	padding-left: 75px;
	padding-right: 10px;
	width: 150px;

    /* CSS3 */
    border-radius: 2px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
	-webkit-backface-visibility: hidden;
}
.search:hover { 
	width: 200px;
	background-color: #ffffff;
	background-position: left 4px center;
	background-size: 18px 18px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 25px;
	padding-right: 10px;	
}

.search:focus {
	width: 200px;
	background-color: #ffffff;
	background-position: left 4px center;
	background-size: 18px 18px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 25px;
	padding-right: 10px;
}

div.warning {
	background-color: #f0ad4e;
	border: 1px solid #eea236;
	color: #ffffff;
	padding: 10px;
	border-radius: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}

div.danger {
	background-color: #d9534f;
	border: 1px solid #d43f3a;
	color: #ffffff;
	padding: 10px;
	border-radius: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}

div.success {
	background-color: #5cb85c;
	border: 1px solid #4cae4c;
	color: #ffffff;
	padding: 10px;
	border-radius: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}

div#setup-database {
	float: left;
}


/* --- Guide --- */
div#guide {
	margin-left: 50px;
}

div#guide h2 {
	color: #2281CF;
}

p.guide-step {
	margin-bottom: 50px;
}

img.guide-image {
	margin-top: 5px;
	display: block;
}

/*Custom checkbox styling*/
/* Base for label styling */
[type="checkbox"].basic:not(:checked),
[type="checkbox"].basic:checked {
	position: absolute;
	left: -9999px;
}
[type="checkbox"].basic:not(:checked) + label,
[type="checkbox"].basic:checked + label {
	position: relative;
	padding-left: 25px;
	cursor: pointer;
	vertical-align: bottom;
	display: list-item;
	list-style-type: none;
	margin-top: -12px;
	height: 100%;
}

/* checkbox aspect */
[type="checkbox"].basic:not(:checked) + label:before,
[type="checkbox"].basic:checked + label:before {
	content:url(../images/normal_border.png);
	position: absolute;
	left:0; top: 0px;
	width: 18px; height: 18px;
}
/* checked mark aspect */
[type="checkbox"].basic:not(:checked) + label:after,
[type="checkbox"].basic:checked + label:after {
	content:url(../images/blue_checked.png);
	position: absolute;
	left:0; top: 0px;
	transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"].basic:not(:checked) + label:after {
	opacity: 0;
	transform: scale(0);
}
[type="checkbox"].basic:checked + label:after {
	opacity: 1;
	transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"].basic:disabled:not(:checked) + label:before,
[type="checkbox"].basic:disabled:checked + label:before {
	content:url(../images/disabled_border.png);
	position: absolute;
	left:0; top: 0px;
}
[type="checkbox"].basic:disabled:not(:checked) + label:after,
[type="checkbox"].basic:disabled:checked + label:after {
	content:url(../images/disabled_checked.png);
	position: absolute;
	left:0; top: 0px;
}
/* hover */
[type="checkbox"].basic:checked:hover + label:before,
[type="checkbox"].basic:not(:checked):hover + label:before {
	content:url(../images/blue_border.png);
}
[type="checkbox"].basic:disabled:checked:hover + label:before,
[type="checkbox"].basic:disabled:not(:checked):hover + label:before {
	content:url(../images/disabled_border.png);
}




.switchbutton {
	position: absolute;
	margin-left: -9999px;
	visibility: hidden;
}
.switchbutton + label {
	display: block;
	position: relative;
	cursor: pointer;
	outline: none;
	user-select: none;
	float: left;
	margin-top: 7px;
}

input.switchbutton + label {
	padding: 2px;
	width: 28px;
	height: 11px;
	border-radius: 4px;
}

input.switchbutton + label:before,
input.switchbutton + label:after {
	display: block;
	position: absolute;
	top: 1px;
	left: 1px;
	bottom: 1px;
	content: "";
}

input.switchbutton + label:before {
	right: 1px;
	background-color: #cccccc;
	border-radius: 4px;
	transition: background 0.4s;
	border: 1px solid #aaaaaa;

}
input.switchbutton + label:after {
	width: 12px;
	background-color: #FAFAFA;
	border-radius: 4px;
	transition: margin 0.3s;
	border: 1px solid #aaa;
}

input.switchbutton:checked + label:before {
	background-color: #0099CC;
}

input.switchbutton:checked + label:after {
	margin-left: 16px;
}

span.toggle-status {
	float: left;
	margin-top: -2px;
	margin-left: 5px;
}

span.toggle-status.on {
	color: #0088CC;
}

span.toggle-status.off {
	color: #adadad;
}