* {
  font-family: Verdana, Arial;
  /*font-size: 0.98em;*/
  color: #DFDFDF;
}
body {
  background-image: url('gfx/background.jpg');
  background-repeat: repeat-x;
  background-color: #63634f;
  margin:0px; border:0px;
  font-size: 82.5%;
}

table {
  margin:0px; border:0px; padding:0px; border-spacing:0px; border-width:0px;
  /*font-size: 0.98em;*/
}

img {
  display:block;
  border:0px;
}

.dottedLink {
  text-decoration: none;
  border-style: dotted;
  border-width: 1px;
  border-top-width:0;
  border-left-width:0;
  border-right-width:0;
}

.mainTableConentColumn {
  width:816px;
}

.mainTable {
  margin-left:0px;
  margin-right:0px;
  margin-top: 0px;
  width: 100%;
}

.contentTable {
  margin-left:auto;
  margin-right:auto;
  margin-top: 0px;
  width:100%;
  background-image:url('gfx/background_content.jpg');
  background-repeat:repeat-y;
}

.contentCell {
  padding-left:30px;
  padding-right:30px;
}

.leftWing {
  background-image: url('gfx/wing_left.jpg');
  background-repeat: no-repeat;
  background-position: right 144px;
  width: 2000px;
}

.rightWing {
  background-image: url('gfx/wing_right.jpg');
  background-repeat: no-repeat;
  background-position: left 144px;
  width: 2000px;
}

.menuTable {
  margin-top: 0px;
  width:100%;
  background-image:url('gfx/background_content.jpg');
  background-repeat:repeat-y;
  background-color:black;
  padding:0px;

}

.menuTable img {
  border:0px none;
}

h1, h1 *, h2, h2 *, h3, h3 *, h4, h4 * {
  font-weight:lighter;
  font-family:'Ubuntu';
  color:white;  
}

h1, h2 {
  text-align:right;
  vertical-align:top;
  font-size:21px;
  letter-spacing:2px;
  text-shadow: 1px 1px 4px #888;
  display:inline;
}

h1 * {
  text-align: right;
}

h1 {
  float:right;
  margin-top:0;
}

h2 * {
  float:left;
  text-align: right;
}

h2 {
  float:left;
  margin-top:4px;
}

h3, h3 * {
  font-size: 120%;
  font-weight: bold;
  text-align: left;
  margin-bottom:0;
}

.portalArticles table h3 {
  margin-top:0;
}

h4 {
  margin-bottom:6px;
  display:inline;
}

h1 .doubleArrow, h2 .doubleArrow {
  color:#25f906;
}

/**   **/
.leftColumn {
  text-align:right;
  vertical-align: top;
  background-color: #222222;
  padding-right: 10px;
}

.columnBottom {
  background-image:url(gfx/column_bottom.jpg);
  background-repeat:no-repeat;
  background-position:bottom;
}

.columnTop {
  background-image:url(gfx/column_top.jpg);
  background-repeat:no-repeat;
  background-position:top;
}

.rightColumn {
  text-align:left;
  padding-left: 10px;
  vertical-align:top;
}

.longerWrittenText {
  text-align:justify;
}

h3.projectTitle {
  font-size: 160%;
  float:left;
  margin-top:0px;
  color:white;
}

.browserWarning {
  position:absolute;
  width:100%;
  text-align:center;
  top:7px;
  left:80px;
}

.browserWarning a {
  color:white;
  background:darkred;
  padding:4px;
}

/*PICTURES*/

div.pictures table {
  font-size:0.9em;
}

.photosAlbums {
  width:710px;
  list-style:none outside;
}

.portalPictures .photosAlbums {
  margin:0;
}

.photosAlbums li {
  display:inline;
}

.photosAlbums li a {
  text-decoration:none;
  text-align:center;
  display:inline;
  float:left;
  padding:8px 8px 5px;
  margin:10px;
  -webkit-transition: -webkit-transform .15s linear;
  -moz-transition: -moz-transform .15s linear;
  -o-transition: -o-transform .15s linear;
  transition: transform .15s linear;
}

.albums li a {
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, .75);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .75);
  background:white;  
}

.albums li a {
	width:200px;
}

.photos li a {
	width:288px;
}

.portalPictures .photos li a {
	width:65px;
}

/* We loader bigger images so that they appear nice when zoomed in on hover. */
.albums li a img {
  width:200px;
  height:200px;
}

.photos li a img {
  border: 8px solid white;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, .75);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .75);
}

.photosAlbums li a img {
  display:inline-block;
}

.albums li a div {
  text-align:center;
  margin-top:5px;
  margin-bottom:5px;
  height:40px;
}

.albums li a div div {
  text-align:center;
  font-family:'Permanent Marker';
  font-size:19px;
  color:black;
  line-height:0.75;
  display:table-cell;
  vertical-align:middle;
  width:200px;
}

/* The following idea is from zurb.com/playground/css3-polaroids */
/* By default, we tilt all our images -2 degrees */
.photosAlbums a {
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

/* Rotate all even images 2 degrees */
.photosAlbums li:nth-child(even) a {
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
}
 
/* Rotate every fifth image by 5 degrees and offset it */
.photosAlbums li:nth-child(5n) a {
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  transform: rotate(5deg);
  position: relative;
  right: 5px;
}
 
/* Keep default rotate for every eighth, but offset it */
.photosAlbums li:nth-child(8n) a {
  position: relative;
  top: 8px;
  right: 5px;
}
 
/* Keep default rotate for every eleventh, but offset it */
.photosAlbums li:nth-child(11n) a {
  position: relative;
  top: 3px;
  left: -5px;
}

/* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */
.photosAlbums li a:hover {
  -webkit-transform: scale(1.25) !important;
  -moz-transform: scale(1.25) !important;
  -ms-transform: scale(1.25) !important;
  -o-transform: scale(1.25) !important;
  transform: scale(1.25) !important;
  position: relative;
  z-index: 5;
}

.albumTable {
  width:100%;
}

.albumTable *{
  text-align: center;
}

.albumTable img{
  display: inline;
  border: 0px;
}

td.pictureCellMouseOver {
  background-color: #333344;
}

td.pictureCellMouseOut {
  background-color: transparent;
}

.pictureTable {
  width:100%;
}

.pictureTable *{
  text-align: center;
}

.pictureTable img{
  display: inline;
  border: 0px;
}

.albumTitle {
  font-weight: bold;
  margin-bottom: 4px;
}

div.pictures h2 {
  text-align: left;
  float: left;
  margin: 0px;
  font-weight: normal;
}

/* PORTAL */
table.portalArticlesAndStuff {
  width: 100%;
  
}

div.portal h4 {
  font-size:0.9em;
  font-weight:normal;
  margin: 0;
  text-align:center;
}



td.portalArticles {
  width: 80%;
}

td.portalStuff {
  width: 15%;
  vertical-align:top;
}

.smallertext {
  font-size: 0.8em;
  text-align: left;
}

table.portalProjects {
  width: 100%;
  /*background-image:url(gfx/gradient_1_60.png);
  background-repeat: repeat-x;
  background-position: bottom;*/
}

table.portalPictures {
  width: 100%;
  /*background-image:url(gfx/gradient_1_60.png);
  background-repeat: repeat-x;
  background-position: bottom;*/
}

table.portalProjects td{
  text-align:center;
  font-size:0.9em;
}

table.portalPictures td{
  text-align:center;
  font-size:0.9em;
}

/* ARTICLES */

.portalArticles table {
  background:#222;
  border-radius:1px 6px;
  padding:5px;
  margin-bottom:6px;
}

div.articles h2 {
  font-size: 1.2em;
  color: #FFFFFF;
  font-weight: bold;
  line-height: 2em;
  margin-top: 2px;
  margin-bottom: 0px;
  display:inline; /*prevents trailing line break*/
  float:left;
}

/* PROJECTS */
.projectsTable {
  width:100%;
  background-color: #121212;
  border-spacing: 4px;
}

table.projectsTable td{
  text-align: center;
  font-size: 0.9em;
  padding-bottom: 15px;
  background-color: #222222;
  margin: 2px;
}


.projectsTable img {
  margin-left: auto;
  margin-right:auto;
}

/* ABOUT ME */
div.aboutme table {
  font-size:0.9em;
}

/* IMPRINT */
div.imprint table {
  font-size:0.9em;
}