body {margin:0; padding:0; font-family: 'Fira Sans', sans-serif;}
img {border:0;}

#container {padding-bottom:32px;}

#content {width:1320px; margin-left:auto; margin-right:auto; margin-top:12px; background-image:url('/dnevnik/images/bg.jpg'); background-repeat: no-repeat; background-position: 0 -180px;}

#slogan {display:block; font-size:36px; font-weight:500; color: rgb(114,146,203); text-align:center; width: 740px; margin-left:-34px;}

#lead {margin-top:48px; width: 740px;  display:block;}

.bhold {display:inline-block; width: 327px;}

#bleft, #bright {display:inline-block; width: 300px; background-color: rgb(225,233,243); padding:45px 14px 24px 14px; line-height:28px; margin-bottom:-2px;}
#bleft { background-image:url('/dnevnik/images/booktopleft.png'); background-repeat: no-repeat;}
#bright { background-image:url('/dnevnik/images/booktopright.png'); background-repeat: no-repeat;}
#leftd { background-image:url('/dnevnik/images/bookdownleft.png'); background-repeat: no-repeat; height:13px; display:inline-block; width: 328px; margin-top:-2px;}
#rightd { background-image:url('/dnevnik/images/bookdownright.png'); background-repeat: no-repeat; height:13px; display:inline-block; width: 328px; margin-top:-2px;}

.buttondark {cursor:pointer; border-radius:8px; background-color: rgb(43,68,130); display:block; text-align:center; }
.buttondark a {display:block; height:100%; width:100%;  padding:14px 14px 14px 0;}
.buttondark a:link, .buttondark a:visited, .buttondark a:hover {color: #fff; text-decoration:none; }

#learnmore {width:168px; margin-top:34px; margin-left:244px;}

#more {width:600px; margin-top:62px; margin-left:14px;}

#abo {margin-top:82px; padding:12px; color: #fff; background-color: rgb(114,146,203); font-size:20px;}

#startnow  {width:228px; margin-top:42px; margin-left:0; display:inline-block; color: #fff;}
#startnow a:link, #startnow a:visited, #startnow a:hover {color: #fff; text-decoration:none; cursor:default;}

#howstart {color:  rgb(43,68,130); display:inline-block; margin-left:8px;}

#formreg {display:block; margin-left:28px; margin-top:28px; width:440px; margin-left:auto; margin-right:auto;}
#formreg input[type=submit] {cursor:pointer;}


.tooltip {
	display:none;
	position:absolute;
  top:-100px;
	border:1px solid rgb(255,204,51);
	background-color:khaki;
	border-radius:5px;
	padding:10px;
	color:#000;
	font-size:12px 'Trebuchet MS';
}

@media only screen and (min-width : 950px) and (max-width : 1380px) {
  #content {width:98%; margin-left:20px;}
}

@media only screen and (min-width : 800px) and (max-width : 989px) {
  #content {width:97%; margin-left:20px;}
}

@media only screen and (min-width : 600px) and (max-width : 799px) {
  #content {width:97%; margin-left:20px;}
  #lead, #slogan {width:540px;}
  #bleft, #bright {display:block; background-image: none; width:540px;}
  #leftd, #rightd {display:none;}
  #learnmore {margin-left:0;}
}

@media only screen and (min-width : 300px) and (max-width : 599px) {
  #content {width:97%; margin-left:20px;}
  #lead, #formreg, #slogan  {width:280px;}
  #bleft, #bright {display:block; background-image: none; width:280px;}
  #leftd, #rightd {display:none;}
  #learnmore {margin-left:0;}
}