@import 'reset.css';

.debug { border: 1px solid red; }
.rounded(@radius: 3px) { border-radius:@radius; -moz-border-radius:@radius; -webkit-border-radius:@radius; }

/**/

body, html { height: 100%; padding: 0; margin: 0; background: #fff; min-width: 1235px; }
body, html, input { font-family: Arial,sans-serif; font-size: 15px; line-height: 1; }
a { color: #003399;
	&:hover { text-decoration: none; }
}

body.is404 {
	#m { position: relative !important; }

}

.adaptive { width: 1235px; position: relative; display: inline-block; text-align: left; font-size: 0; }

#m { position: fixed; width: 100%; left: 0px; top: 0px; background: #f5f5f5; text-align: center; border-top: 1px solid #ffffff; z-index: 100; min-width: 1235px;
	
	.hr1 { border-top: 1px solid #ccc; background: #fff; height: 1px; }
	.hr2 { border-top: 1px solid #fff; background: #ccc; height: 1px; }

	.adaptive { 
		table { width: 100%; margin: 7px 0 9px 0; 
			td { vertical-align: top;  position: relative; padding: 0 0 0 6px; 
				&.logo { 
					p, h1 { font-size: 20px; position: absolute; bottom: 0; }
					div { height: 54px; position: relative; margin-top: 4px;
						img { float: left; position: absolute;}
						.logo1 { left: 65px; top: 7px; }
						.logo2 { left: 66px; bottom: 7px; }
					}
				}
				&.ads { width: 1px; padding: 0 6px 0 0; width: 728px; height: 90px; }
			}
		}
		ul {  text-align: left;  padding: 7px 6px;
			li { display: inline-block; margin: 0 1px 0 0;
				a { background: #ccc; display: block; font-size: 15px; line-height: 27px; padding: 0 7px; text-decoration: none; color: #000; }
				/**/
				&.selected a, a:hover { background: #107f1b; color: #fff; }
				&.margin { margin-right: 20px; }
				&.pullright { float: right; margin: 0; }
			}
			/**/
			&:first-of-type { padding-top: 10px; }
			&:last-of-type { padding-bottom: 10px; }
		}
	}

}
#c { position: relative; text-align: center;
	.adaptive { margin-bottom: 34px;
		h1 { font-size: 20px; padding: 25px 5px 0 5px; color: #000; }
		#cards { width: 100%; border-collapse: separate; border-spacing: 5px; margin: 20px 0; border: 1px solid #fff;
			td { width: 25%;  border: 1px solid #dadada; 
				img { width: 100%;}
				.thumb { display: inline-block;width: 300px; height: 300px; overflow: hidden; position: relative;
					img { width: 384px; }
					span { position: absolute; background: #000; padding: 5px 0 4px 1px; .rounded(3px); z-index: 1; font-size: 20px; margin: 17px 0 0 16px; background: #fff; color: #000; font-weight: bold; font-family: Helvetica,Arial,sans-serif !important; letter-spacing: 1px; word-spacing: -1px; box-shadow: .2em 0 0 #fff,-.2em 0 0 #fff,0 .1em .5em .1em rgba(0,0,0,.2) !important; }
					div { position: absolute; z-index: 1; bottom: 20px; left: 13px; font-size: 13px; padding: 5px 3px 0 8px; background: #000; max-width: 278px; border: 1px solid #5a5a5a; .rounded(99px);
						i { font-style: normal; display: inline-block; float: left; margin: 0 5px 5px 0; color: #fff;  font-family: Verdana,sans-serif !important; color: #d2d2d2; }
						svg { fill: #d2d2d2; margin: 2px 4px 0 0; float: right; }
					}
					/**/
					&:hover {
						div { background: #218ced; border: 1px solid #218ced; 
							i { color: #eef6fe; }
							svg { fill: #eef6fe; }
						}
					}

				}
				p {  padding-top: 10px;
					a { font-size: 14px; margin-left: 5px; display: inline-block; }
					span { background: #f4f4f4; margin: 0 5px 5px 0; display: inline-block; padding: 3px; font-size: 12px;}
				}
				/**/
				&.empty { border: 1px solid transparent !important; }
				&.ads { vertical-align: top; height: 300px; background: #fefefe url('/no_small.jpg') no-repeat center center;
					.ads-catalog-cont { margin: -5px 0 0 -5px !important; }
				}
			}
		}
	}
}
#i { position: relative; text-align: center;min-width: 1235px !important;
	.adaptive { padding: 20px 0; margin-bottom: 34px;
		#thumbs { padding: 0 5px; min-height: 574px; margin-bottom: 45px; 
			div, .thumb { display: inline-block; border: 1px solid #fff; }
			div { float: left; position: relative; width: 790px; height: 574px; overflow: hidden;  }
			.thumb { margin: 0 ; opacity: 0.25; width: 70px; height: 70px; overflow: hidden;
				&.selected, &:hover { opacity: 1 !important; }
			}
		}
		#bc {  padding: 0 0 20px 5px; position: relative; overflow: hidden; 
			.name { font-size: 15px; width: 657px; 
				h1 { font-size: 20px; padding-top: 4px; font-weight: bold; }
				p { margin-top: 18px; line-height: 1.3;}
			}
			.social { position: absolute; right: 439px; top: 0px; }
			.info { font-size: 15px; padding-top: 8px; position: absolute; right: 7px; top: 36px; width: 431px; vertical-align: bottom; 

				.left { float: left;
					span { margin-right: 10px;}
				}
				.right { float: right;
					span { margin-left: 10px;}
				}
			}
		}
		#info { width: 100%; margin-bottom: 35px;
			.td { vertical-align: top;
				&:last-of-type { padding-right: 5px; padding-left: 115px;
					table { width: 100%; margin-top: -24px;
						td { padding: 5px; border: 1px solid #ccc; font-size: 14px; cursor: default;}
						tr.mark td { background: #000; text-align: center; font-weight: bold; color: #fff;}
						tr.title td { background: #eee; font-size: 10px; }
						tr.empty td { background: none; font-size: 0; height: 14px; border: none;}
						tr:not(.mark):not(.empty):hover td { background: #eee; }
					}
				}
				&.td-ads { width: 300px; vertical-align: top; padding-left: 5px;
					.td-ads-cont { margin-bottom: 30px; height: 250px; }
					/*img { margin-top: 30px;
						&:first-of-type { margin-top: 0px; }
					}
					div { font-size: 13px; text-align: left; opacity: 0.5; margin-top: 30px; line-height: 1.4; padding: 0 5px; }*/
				}
			}
		}
	}

}
#x { position: relative; text-align: center; margin-bottom: 34px; 
	.adaptive { padding: 20px 0; font-size: 20px; 
 		p { padding: 0 5px;}
	}
}
#f { text-align: center; background: #f5f5f5; border-top: 1px solid #ccc; margin-top: -2px; position: fixed; width: 100%; bottom: 0; z-index: 110; min-width: 1235px !important;
	.adaptive { padding: 10px 0; height: 24px; 
		.social { position: absolute; right: 5px;
			a { display:inline-block; margin-left:15px; }
		}
		span { font-size: 15px; line-height: 1.3; padding-left: 5px; display: inline-block;}
	}
}

.l0 { margin-top: 161px; }
.l1 { margin-top: 198px; }
.l2 { margin-top: 235px; }