/* ----------- general stuff ----------- */
body {
    font: 85% arial, helvetica, sans-serif;
    color: rgb(210,210,210);
    background-color: rgb(22,22,19);
    margin: 0;
    overflow-y: scroll !important; /* IE hack */
    overflow-y: hide;
}

#container {
    position: relative;
    width: 1005px;
    margin: auto;
    /*padding-bottom: 53px;*/
}

a {
    outline: none;
    color: rgb(230,230,230);
}

img {
    border-style: none;
}

p { margin:0; }

body, html, #container { height: 100%; }

div.box {background:url(UI/Border_vert.gif) repeat-y;}
div.box div {background:url(UI/Border_vert.gif) right repeat-y;}
div.box div div {background:url(UI/Border_hori.gif) repeat-x;}
div.box div div div {background:url(UI/Border_hori.gif) bottom repeat-x;}
div.box div div div div {background:url(UI/Border_TopLeft.gif) left top no-repeat;}
div.box div div div div div {background:url(UI/Border_TopRight.gif) right top no-repeat;}
div.box div div div div div div {background:url(UI/Border_BottomLeft.gif) left bottom no-repeat;}
div.box div div div div div div div {background:url(UI/Border_BottomRight.gif) right bottom no-repeat;}

div.Text { padding: 30px 30px 30px 30px; }


/* ----------- navigation bar (and name) ----------- */
#Button_Graphics {
    position: absolute;    
    left: 285px;
    top: 0px;
    width: 139px;
    height: 45px;
}

#Button_Programming {
    position: absolute;
    left: 424px;
    top: 0px;
    width: 173px;
    height: 45px;
}

#Button_Contact {
    position: absolute;
    left: 597px;
    top: 0px;
    width: 123px;
    height: 45px;
}

#Name {
    position: relative;
    width: 735px;
    height: 53px;
    margin: auto;
    margin-top: -56px;
    clear: both;
    z-index: -999;
}
#Name_2 {
    position: relative;
    top: 210px;
    width: 735px;
    height: 53px;
    margin: auto;
}


/* ----------- mini-navi: Graphics ----------- */
#MiniNavi_Graphics {
    position: relative;
    top: 200px;
    width: 221px;
    height: 131px;
    margin: auto;
}
#Arrow_Left {
    position: absolute;
    left: -66px;
    top: 15px;
    width: 45px;
    height: 105px;
}
#Arrow_Right {
    position: absolute;
    left: 243px;
    top: 15px;
    width: 45px;
    height: 105px;
}

#navi{
  	position: relative;
  	list-style: none;
    width: 221px;
  	height: 131px;
  	background: url("UI/home_graphics.gif");
  	margin: auto;
  	padding: 0;
}

#navi li a{
  	position: absolute;
  	text-indent: -9999px;
  	display: block;
  	text-decoration: none;
    background: none;
}

#navi li a:hover{
    background: white;
	opacity: 0.2; /* CSS3 - FF, Opera und Safari */
	-moz-opacity: 0.2; /* für ältere Mozilla Versionen */
	-khtml-opacity: 0.2; /* für ältere Safari und Konqueror Versionen */
	filter: alpha(opacity=20); /* IE */
}

#Mininav_Aktsculpt a{
    top: 1px;
  	left: 1px;
  	width: 1px;
  	height: 1px;
  	border: 19px solid white; /*needs a thick border in IE, otherwise won't always work*/
  	opacity: 0;
	-moz-opacity: 0;
	-khtml-opacity: 0;
  	filter: alpha(opacity=0);
}
#Mininav_SeaCreature a{
    top: 1px;
  	left: 46px;
  	width: 46px;
  	height: 1px;
  	border: 19px solid white;
  	opacity: 0;
	-moz-opacity: 0;
	-khtml-opacity: 0;
  	filter: alpha(opacity=0);
}
#Mininav_DigitalWorld a{
    top: 1px;
    left: 136px;
    width: 1px;
  	height: 46px;
  	border: 19px solid white;
  	opacity: 0;
	-moz-opacity: 0;
	-khtml-opacity: 0;
  	filter: alpha(opacity=0);
}
#Mininav_Alien a{
  	top: 1px;
  	left: 181px;
  	width: 1px;
  	height: 1px;
  	border: 19px solid white;
  	opacity: 0;
	-moz-opacity: 0;
	-khtml-opacity: 0;
  	filter: alpha(opacity=0);
}
#Mininav_Cubehead a{
    top: 46px;
  	left: 1px;
  	width: 1px;
  	height: 1px;
  	border: 19px solid white;
  	opacity: 0;
	-moz-opacity: 0;
	-khtml-opacity: 0;
  	filter: alpha(opacity=0);
}
#Mininav_GasGuy a{
    top: 46px;
  	left: 46px;
  	width: 1px;
  	height: 46px;
  	border: 19px solid white;
  	opacity: 0;
	-moz-opacity: 0;
	-khtml-opacity: 0;
  	filter: alpha(opacity=0);
}
#Mininav_Mask a{
    top: 46px;
  	left: 91px;
  	width: 1px;
  	height: 1px;
  	border: 19px solid white;
  	opacity: 0;
	-moz-opacity: 0;
	-khtml-opacity: 0;
  	filter: alpha(opacity=0);
}
#Mininav_Face a{
    top: 46px;
  	left: 181px;
  	width: 1px;
  	height: 1px;
  	border: 19px solid white;
  	opacity: 0;
	-moz-opacity: 0;
	-khtml-opacity: 0;
  	filter: alpha(opacity=0);
}
#Mininav_Sokas a{
    top: 91px;
  	left: 1px;
  	width: 1px;
  	height: 1px;
  	border: 19px solid white;
  	opacity: 0;
	-moz-opacity: 0;
	-khtml-opacity: 0;
  	filter: alpha(opacity=0);
}
#Mininav_Rugby a{
    top: 91px;
  	left: 91px;
  	width: 46px;
  	height: 1px;
  	border: 19px solid white;
  	opacity: 0;
	-moz-opacity: 0;
	-khtml-opacity: 0;
  	filter: alpha(opacity=0);
}
#Mininav_AChar a{
    top: 91px;
  	left: 181px;
  	width: 1px;
  	height: 1px;
  	border: 19px solid white;
  	opacity: 0;
	-moz-opacity: 0;
	-khtml-opacity: 0;
  	filter: alpha(opacity=0);
}


/* ----------- mini-navi: Programming ----------- */
#MiniNavi_Programming {
    position: relative;
    top: 200px;
    width: 131px;
    height: 86px;
    margin: auto;
}
#Arrow_Left_Programming {
    position: absolute;
    left: -66px;
    top: -9px;
    width: 45px;
    height: 105px;
}
#Arrow_Right_Programming {
    position: absolute;
    left: 152px;
    top: -9px;
    width: 45px;
    height: 105px;
}

#navi_programming{
  	position: relative;
  	list-style: none;
    width: 131px;
  	height: 86px;
  	background: url("UI/home_programming.gif");
  	margin: auto;
  	padding: 0;
}

#navi_programming li a{
  	position: absolute;
  	text-indent: -9999px;
  	display: block;
  	text-decoration: none;
    background: none;
}

#navi_programming li a:hover{
    background: white;
	opacity: 0.2; /* CSS3 - FF, Opera und Safari */
	-moz-opacity: 0.2; /* für ältere Mozilla Versionen */
	-khtml-opacity: 0.2; /* für ältere Safari und Konqueror Versionen */
	filter: alpha(opacity=20); /* IE */
}

#Mininav_Analytics a{
    top: 1px;
  	left: 1px;
  	width: 1px;
  	height: 46px;
  	border: 19px solid white;
  	opacity: 0;
	-moz-opacity: 0;
	-khtml-opacity: 0;
  	filter: alpha(opacity=0);
}
#Mininav_Pinning a{
    top: 1px;
  	left: 46px;
  	width: 1px;
  	height: 1px;
  	border: 19px solid white;
  	opacity: 0;
	-moz-opacity: 0;
	-khtml-opacity: 0;
  	filter: alpha(opacity=0);
}
#Mininav_SuspendDynGhost a{
    top: 46px;
    left: 46px;
    width: 46px;
  	height: 1px;
  	border: 19px solid white;
  	opacity: 0;
	-moz-opacity: 0;
	-khtml-opacity: 0;
  	filter: alpha(opacity=0);
}
#Mininav_TexPadder a{
  	top: 1px;
  	left: 91px;
  	width: 1px;
  	height: 1px;
  	border: 19px solid white;
  	opacity: 0;
	-moz-opacity: 0;
	-khtml-opacity: 0;
  	filter: alpha(opacity=0);
}


/* ----------- thumb set: Graphics ----------- */
#Thumb_Aktsculpt {
    position: absolute;
    left: 135px;
    top: 120px;
    width: 135px;
    height: 135px;
}

#Thumb_SeaCreature {
    position: absolute;
    left: 285px;
    top: 120px;
    width: 285px;
    height: 135px;
}

#Thumb_DigitalWorld {
    position: absolute;
    left: 585px;
    top: 120px;
    width: 135px;
    height: 285px;
}

#Thumb_Alien {
    position: absolute;
    left: 735px;
    top: 120px;
    width: 135px;
    height: 135px;
}

#Thumb_Cubehead {
    position: absolute;
    left: 135px;
    top: 270px;
    width: 135px;
    height: 135px;
}

#Thumb_GasGuy {
    position: absolute;
    left: 285px;
    top: 270px;
    width: 135px;
    height: 285px;
}

#Thumb_Mask {
    position: absolute;
    left: 435px;
    top: 270px;
    width: 135px;
    height: 135px;
}

#Thumb_Face {
    position: absolute;
    left: 735px;
    top: 270px;
    width: 135px;
    height: 135px;
}

#Thumb_Sokas {
    position: absolute;
    left: 135px;
    top: 420px;
    width: 135px;
    height: 135px;
}

#Thumb_Rugby {
    position: absolute;
    left: 435px;
    top: 420px;
    width: 285px;
    height: 135px;
}

#Thumb_AChar {
    position: absolute;
    left: 735px;
    top: 420px;
    width: 135px;
    height: 135px;
}


/* ----------- content: Graphics ----------- */
#Img_Aktsculpt_1 {
    position: relative;
    top: 120px;
    width: 514px;
    height: 502px;
    margin: auto;
}

#Img_Aktsculpt_case {
    position: relative;
    top: 140px;
    width: 608px;
    height: 461px;
    margin: auto;
}

#Img_Aktsculpt_2 {
    position: relative;
    top: 160px;
    width: 532px;
    height: 537px;
    margin: auto;
}

#Img_Seacreature {
    position: relative;
    top: 120px;
    width: 986px;
    height: 707px;
    margin: auto;
}

#Text_DigitalWorld {
    position: relative;
    top: 120px;
    width: 700px;
    height: 100px;
    margin: auto;
    text-align: center;
    line-height: 1.5;
}
#Img_DigitalWorld {
    position: relative;
    top: 140px;
    width: 450px;
    height: 675px;
    margin: auto;
}

#Img_Alien_Clay {
    position: relative;
    top: 120px;
    width: 896px;
    height: 437px;
    margin: auto;
}

#Img_Alien {
    position: relative;
    top: 140px;
    width: 884px;
    height: 436px;
    margin: auto;
}

#Text_Cubehead {
    position: relative;
    top: 120px;
    width: 270px;
    height: 150px;
    margin: auto;
    line-height: 1.5;
}
#Img_Cubehead_1 {
    position: relative;
    top: 140px;
    width: 960px;
    height: 1397px;
    margin: auto;
}
#Img_Cubehead_2 {
    position: relative;
    top: 160px;
    width: 1000px;
    height: 675px;
    margin: auto;
}

#Text_GasGuy {
    position: relative;
    top: 120px;
    width: 500px;
    height: 50px;
    margin: auto;
    text-align: center;
    line-height: 1.5;
}
#Img_GasGuy_P1 {
    position: relative;
    top: 140px;
    width: 873px;
    height: 691px;
    margin: auto;
}
#Img_GasGuy_P2 {
    position: relative;
    top: 160px;
    width: 1004px;
    height: 798px;
    margin: auto;
}
#Img_GasGuy_Tex {
    position: relative;
    top: 180px;
    width: 800px;
    height: 400px;
    margin: auto;
}
#Img_GasGuy_P2_W {
    position: relative;
    top: 200px;
    width: 1004px;
    height: 1582px;
    margin: auto;
}
#Img_GasGuy_Print {
    position: relative;
    top: 220px;
    width: 450px;
    height: 700px;
    margin-left: 100px;
    margin-bottom: 60px;
}
#Img_GasGuy_Flower {
    position: relative;
    top: -540px;
    width: 332px;
    height: 449px;
    margin-left: 568px;
    margin-bottom: -449px;
}

#Img_Mask {
    position: relative;
    top: 120px;
    width: 942px;
    height: 305px;
    margin: auto;
}

#Img_Face {
    position: relative;
    top: 120px;
    width: 757px;
    height: 506px;
    margin: auto;
}
#Img_Face_Wire {
    position: relative;
    top: 140px;
    width: 757px;
    height: 506px;
    margin: auto;
}

#Text_Sokas {
    position: relative;
    top: 120px;
    width: 400px;
    height: 50px;
    margin: auto;
    text-align: center;
}
#Img_Sokas_Knife {
    position: relative;
    top: 120px;
    width: 874px;
    height: 709px;
    margin: auto;
}
#Img_Sokas_Crossbow {
    position: relative;
    top: 140px;
    width: 857px;
    height: 625px;
    margin: auto;
}
#Img_Sokas_1 {
    position: relative;
    top: 160px;
    width: 764px;
    height: 743px;
    margin: auto;
}
#Img_Sokas_2 {
    position: relative;
    top: 180px;
    width: 768px;
    height: 720px;
    margin: auto;
}
#Img_Sokas_3 {
    position: relative;
    top: 200px;
    width: 540px;
    height: 828px;
    margin: auto;
}
#Img_Sokas_Wire {
    position: relative;
    top: 220px;
    width: 878px;
    height: 780px; /*700 + padding*/
    margin: auto;
}

#Text_Rugby {
    position: relative;
    top: 120px;
    width: 500px;
    height: 50px;
    margin: auto;
    text-align: center;
}
#Img_Rugby {
    position: relative;
    top: 120px;
    width: 952px;
    height: 547px;
    margin: auto;
}
#Img_Rugby_Glove {
    position: relative;
    top: 140px;
    width: 978px;
    height: 738px;
    margin: auto;
}
#Img_Rugby_Pig {
    position: relative;
    top: 160px;
    width: 886px;
    height: 860px;
    margin: auto;
}

#Img_AChar {
    position: relative;
    top: 120px;
    width: 632px;
    height: 704px;
    margin: auto;
}
#Img_Headscetch {
    position: relative;
    top: 140px;
    width: 872px;
    height: 438px;
    margin: auto;
}


/* ----------- thumb set: Programming ----------- */
#Thumb_Analytics {
    position: absolute;
    left: 285px;
    top: 120px;
    width: 135px;
    height: 285px;
}
#Thumb_Pinning {
    position: absolute;
    left: 435px;
    top: 120px;
    width: 135px;
    height: 135px;
}
#Thumb_Ghost {
    position: absolute;
    left: 435px;
    top: 270px;
    width: 285px;
    height: 135px;
}
#Thumb_TexPadder {
    position: absolute;
    left: 585px;
    top: 120px;
    width: 135px;
    height: 135px;
}


/* ----------- content: Programming ----------- */
#Text_Analytics {
    position: relative;
    top: 120px;
    width: 530px;
    height: 500px;
    margin: auto;
    text-align: justify;
}
#Text_Analytics a:hover {
    background: #28b;
}
#Img_Analytics_UI {
    position: relative;
    top: 20px;
    width: 467px;
    height: 219px;
    margin: auto;
}

#Text_Pinning {
    position: relative;
    top: 120px;
    width: 435px;
    height: 420px;
    margin: auto;
    text-align:justify;
}
#Text_Pinning a:hover {
    background: #28b;
}
#Img_Pinning {
    position: relative;
    top: 20px;
    width: 263px;
    height: 240px;
    margin: auto;
}

#Text_SuspendDynGhost {
    position: relative;
    top: 120px;
    width: 435px;
    height: 480px;
    margin: auto;
    text-align:justify;
}
#Text_SuspendDynGhost a:hover {
    background: #28b;
}
#Img_SuspendDynGhost {
    position: relative;
    top: 20px;
    width: 340px;
    height: 213px;
    margin: auto;
}

#Text_TexPadder {
    position: relative;
    top: 120px;
    width: 435px;
    height: 240px;
    margin: auto;
    text-align:justify;
}
#Text_TexPadder a:hover {
    background: #28b;
}

/* ----------- content: Contact ----------- */
#Text_Contact_Container {
    position: relative;
    top: 120px;
    width: 435px;
    height: 300px;
    margin: auto;
    font-size: 1.5em;
}
#Text_Contact_Container a:hover {
    background: #28b;
}