@charset "utf-8";

/* Eric Meyer's Reset CSS | v1.0 | 20080212 | MX-edited *********************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
body {line-height:1.4;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content:'';	content:none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse:collapse; border-spacing:0;}
td { vertical-align:top;}
input { margin:1px 0 1px 0;}
html* input { margin:0;} /*only for IE*/
/* End of Reset CSS **********************************************************/

/* Web Fonts from fontspring.com
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 * (c) 2010-2012 Fontspring
 * The fonts included are copyrighted by the vendor listed below.
 * Vendor: exljbris Font Foundry
 * License URL: http://www.fontspring.com/fflicense/exljbris */

@font-face {
    font-family: 'MuseoSlab500Regular';
    src: url('fonts/Museo_Slab_500-webfont.eot');
    src: url('fonts/Museo_Slab_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Museo_Slab_500-webfont.woff') format('woff'),
         url('fonts/Museo_Slab_500-webfont.ttf') format('truetype'),
         url('fonts/Museo_Slab_500-webfont.svg#MuseoSlab500Regular') format('svg');
    font-weight: normal;
    font-style: normal;
} 

@font-face {
    font-family: 'MuseoSlab100Regular';
    src: url('fonts/Museo_Slab_100-webfont.eot');
    src: url('fonts/Museo_Slab_100-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Museo_Slab_100-webfont.woff') format('woff'),
         url('fonts/Museo_Slab_100-webfont.ttf') format('truetype'),
         url('fonts/Museo_Slab_100-webfont.svg#MuseoSlab100Regular') format('svg');
    font-weight: normal;
    font-style: normal;
} 
/* End of Web Fonts **********************************************************/

html { height:100%;}
body { width:100%; height:100%; background:#e8eced;}

body, input, td, select, textarea { font-family: 'Open Sans', sans-serif; font-size:14px; color:#666; }

a { color:#939899; text-decoration:none;}
a:hover { color:#939899; text-decoration:underline;}

p { margin-bottom:1em;}
h1 { font-family: 'MuseoSlab500Regular', serif; font-size:28px; font-weight:normal; color:#606566; margin-bottom:1em;}
h2 { font-family: 'MuseoSlab500Regular', serif; font-size:22px; font-weight:normal; color:#606566; margin-top:1em; margin-bottom:1em;}
h3 { font-family: 'MuseoSlab500Regular', serif; font-size:18px; font-weight:normal; color:#606566; margin-top:1em; margin-bottom:0.5em;}
h4 { font-family: 'MuseoSlab500Regular', serif; font-size:16px; font-weight:normal; color:#606566; margin-top:1em; margin-bottom:0.5em;}

ul {list-style: square; padding-left: 24px; margin-bottom: 1em;}
.note { font-size:13px; color: #666;}

#all { width:100%; min-height:100%; position:relative;}
	*html #all { height:100%;} /* IE6 only hack*/
.container { padding:0 2%; margin-left:auto; margin-right:auto;}
	.containerTop { background:#FFF;}
	.containerClaim { background:#333637;}
	.containerAbout { background:#d2d6d7;}
	.containerContact { background:#333637;}

#top { height:100px; overflow:hidden;}
	#topLogo { float:left; width:20%; height:60px; margin-top:20px;}		
	#topMenu { float:right; width:80%; }
		#topMenu ul { text-align:right; margin-top:48px;}
		#topMenu ul li { display: inline-block; *display: inline; padding:0 1%}
		#topMenu ul li a { font-family: 'MuseoSlab500Regular'; font-size:17px; font-weight:normal; color:#000; display:block; padding:2px 8px;}
		#topMenu ul li.active a { background:#333637; color:#FFF;}
		#topMenu ul li a:hover {text-decoration:none; background:#e8eced; color:#000;}
		
#claim { padding:32px 0 24px 0;}
	#claim h1 { font-family: 'MuseoSlab500Regular'; font-size:52px; color:#e8eced; margin:0;}
	#claim h2 { font-family: 'MuseoSlab100Regular'; font-size:22px; color:#e8eced; margin:0;}


#main {}
	#main h2 {margin-top: 2em;}

#projects { margin:20px 0;}
	#projects .projectBox { background:#FFF; width: 300px; position:relative; min-height: 420px;}
	#projects .projectBox h3 { padding:10px 5% 10px 5%;}
	#projects .projectBox p { padding:12px 5% 12px 5%; margin: 0;}
	#projects .projectBox img { width:100%; border-top:1px solid #e8eced; border-bottom:1px solid #e8eced; }
	#projects .projectLinks { position:absolute; top:0; left:0; width:100%; height:100%; text-align:right; background:#FFF; opacity: 0; filter:alpha(opacity=0); transition: all 0.25s ease-out; }
	#projects .projectLinks:hover { background-color: rgba(255,255,255,0.66); opacity: 100; filter:alpha(opacity=1);}
	#projects .projectLinks a { display:inline-block; width:26px; height:26px; background:#333637; margin:5% 5% 0 0;}
	#projects .projectLinks a.linkPlus { background:url(img/grfx_icoPlus.png) no-repeat;}
	#projects .projectLinks a.linkLink { background:url(img/grfx_icoLink.png) no-repeat;}
	
#projects-old { margin:20px 0;}
	#projects-old .projectBox { background:#f3f5f6; width: 300px; position:relative; min-height: 330px;}
	#projects-old .projectBox h3 { padding: 0 5%;  color:#939899;}
	#projects-old .projectBox p { padding:12px 5% 12px 5%; margin: 0; color:#939899;} 
	#projects-old .projectBox img { width:100%; border-top:1px solid #e8eced; border-bottom:1px solid #e8eced;  -webkit-filter: grayscale(100%);  filter: grayscale(100%); }
	#projects-old .projectLinks { position:absolute; top:0; left:0; width:100%; height:100%; text-align:right; background:#FFF; opacity: 0; filter:alpha(opacity=0); transition: all 0.25s ease-out; }
	#projects-old .projectLinks:hover { background-color: rgba(255,255,255,0.66); opacity: 100; filter:alpha(opacity=1);}
	#projects-old .projectLinks a { display:inline-block; width:26px; height:26px; background:#333637; margin:5% 5% 0 0;}
	#projects-old .projectLinks a.linkPlus { background:url(img/grfx_icoPlus.png) no-repeat;}
	#projects-old .projectLinks a.linkLink { background:url(img/grfx_icoLink.png) no-repeat;}

#about { padding:24px 0; width: 50%; color: #000; }
	#about h3, #about h4 { color: #000; }

#contact { padding:24px 0; color: #FFF;}
	#contact h3 {color:#FFF;}

#footerSpacer { max-width:100px; height:50px; clear:both; margin-left:auto; margin-right:auto;}
#footer { position:absolute; bottom:0; width:100%; height:50px; background:#000;}
	#footerIn { padding:0 2%; margin-left:auto; margin-right:auto; line-height:50px; color:#FFFFFF; font-size:11px;}
		#footerInLeft { float:left;}
		#footerInRight { float:right;}

.cleaner { height:1px; clear:both; float:none;}

@media screen and (min-width: 1025px) {
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
	#claim h1 { font-size:46px;}
	#claim h1 span.h1index1 { line-height:1.4em;}
}

@media screen and (min-width: 321px) and (max-width: 640px) {
	#claim h1 { font-size:38px; line-height:1.2em;}
	#topMenu ul li a { font-size:15px; padding:2px 4px;}
}

@media screen and (max-width: 320px) {
	#claim h1 { font-size:15px;}
	#claim h1 span.h1index1, #claim h1 span.h1index2 { font-size:32px; line-height:1.2em;}
	#topMenu { vertical-align:middle;}
	#topMenu ul { text-align:right; margin-top:20px;}
	#topMenu ul li { float:right; clear:both;}
	#topMenu ul li a { font-size:13px; padding:1px 4px;}
	#footerSpacer { height:50px;}
	#footer { height:40px;}
	#footerInRight { float:left; clear:both; margin-left:12px;}
}

@media screen and (max-width: 1245px) {
	#about { width: 66%; }
}
@media screen and (max-width: 933px) {
	#about { width: 100%; }
}