@import url(http://fonts.googleapis.com/css?family=Raleway:100);
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);


/*========= css style =========*/
body {
	color:#FFFFFF;
	font:10px Georgia, "Times New Roman", Times, serif;
	background:#202020;
	margin:0;
}

#flag{
	background-position:right;
	position:absolute;
	top: 0px;
	left:60px;
	width:44px;
	height:68px;
}

#header {
	background:url(../img/header_leaf.png) no-repeat right bottom;
	float: none;
	width: 1050px;
	height: 260px;
	margin: 0 auto;
	text-align: left;
	margin-bottom: -260px;
}

#topline {
	width:100%;
	height:8px;
	background-color: #161616;
	text-align:right;
	margin-bottom:-2px;
}
#container {
	width:900px;
	margin:0 auto;
	margin-top:125px;
}
#content_left {
	float:left;
	width:200px;
	background:url(../img/phox_logo.png) no-repeat left 30px;
	padding-top:200px;
}
#content_right {
	float:right;
	width:700px;
}

.content{
	padding-left:50px;
	margin-bottom:40px;
	font-size:1.2em;
	font-family: 'Droid Serif', arial, serif;
}

.content2{
	float:left;
	width:325px;
	padding-left:25px;
	margin-bottom:25px;
	margin-top:-75px;
	font:10px Arial, Helvetica, sans-serif;
}

.content3{
	float:right;
	padding-left:0;
	margin: 75px 15px 0 0;
	font:10px Arial, Helvetica, sans-serif;
}

.breakline {
	color:#484545;
	background:url(../img/breakline.gif);
	padding-top:3px;
	height:10px;
}
.menubreak {
	background:url(../img/breakline.gif);
	padding-top:5px;
	width:180px;
}
#links, #links a {
	color:#484545;
	overflow: hidden; 
	width:180px;
	text-align:right;
}

#menu {
	display: block !important;
}
#menu_left {
	float:left; 
	width:90px;
}
#menu_right {
	float:right;
	width:90px;
	text-align:right;
}

.project_field {
	width:300px;
	height:16px;
	border-radius: 6px 6px 6px 6px;
	background-color:rgba(16,16,16,0.5);
	margin-top:4px;
	padding:5px 0 0 7px;
}

.project_field:hover {
	background-color:rgba(8,8,8,0.5);
}

.project_title {
	font:10px Arial, Helvetica, sans-serif;
}

.project_link {
	font:10px Arial, Helvetica, sans-serif;
	margin:0 7px 0 0;
	padding:0;
	float:right;
}


/*========= mainmenu =========*/
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
li {
	width:180px;
	height:47px;
}
li a:link , li a:visited , li a:active {
	display:block;
	width:180px;
	height:47px;
	text-align: right;
	font-family: 'Raleway', arial, serif;
	font-size: 400%;
	outline: none;
}


/*========= input & textarea =========*/
label { 
	display: block;
	margin-bottom:5px;
	color:#3C3C3C;
}
input, textarea {
	width:320px;
	color:#AAAAAA;
	font:12px  Geneva, Arial, Helvetica, sans-serif;
	border:1px solid  #2A2A2A;
	background:#1b1b1b;
	padding:4px;
	margin-bottom:8px;
}


/*========= headlines =========*/
h1 {
    font-family:    'Raleway', arial, serif;
    font-weight:    normal;
    font-size:      300%;
    margin:         -8px 0;
}
h2 {
    font-family:    'Droid Serif', arial, serif;
    font-weight:    100;
    font-size:      125%;
    font-style:     italic;
    color:          #707070;
    margin:         2px 0 20px 20px;
}

h3 {
    font-family:    'Droid Serif', arial, serif;
    font-weight:    100;
    font-size:      125%;
    color:          #909090;
    margin:         16px 0 0 4px;
}

/*========= links =========*/
a {
	color:#555555;
	text-decoration: none;
}
a:visited {
	color:#555555;
	text-decoration: none;
}
a:hover {
	color:#FFFFFF;
	text-decoration: none;
}

.t1 a:hover {
	color:#e5e5e5;
}

.t2 a:hover {
	color:#c7a1e5;
}

.t3 a:hover {
	color:#e5a1a5;
}

.t4 a:hover {
	color:#a3e5e5;
}

.t5 a:hover {
	color:#ace5c7;
}

.menubreak a {
	color:#484545;
	text-decoration:none;
}
.menubreak a:hover {
	color: #9A9A9A;
	text-decoration:none;
}

.content a {
	color:#80A080;
	text-decoration: none; 
}
.content a:visited {
	color:#80A080;
	text-decoration: none;
}
.content a:hover {
	color: #A0A0A0;
	background: #181818;
}

.project_field a:link, .project_field a:visited, .project_field a:active {
	color: #4f4e4e;
	text-decoration: none;
	background:none;
}
.project_field a:hover {
	color: #a09f9f;
	text-decoration: none;
	background:none;
}


/*========= extra =========*/
abbr, acronym, span.abbr {
	border-bottom: 0px;
}

.content abbr, .content acronym, .content span.abbr {
	border-bottom: 1px dotted #353434;
	cursor:help;
}
hr{
	display: none;
}