@charset "utf-8";

html { overflow-y: scroll; }

body { background-repeat: repeat; min-width: 1000px; }
html.responsive body { min-width: 320px; }
body.color-purple { background: #737 url(background/purple.jpg) repeat; }
body.color-pink { background: #623 url(background/pink.jpg) repeat; }
body.color-green { background: #262 url(background/green.jpg) repeat; }


header { background: hsla(0, 0%, 0%, 0.6); }
header .top { max-width: 960px; margin: 0 auto; position: relative; }

header .top .logo { width: 450px; height: 150px; margin: 0 auto; padding: 10px; }
header .top .logo a,
header .top .logo img { width: 100%; height: 100%; display: block; }
header .top .logo span { display: none; }

header .top .color { width: 170px; position: absolute; top: 20px; left: 20px; }
header .top .color li { float: left; height: 50px; width: 50px; margin-left: 10px; }
header .top .color li:first-child { margin-left: 0; }
header .top .color li a { width: 100%; height: 100%; display: block; border-radius: 50%; opacity: 0.6; background: #fff url('colors.png') no-repeat; }
header .top .color li a:hover { opacity: 1.0; }
header .top .color li a.color-purple { background-position: -0px; }
header .top .color li a.color-pink { background-position: -50px; }
header .top .color li a.color-green { background-position: -100px; }
header .top .color li a span { display: none; }

header .top .language { position: absolute; top: 20px; right: 20px; font-size: 20px; }
header .top .language li { float: right; margin-left: 10px; line-height: 25px; }
header .top .language li a { opacity: 0.8; }
header .top .language li a:hover { text-decoration: underline; }
html[lang=en] header .top .language li a.en,
html[lang=ar] header .top .language li a.ar { opacity: 1; font-weight: bold; }

header .menu ul { padding: 2px 0; text-align: center; background: hsla(0, 0%, 0%, 0.6); border-bottom: 1px solid white; }
header .menu ul li { display: inline-block; text-align: center; }
header .menu ul li.sep { content: ''; display: inline-block; width: 30px; height: 30px; margin: 8px 20px; line-height: 30px; background: url('menu.png') no-repeat; }
header .menu ul li a { display: block; padding: 8px; color: white; font-size: 24px; line-height: 30px; }
header .menu ul li a:hover { text-decoration: underline; }

@media screen and (max-width: 650px) {
	html.responsive header .top .logo { width: 240px; height: 80px; padding-top: 60px; }
	html.responsive header .top .color { top: 10px; left: 10px; bottom: auto; }
	html.responsive header .top .color li { width: 40px; height: 40px; }
	html.responsive header .top .language { right: 10px; bottom: auto; }
	
	html.responsive header .menu ul li.sep { margin: 0 5px; }
	html.responsive header .menu ul li a { font-size: 22px; }
}


main { margin: 0 auto; max-width: 960px; padding: 30px 20px 50px; }
main:after { content: ''; display: table; clear: both; }


footer { display: block; }
footer .banner { margin: 0 auto 30px; text-align: center; padding: 0 20px; }
footer .content { padding-bottom: 60px; background: hsla(0, 0%, 0%, 0.4); border-top: 1px solid white; }
footer .content ul { max-width: 800px; margin: 0 auto 30px; padding: 10px 0; text-align: center; border-bottom: 1px solid white; }
footer .content ul li { display: inline-block; margin: 0 20px; font-size: 20px; line-height: 30px; white-space: nowrap; }
footer .content .about { margin: 0 auto; padding: 0 20px; max-width: 750px; }
footer .content .about.typography p { padding-bottom: 10px; }


aside {}
aside .sp-offer { width: 400px; height: 250px; position: absolute; top: 30%; left: 50%; margin-left: -200px; z-index: 10; }