/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
@import url('https://fonts.googleapis.com/css?family=Raleway:400,500');


/* Plugins */
@import url('bootstrap.css');
@import url('bootstrap-theme.css');
@import url('bootstrap-select.css');

html,body{ margin: 0;padding: 0; }

body{
	font-family: "Raleway";
	background-color: #007FFF;
	background: url(../images/bg.jpg);
}

h1{ padding: 30px; margin: 0; font-size: 20px; }


.molecule-composer{
	padding: 10px;
	margin: 0 30px;
	border-radius: 5px;
	background-color: #FFF;
}
.composer-container{
	float: left;
	width: 50%;
}
.display-container{
	float: left;
	width: 50%;
}

.buttons-row{
	text-align: center;
	padding: 10px 0 10px 0;
}

/* 3Dmolecule */
.buttons3D button{ height: 40px; width: 50px; }
.buttons3D button{ background-position: center center !important; }

.mol-stick{ background: url(../images/mol_stick.png) no-repeat center center; background-size: 30px; }
.mol-ball{ background: url(../images/mol_ball.png) no-repeat center center; background-size: 30px; }
.mol-sphere{ background: url(../images/mol_sphere.png) no-repeat center center; background-size: 30px; }

#ketcherFrame{
	width: 100%;
	height: 500px;
	margin: 0;
	padding: 0;
	border: none;}
		

#convertTo3DButton{ padding: 7px 15px; font-size: 16px; }

#MOL_DIV{
	margin-right: 30px;
	background: transparent !important;
	height:460px;
	border-radius: 5px;
	border: 1px solid #EEE;
}
#MOL_DIV canvas{
	*margin-top: 50px;
	*height: 450px !important;
}

.loader{
	display: none;
	position: fixed;
	top:0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 9000;
	background: url(../images/loading.gif) no-repeat center center;
	background-color: rgba(255,255,255,0.5);
}

.btn-run{
	background-color: #007FFF !important;
	border: 1px solid #007FFF;
	color: #FFF;
}