/*****************************************************************************************
	
                        Веб-интерфейс игровой системы hobro
                            (C) 2011-2017 Сергей Соболев
                                (С) Ходилки Бродилки
                                
*****************************************************************************************/

/* --desc-- Хедер сайта --desc-- */

	.preHeader {}
	.preHeader div.banner {background:#888;}
	.preHeader div.banner div:first-child {margin: 0 auto; width:100%; max-width:26.58cm; padding:0.45cm 0 0.45cm 0cm; }
	.preHeader .descriptionBack {background:black;}
	.preHeader .descriptionBack .description {color:white; margin:0 auto; max-width:26.58cm;}
	.preHeader .descriptionBack .description .social {float:right;}
	.preHeader .descriptionBack .description .social img {width:0.8em; height:0.8em;}
	
	.mobileHeader,
	.mobileHeaderBack {display:none;}
	
	.header {width:100%; margin-bottom:0.5cm;}
	.header .logoContainer {vertical-align:top;}
	.header .logoContainer .logo {width:6.5cm; height:3.5cm; background:url('/IBD?url=/image/HB/hobroLogo.png'); background-size:cover; background-repeat:no-repeat;}
	.header .contacts {vertical-align:top; padding-top:0.25cm; text-align:right;}
	.header .contacts .email {padding-top:0.3cm;}
	.header .contacts .workingTime {font-size:65%; color:#bbb;}
	.header .menu {vertical-align:bottom; padding-bottom:0.1cm; text-align:right;}
	.header .menu a {margin-left:0.6cm;}
	.menu .menuAbout {float:right; position:relative;}
	.menu .menuAbout div {display:none; position:absolute; width:8.7cm; right:0; font-size:85%; /*background:#eee;*/}
	.menu .menuAbout:hover div {display:block; z-index:100;}
	.menu .menuAbout div a {margin-left:0.2cm;}
	.menu .menuAbout div a:first-child {margin-left:0;}
	.alternate {margin-left:0;}
	.alternate .logo {display:none; margin-top:0.5cm; margin-bottom:0.5cm;}
	.alternate .logo img {width:100%; height:auto; background-color:#fff;}
	.alternate .contacts {display:none; text-align:center;}
	.alternate .menu {display:none; margin-bottom:1cm; border-top:1px solid #ccc; padding-top:0.1cm; margin-top:0.25cm; padding-left:0.2cm; padding-right:0.5cm;}
	.alternate .menu a {margin-right:0.5cm; float:left}
	.alternate .menu .menuAbout {float:left; position:relative; }
	.alternate .menu .menuAbout a {margin-right:0;}
	.alternate .menu .menuAbout div {top:100%; /*width:8.2cm;*/ background:#eee;}
	.alternate .menu .menuAbout div a {margin-right:0.38cm; margin-left:0; }
	.alternate .menu .menuAbout div a:hover {}
	.alternate .menu .menuAbout div a:last-child {margin-right:0; float:right;}
						
@media only screen and (max-width: 30.00cm) {
}
	
@media only screen and (max-width: 26.58cm) {
	.preHeader div.banner div:first-child {padding-left:0.2cm; padding-right:0.2cm;}
	.preHeader .descriptionBack .description {padding-left:0.2cm; padding-right:0.2cm;}
	.header .logoContainer {padding-left:0.2cm;}
	.header .contacts {padding-right:0.2cm;}
	.header .menu {padding-right:0.2cm;}
	.header .menu {display:none;}
	.alternate .menu {display:block;}
}

@media only screen and (max-width: 23cm) {
	.preHeader .descriptionBack .description .social {display:none;}
	.header .logoContainer .logo {width:5.2cm; height:2.8cm; background:url('/IBD?url=/image/HB/hobroLogo.png'); background-size:100% 100%; background-repeat:no-repeat;}
	.header .contacts span {font-size:smaller;}
	.header .contacts .workingTime {/*color:#000;*/}
}

@media only screen and (max-width: 17cm) {
	.mainHeader,
	.preHeader {display:none;}
	.mobileHeaderBack {height:0.8cm; background-color:#000; display:block;}
	.mobileHeader {display:block; width:100%; position:fixed; background-color:rgba(0,0,0,0.75); z-index:100; height:0.8cm; line-height:0.8cm; color:#fff; text-align:center; border-bottom:1px solid #000; top:0;}
	.mobileHeader span img.button {width:0.8cm; height:0.8cm; float:left; position:relative; top:-0.8cm; padding-left:0.1cm;}
	.mobileHeader span .mobileMenu {display:none; position:absolute; width:8cm; background-color:rgba(255,255,255,1); color:#000; border-bottom:solid 4px #000; border-right:solid 4px #000; text-align:left;}
	.mobileMenuAbout {border-bottom:1px solid #ccc; display:block;}
	.mobileMenuAbout1 {padding:0.2cm; border-bottom:1px solid #ccc; text-align:center;}
	.mobileMenuAbout1 img {width:65%; height:auto;}
	.mobileMenuAbout2 {padding:0.35cm 0.2cm; vertical-align:middle; line-height:125%; width:100%; text-align:left;}
	.mobileMenuAbout2 div {padding:0.15cm 0; color:#777;}
	.mobileHeader span:hover .mobileMenu {display:block;}
	.mobileMenuItems div:hover {background:#db0000;}
	.mobileMenuItems div a {/*color:#000;*/ padding-left:0.2cm;}
	.mobileMenuItems div:hover a {color:#fff; text-decoration:underline;}
	.content {/*padding-top:0.8cm;*/}
	
	.alternate {margin-right:0.1cm;}
	.alternate .menu .about div {width:2.5cm; left:0;}
	.alternate .menu .about div a {position:relative; display:block; float:inherit; margin:0;}
	.alternate .menu .about div a:last-child {float:inherit;}		
}

@media only screen and (max-width: 12cm) {
	.preHeader .banner {/*display:none;*/}
	.preHeader div.banner div:first-child {padding-left:0.1cm; }
	.preHeader .descriptionBack .description {padding-left:0.1cm; padding-right:0.1cm;}
	.header {display:none;}
	.alternate .logo {display:block;}
	.alternate .contacts {display:block;}
	.alternate .menu {text-align:center; background:#000;}
	.alternate .menu a {margin-right:0.1cm; float:inherit;}
	.alternate .menu .about {display:inline; float:inherit;}
	.alternate .menu .about div {text-align:left;}
	.alternate .menu .about div a {margin-right:0;}
	.mobileHeader span .mobileMenu {border-right:none;}
	.mobileHeader span .mobileMenu {width:100%;}
	.mobileMenuAbout1 img {width:50%; height:auto;}
}

@media only screen and (max-width: 8cm) {
	.mobileMenuAbout1 img {/*width:100%; height:auto;*/}
}

/* Изменения меню для горизонтальной ориентации мобильных устройств */
@media only screen and (max-height: 14cm) {
	.mobileMenuAbout1 {display:none;}
}

@media only screen and (max-height: 11cm) {
	.mobileMenuItems div {float:left;}
	.mobileMenuItems div a {padding-right:0.2cm;}
}