@charset "utf-8";
/* CSS Document */

* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}

a { color: #333; }
a:visited { }
a:hover { text-decoration: none; }

body {
background: #EBEBEB url(../images/bg.jpg) no-repeat top center;
background-attachment: fixed;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
}

#container {
width:940px;
margin:0 auto;
text-align:left;
}

#header {
margin:20px 20px 0px 20px;
height:200px
}

#logo {
float: left;
}

.name {
float:left;
width:323px;
height:121px;
display:block;
background: url(../images/name.png) no-repeat;
text-indent:-9999px;
}

#tag {
margin: 38px 0px 0px 0px;
float: right;
}

.title {
float:right;
width:272px;
height:48px;
display:block;
background: url(../images/design.png) no-repeat;
text-indent:-9999px;
}

#navigation {
margin:20px 20px 0px 20px;
border-bottom: 2px solid #444444;
}

ul#filter { 
font-size: 16px; 
list-style: none; 
margin: 0;
padding: 0; 
}

ul#filter li { 
margin: 0;
padding: 0;
display: inline;
}

ul#filter a:link{ 
margin: 0;
padding: .3em .4em 0 .4em;
text-decoration: none;
font-weight: bold;
font-size: 16px;
color: #333333; 
border-bottom: 2px solid #444444; 
}

ul#filter a:visited{ 
margin: 0;
padding: .3em .4em 0 .4em;
text-decoration: none;
font-weight: bold;
font-size: 16px;
color: #333333; 
border-bottom: 2px solid #444444; 
}

ul#filter a:hover{ 
margin: 0;
padding: .3em .4em 0 .4em;
text-decoration: none;
font-size: 16px;
color: #FFFFFF;
border-bottom: 2px solid #000000;  
}

ul#filter li.current a {background: #333333; color: #FFF; font-weight: bold; border-bottom: 2px solid #000000;}

ul#filter li#all a:hover {
background: #000000; 
}

ul#filter li#online a:hover {
background: #0099ff; 
}

ul#filter li#design a:hover {
background: #ED008C; 
}

ul#filter li#development a:hover {
background: #FFF200; 
}

#content {
float: none;
position: absolute;
margin:20px 20px 0px 20px;
}

ul#portfolio { float: left; list-style: none; margin-left: 0; }
ul#portfolio li { 
	border: 1px solid #dedede; 
	float: left; 
	margin: 0 10px 10px 0; 
	padding: 6px;
	width: 280px;
}
ul#portfolio a { display: block; width: 100%; }
ul#portfolio a:hover { text-decoration: none; }
ul#portfolio img { border: 1px solid #dedede; display: block; padding-bottom: 5px; }

#footer {
margin:0px 20px 40px 20px;
border-top: 1px solid #444444;
}

ul#foot { 
font-size: 12px; 
list-style: none; 
margin: 0;
padding: 0; 
}

ul#foot li { 
margin: 0;
padding: 0;
display: inline;
float: right;
}

ul#foot a:link{ 
margin: 0;
padding: 0 .4em .3em .4em;
text-decoration: none;
font-size: 12px;
color: #333333; 
border-top: 1px solid #444444; 
}

ul#foot a:visited{ 
margin: 0;
padding: 0 .4em .3em .4em;
text-decoration: none;
font-size: 12px;
color: #333333; 
border-top: 1px solid #444444; 
}

ul#foot a:hover{ 
margin: 0;
padding: 0 .4em .3em .4em;
text-decoration: none;
font-size: 12px;
color: #000000;
border-top: 1px solid #000000;  
}

ul#foot li.cy a:hover {
border-top: 1px solid #0099ff; 
}

ul#foot li.ma a:hover {
border-top: 1px solid #ED008C; 
}

ul#foot li.ye a:hover {
border-top: 1px solid #FFF200; 
}