@import url(reset.css);

body { background: url(../img/bg.png) #1f1f1f repeat-x; font: 11px arial; }
	
a:link, a:visited, a:active { color: #a9a9a9; text-decoration: none; }
	
a:hover { color: #c0c0c0; text-decoration: underline; }

#wrapper { background: url(../img/main-bg.png); width: 900px; padding: 30px 30px; margin-top: 40px; margin-bottom: 40px; margin-left: auto; margin-right: auto; border: 1px solid #606060; }
	


#main { }

#title-screen { margin-left: 40px; padding-top: 200px; height: 440px; display: block; }
#enter { background: url(../img/enter.png) no-repeat; width: 73px; height: 15px; }
#enter:hover { background-position: 0 -15px; cursor: pointer; }

#content { min-height: 660px; display: none; font: 12px arial; color: #797979; line-height: 1.8;}

#navigation { float: right; }
#navigation p { margin: auto auto; float: left; }
#navigation .unselected { cursor: pointer; }
#navigation .slash { background: url(../img/slash.png) no-repeat; width: 15px; height: 15px; }
#navigation #about.unselected { background: url(../img/about1.png) no-repeat; width: 59px; height: 15px; }
#navigation #about.selected, #navigation #about.unselected:hover { background: url(../img/about2.png) no-repeat; width: 59px; height: 15px; }
#navigation #blog.unselected{ background: url(../img/blog1.png) no-repeat; width: 45px; height: 15px; }
#navigation #blog.selected, #navigation #blog.unselected:hover { background: url(../img/blog2.png) no-repeat; width: 45px; height: 15px; }
#navigation #portfolio.unselected{ background: url(../img/portfolio1.png) no-repeat; width: 94px; height: 15px; }
#navigation #portfolio.selected, #navigation #portfolio.unselected:hover { background: url(../img/portfolio2.png) no-repeat; width: 94px; height: 15px; }
#navigation #contact.unselected{ background: url(../img/contact1.png) no-repeat; width: 82px; height: 15px; }
#navigation #contact.selected, #navigation #contact.unselected:hover { background: url(../img/contact2.png) no-repeat; width: 82px; height: 15px; }

#header { margin-bottom: 20px; }

.hidden { display: none; }
.shown { display: block }

#content-about { width: 400px; margin-top: 100px; }
#content-about p, #content-blog p , #content-portfolio p { margin-bottom: 20px; }

#content-blog, #content-portfolio { margin-top: 100px; }
#blog-navigation { float: right; text-align: right; }
#blog-navigation .blog-nav { cursor: pointer; }
.blog-prologue { width: 550px; }
.blog-creativity, .blog-memyselfione, .blog-memyselfitwo, .blog-pictogram, .blog-ucwhatic, 
.blog-savepreventkill, .blog-crashandenergetic, .blog-coloursofasia, .blog-forlornhope { width: 550px; display: none; }
.more { font-weight: bold; cursor: pointer; }
.prologue-more, .creativity-more, .memyselfione-more, .memyselftwo-more, .pictogram-more, .ucwhatic-more, 
.savepreventkill-more, .crashandenergetic-more, .coloursofasia-more, .forlornhope-more { display: none; }

#portfolio-wrapper { float: right; margin-top: -80px; margin-right: 178px; overflow: hidden; }
#portfolio-wrapper #leftarrow, #portfolio-wrapper #rightarrow { float: left; margin-left: 10px; margin-right: 10px; margin-top: 260px; opacity: 1; filter: alpha(opacity=100); cursor: pointer; }
#portfolio-view { float: left; width: 427px; border-top: 1px solid #797979; border-bottom: 1px solid #797979; overflow: hidden; }
#portfolio-view #page { width: 7259px; }
#portfolio-view .pg { float: left; border-left: 1px solid #797979; border-right: 1px solid #797979; width: 425px; height: 600px; }

#footer { float: right; color: #595959; clear: right;}