@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Semibold-webfont.eot');
    src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Semibold-webfont.svg#OpenSansSemiBold') format('svg');
    font-weight: 700;
    font-style: normal;
}
@font-face {
	font-family: 'OpenSans';
    src: url('fonts/OpenSans-Bold-webfont.eot');
    src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
	font-weight: 900;
	font-style: normal;
}
@font-face {
	font-family: 'OpenSans';
	src: url('fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: 200;
	font-style: normal;
}
@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: 400;
    font-style: normal;
}

* {
	margin: 0px;
	padding: 0px;
	border: 0px;
}

html, body {
	height: 100%;
}

body {
	font-family: 'OpenSans', sans-serif;
	background: #333;
	color: #fff;
}

#header {
	width: 100%;
	text-align: right;
	min-height: 40px;
	border-bottom: 1px solid #aaa;
}

#header p {
	font-size: 18px;
	font-weight: bold;
	margin-right: 20px;
	padding-top: 6px;
}

h1 {
	font-size: 32px;
	font-weight: 200;
	margin: 1em 20px 0.2em 20px;
	clear: both;
}

body>p,#portfolio {
	margin: auto 20px 10px 20px;
}

#portfolio a {
    display: block;
    height: 150px !important;
    width: 150px !important;
    margin: 0px 2px 2px 0px;
    float: left;
    border: 2px solid #333;
    text-align: center;
    text-decoration: none;
    color: white;
}

#portfolio a:hover {
    border: 2px solid #fff;
}

#cc { background: url("cc.jpg") no-repeat 0 0; }
#cs { background: url("cs.jpg") no-repeat 0 0; }
#du { background: url("du.jpg") no-repeat 0 0; }
#i1 { background: url("i1.jpg") no-repeat 0 0; }
#i2 { background: url("i2.jpg") no-repeat 0 0; }
#st { background: url("st.jpg") no-repeat 0 0; }
#fc { background: url("fc.jpg") no-repeat 0 0; }
#ba { background: url("ba.jpg") no-repeat 0 0; }
#br { background: url("br.jpg") no-repeat 0 0; }
#ca { background: url("ca.jpg") no-repeat 0 0; }
#co { background: url("co.jpg") no-repeat 0 0; }
#ki { background: url("ki.jpg") no-repeat 0 0; }
#re { background: url("re.jpg") no-repeat 0 0; }
#ta { background: url("ta.jpg") no-repeat 0 0; }

#cc:hover { background-image: url("cc2.jpg"); }
#cs:hover { background-image: url("cs2.jpg"); }
#du:hover { background-image: url("du2.jpg"); }
#i1:hover { background-image: url("i12.jpg"); }
#i2:hover { background-image: url("i22.jpg"); }
#st:hover { background-image: url("st2.jpg"); }
#fc:hover { background-image: url("fc2.jpg"); }
#ba:hover { background-image: url("ba2.jpg"); }
#br:hover { background-image: url("br2.jpg"); }
#ca:hover { background-image: url("ca2.jpg"); }
#co:hover { background-image: url("co2.jpg"); }
#ki:hover { background-image: url("ki2.jpg"); }
#re:hover { background-image: url("re2.jpg"); }
#ta:hover { background-image: url("ta2.jpg"); }

a { 
	color: #fff;
	text-decoration: none;
	border-bottom: 2px dotted #fff;
	font-weight: bold;
}

a:hover {
	border-bottom: 2px solid #fff;
}