/* UI */
body
{
	font-size: 18px;
}
h1
{
	font-size: 300%;
}
h2
{
  margin-top: 15px;
  margin-bottom: 5px;
	font-size: 200%;
	padding-top: 15px;
	border-top: 1px solid #444;
}
h3
{
	font-size: 175%;
}
h4
{
	font-size: 120%;
}
body
{
  overflow-y: scroll;
}
section
{
  margin-top: 10px;
  margin-bottom: 10px;
}
hr
{
  border: 0 none;
	border-top: 1px solid #444; 
}

@media only screen and (max-width: 960px)
{
  iframe,
  textarea
  {
    width: 100%;
  }
}


/* THEME */
body
{
	background: #222;
	font-family: sans-serif;
}

body,
a
{
	color: #bdbdbd;
}
a:hover
{
	text-decoration: none;	
}

.logo,
nav,
h1,
h2,
h3,
h4
{
	font-family: 'BebasNeueRegular';
	font-weight: 200;
	letter-spacing: 1px;
}

/* LAYOUT */
.page-width
{
  width: 930px;
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 auto;
}

@media only screen and (max-width: 960px)
{
  .page-width
  {
    width: auto;
    word-break: break-word;
  }
  .content img
  {
    max-width: 100%;
  }
}
@media only screen and (max-width: 640px)
{
  .page-width
  {
    padding-left: 8px;
    padding-right: 8px;
  }
}

header
{
  padding-top: 10px;
}

header .logo
{
  display: block;
  float: left;
}

header nav
{
  display: block;
  float: right;
  margin-top: 10px;
}

header nav a
{
  font-size: 32px;
  margin-left: 8px;
  margin-right: 8px;
}

@media only screen and (max-width: 780px) and (min-width: 661px)
{
  header nav
  {
    margin-top: 15px;
  }
  header nav a
  {
    font-size: 28px;
    margin-left: 2px;
    margin-right: 2px;
  }
}


@media only screen and (max-width: 660px)
{
  header .logo,
  header nav
  {
    float: none;
    margin: 0 auto;
    text-align: center;
  }
  
  header nav a
  {
    font-size: 28px;
  }
}



/* TOP COLORS */
.colors.top div
{
  height: 10px;
}
.color1
{
	background: #bdbdbd;
}
.color2
{
	background: #f0e4d8;
}
.color3
{
	background: #594635;
}
.color4
{
	background: #93c6b5;
}
.color5
{
	background: #d8f0e3;
}

/* LEFT COLORS */
.colors.left div
{
	position: fixed;
	top: 0;
	bottom: 0;
	width: 28px;
}
.fixedLeft
{
	width: 330px;
	left: 0;
}
.colors.left .color1
{
	left: 28px;
}
.colors.left .color2
{
	left: 56px;
}
.colors.left .color3
{
	left: 84px;	
}
.colors.left .color4
{
	left: 112px;
}
.colors.left .color5
{
	left: 140px;
}


.fixedLeft .nav
{
	position: absolute;
	left: 196px;
	right: 0;
	top: 0;
	bottom: 0;
	padding: 20px 0;
}
.nav a
{
	color: #bdbdbd;
	font-size: 50px;
	line-height: 42px;
	display: block;
}
.nav a:hover
{
	color: #d8f0e3;
}


header .logo
{
	font-size: 80px;
	line-height: 70px;
	color: #fff;
	/* margin-bottom: 120px; */
}
header .logo:hover
{
	color: #d8f0e3;
}

/* CONTENT */
.viewer
{
	margin-left: 340px;
	padding: 20px;
}
.content
{
  margin-top: 10px;
}



/* ABOUT */

.profileImage
{
	width: 20%;
	float:left;
	display: none;
}

.aboutDescription
{
	/*color: #888;
	float: left;
	width: 80%;*/
}
.aboutDescription b,
.aboutDescription strong,
.aboutDescription a
{
	/*color: #fff;
	font-size: 22px;
	*/
}
/*
h4
{
	font-weight: normal;
	font-size: 24px;
	margin-bottom: 5px;
	color: #222;
	border-bottom: 2px solid #222;
	display: block;
}
*/