html, body	{width:100%;height:100%;border:0;padding:0;margin:0;}
body 	{font-family:Helvetica,Verdana,Arial,sans-serif;font-size:12pt;color:#777777;overflow-x:hidden;overflow-y:auto; min-height:550px}

#slider {z-index:-1; position:fixed; top:0px; height:100%; background-color:#777777; box-shadow: 0px 0px 12px #444444;}

#description td 	{width:200px;}
.thumb-container	{height:292px;}
.selector			{float:left; width:50%;}
.white				{color:#FFFFFF}

#adress				{position:absolute; bottom:0px; left:2%}
.top2     			{padding-top:2% !important;}
.info			      {width:63%; padding:2%;}
.info	hr	      {margin: 40px 0px;}
.info li        {list-style-type: disc; margin-left: 1em; padding: 3px 0;}
.info a:link    {display: inline;}
.info a:visited {display: inline;}
.startdesc			{height:180px; bottom:0px; right:0; padding-right:2%; width:62%; margin-top:40px;}
.startlogo			{right:3%; width:44%; top:0; z-index:-1}
.startlayout		{position:absolute;}
#image-preloader	{position:absolute; top:-9000px; height:1px; width:1px; background-image:url(resources/loadindicator.gif)}
#hprojectw			{padding-top:12px; padding-bottom:12px;}
#project-viewport	{height:100%;}
#hproject			{position:relative}

#big-image img {display:block; margin-left:auto; margin-right:auto;}
#image-overlay		{opacity:0; float:left;}
.image-arrow		{background-image:url(resources/arrows.png);background-repeat:no-repeat;position:absolute;width:31px;top:0px; bottom:0px; height:auto;}
#imageleft			{background-position:0px 50%; opacity:0.8; left:4%}
#imagelefts			{background-position:-31px 50%; opacity:0;	  left:4%}
#imageright			{background-position:-63px 50%; opacity:0.8; right:4%}
#imagerights		{background-position:-94px 50%; opacity:0;   right:4%}

.project-arrow		{width:100%; height:25px; cursor:pointer; background-image:url(resources/varrows.png);background-repeat:no-repeat;position:absolute;}
.project-arrow-wrapper {position:relative; height:25px; margin:5px 0;}
#projectup			{background-position:0%	0px; opacity:0.8;top:-25px;}
#projectups			{background-position:0%  -25px; opacity:0;  top:-25px;}
#projectdown		{background-position:0%  -50px; opacity:0.8;bottom:-25px}
#projectdowns		{background-position:0%  -75px; opacity:0;  bottom:-25px}

.thumb-wrapper					{position:relative; float:left; width:50%; height:50%; background-color:#FFFFFF;}
.thumb-wrapper img				{width:100%; height:100%;}
.thumb-wrapper div				{position:absolute; top:0px; left:0px; opacity:0.5; width:100%; height:100%; background-color:#000000;}
.nojs .thumb-wrapper div:hover	{opacity: 0;}

.arrow-left			{position:absolute; left:-6%;}
.js .arrow-left		{padding: 0px 6px;}
.nojs .arrow-left	{padding: 0px 2px;}
.arrow-right		{position:absolute; padding: 0px 6px; right:-6%;}
.project-name		{font-size:14pt; color:#AA0000}

.lf			{float:left;  text-align:left;}
.rf			{float:right; text-align:right;}
.lfloat		{float:left;}
.rfloat		{float:right;}
.lclear		{clear:left;}
.rclear		{clear:right;}
.clear 		{clear:both;}

.js .left, .js .middle {padding-left:2%; padding-right:2%;}
.js .right			{padding-left:2%;}
.nojs .left			{padding-left:1%; padding-right:2%;}
.nojs .middle		{padding-left:2%; padding-right:2%;}
.nojs .old .middle	{padding-left:1%; padding-right:2%;}
.nojs .right		{padding-left:2%;}

.horizontal 	{display: block;}
.vertical 		{display: none;}
.inverted		{}
.inv2			{color:#FFFFFF}
.pane 			{padding-top:12px;}
.nojs .pane		{width:30%;	min-width:198px;}

.image-wrapper			{position:absolute; padding-top:12px; z-index: 10;}
.js .image-wrapper		{padding-left:2%; padding-right:2%;}
.nojs .image-wrapper	{left:34%; width:64%; padding-right:1%;}
.image					{}

.selected 		{}
.nojs .selected {color:#AA0000}

.oinfo		{padding: 0 2%; width:62%;}
.hinfo		{float:left; width:51%;}
.linfo		{float:left; width:47%; padding-right:3%; padding-top:12px;}
.rinfo		{float:left; width:47%; padding-left:3%;  padding-top:12px;}


/* for ie and browsers which don't know @media stuff but have js activated*/
.mediaLayout 				{}
.mediaLayout .bigimg {width:100%}
.mediaLayout .disclaimer {width:100%; padding:2%; margin-top:20px;}
.mediaLayout .oinfo			{padding: 4% 2%; width:96%;}
.mediaLayout .hinfo			{float:left; width:100%;}
body.mediaLayout			{overflow-x: auto;}
.mediaLayout .rfloat		{float:left}
.mediaLayout .horizontal	{display: none}
.mediaLayout .vertical 		{display: block}
.mediaLayout .inverted		{background-color: #777777; color: #FFFFFF}
.mediaLayout .inv2			{color:#777777}
.mediaLayout .pane			{width:96%; left:0; padding-left:2%; padding-right:2%; padding-bottom:5%; min-width:325px;}
.mediaLayout .image-wrapper	{clear:both; position:relative; left:0px; width:96%; padding:2%;}
.mediaLayout .startlayout	{position:relative; left:0; right:0; padding:0 2%; padding-bottom:12px; width:96%}

a:link				{text-decoration:none; width:100%; height:100%; display:block; color:inherit;}
a:visited			{text-decoration:none; width:100%; height:100%; display:block; color:inherit;}
a:active			{text-decoration:none; width:100%; height:100%; display:block;}
a:hover				{color:#AA0000;}

@media screen and (max-width:700px) {
.bigimg    {width:100%}
.disclaimer			{width:100%; padding:2%; margin-top:20px;}
.oinfo				{padding: 4% 2%; width:96%;}
.hinfo				{float:left; width:100%;}
body				{overflow-x: auto;}
.rfloat				{float:left}
.horizontal			{display: none}
.vertical 			{display: block}
.inverted			{background-color: #777777; color: #FFFFFF}
.inv2				{color:#777777}
.pane				{left:0; padding-left:2%; padding-right:2%; padding-bottom:5%;}
.js .pane			{width:96%; min-width:325px;}
.nojs .pane			{width:96%; min-width:325px;}
.image-wrapper		{clear:both; position:relative; left:0px;}
.js .image-wrapper	{width:96%; padding:2%;}
.nojs .image-wrapper{width:96%; padding:2%;}
.startlayout		{position:relative; left:0; right:0; padding:0 2%; width:96%}

.nojs .left, .nojs .middle, .nojs .old .middle , .nojs .right {padding-left:2%; padding-right:2%;}
}


.relative	{position:relative;}
.nooverflow {overflow:hidden;}
.hidden		{display:none}
.bottom		{bottom:0;}
.vspace		{padding-top:12px;}

.hlayout	{width:100%;}
.vlayout	{height:100%;}
.big		{font-size:15pt;}
.little		{font-size:8pt;}
.bold		{font-weight:bold;}
.ltext		{text-align:left;}
.ctext		{text-align:center;}
.rtext		{text-align:right;}
.button		{cursor:pointer;}

h1			{font-size:15pt; margin: 0 0 20px;}
h2			{font-size:13pt; margin: 0 0 5px;}
table		{width:100%; border-spacing:0px; border-collapse:collapse;}
ul			{ margin:0px; padding:0px}
li			{list-style:none; cursor:pointer; padding-bottom:10px; position:relative;}