/* reset */
html, body, ul, li { margin: 0; padding: 0; }

/* basic */
body { background: darkgray; font-size: 12pt; font-family: sans-serif; }
.cl { clear: both; }
@font-face {
	font-family: segoe-print;
	src: url(../segoe-print-regular.ttf);
}
a { color: blue; }

/* layout */
#page { border: solid #222 1px; width: 1000px; margin: 15pt auto; }

/* header + menu + logo */
#header { background: url(../img/bg_head.jpg); width: 100%; height: 300px; background-size: 1000px auto; position: relative; }
#header ul { list-style: none; margin: 0; padding: 0; background: rgba(255,255,255,.0); width: 100%; position: absolute; bottom: 0; font-size: 120%; border-bottom: solid rgba(20,20,20,.8) 3px; }
#header ul li { float: left; background: rgba(88,1,7,.8); padding: 0; margin: 0 0 0 1em; font-style: bold; font-family: segoe-print; line-height: 2em; border-top: solid rgba(255,255,255,1) 2px; }
#header ul li.active, #header ul li.active:hover { background: rgba(20,20,20,.8); }
#header ul li:hover { background: rgba(7,88,1,.8); }
#header ul li a { text-decoration: none; color: white; display: block; padding: 0 2em; }

#header #logo { background: url(../img/logo.png); width: 230px; height: 100px; background-size: cover; position: absolute; top: 40px; left: 40px; }
#header #logo span { display: none; }
#header #logo a { display: block; width: 230px; height: 100px; }

/* footer + menu */
#footer { background: url(../img/bg_foot.jpg); width: 1000px; height: 50px; background-size: 1000px auto; }

/* main content */
#main { background: white; padding: 1em 1.5em; color: #222; }

/* page specific */

.gallery { font-size: 0; }
.gallery .figure { display: inline-block; font-size: 12pt; margin: 15px; width: 200px; height: 200px; line-height: 200px; text-align: center; background-size: cover; }
.gallery .figure img { vertical-align: middle; display: block; }

#portfolio .slide { position: relative; width: 800px; height: 500px; margin: 0 0 .8em 0; background: white; border: solid #222 1px; padding: 10px; margin-bottom: 30px; }
#portfolio .slide .info { font-family: segoe-print; background: rgb(255,255,127); width: 200px; position: absolute; bottom: -15px; right: -60px; padding: .5em 1.5em; }
#portfolio .slide img { position: absolute; border: solid rgba(255,255,255,.1) 1px; }
#portfolio .slide img.big { max-height: 410px; max-width: 550px; bottom: 50px; left: 50px; }
#portfolio .slide img.small { max-height: 250px; max-width: 300px; top: 70px; right: 50px; }

#contact .card { float: left; border: solid black 1px; padding: 1em 1.5em; margin: 1em; width: 350px; }
#contact .card .address { font-family: segoe-print; font-size: 130%; border-bottom: solid #ccc 1px; }
#contact .card img { width: 300px; border: solid #666 1px; padding: 3px; }

/* pretty styling */
#page { -moz-box-shadow: 0 0 15px 5px #000; -webkit-box-shadow: 0 0 15px 5px #000; box-shadow: 0 0 15px 5px #000; }
.gallery .figure { -moz-box-shadow: 0 0 10px #f00; -webkit-box-shadow: 0 0 10px #f00; box-shadow: 0 0 10px #f00; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 40px; }
#portfolio .slide { -moz-box-shadow: 2px 2px 5px 1px #000; -webkit-box-shadow: 2px 2px 5px 1px #000; box-shadow: 2px 2px 5px 1px #000; }
#portfolio .slide .info { -moz-box-shadow: 2px 2px 5px 1px #000; -webkit-box-shadow: 2px 2px 5px 1px #000; box-shadow: 2px 2px 5px 1px #000; }
#portfolio .slide img.big { -moz-box-shadow: 20px 20px #a70, -20px -20px #a70; -webkit-box-shadow: 20px 20px #a70, -20px -20px #a70; box-shadow: 20px 20px #a70, -20px -20px #a70; }
#portfolio .slide img.small { -moz-box-shadow: 15px 15px #a70, -15px -15px #a70; -webkit-box-shadow: 15px 15px #a70, -15px -15px #a70; box-shadow: 15px 15px #a70, -15px -15px #a70; }
#contact .card { -moz-box-shadow: 2px 2px 5px 1px #000; -webkit-box-shadow: 2px 2px 5px 1px #000; box-shadow: 2px 2px 5px 1px #000; }