/* ################################## General ###################################### */

::-moz-selection{background:#000; color: #00ccff;}
::selection {background:#000; color: #00ccff;}

body {margin: 0; padding: 0; background: black;}
:focus {outline: 0;} /* remember to define focus styles! */
strong { font-weight: bold;} /* strong cleaned in reset.css - redefine here. "bold" is the same as 700. */

/* ################################## Text style ###################################### */

h1 {font-size: 60px; font-weight: bold; line-height: 1.1; color: white; letter-spacing: -1px;}
h2 {font-size: 12px; font-weight: bold; line-height: 1.1; text-transform: uppercase; color: white;}
h3 {font-size: 18px; font-weight: normal; line-height: 1.2; font-family: Georgia, "Times New Roman", Times, serif; color: white;}
h4 {font-size: 12px; font-weight: bold; line-height: 1.3; text-transform: uppercase;}
body {font-size: 13px; line-height: 1.4; color: #a6a6a6; font-family: Arial, Helvetica, sans-serif; -webkit-text-size-adjust: none;}

.headingrow h2 {font-family: "Arial Black", Gadget, sans-serif;}
h1  {font-size: 60px; font-weight: bold; line-height: 1.1; color: white; letter-spacing: -1px;}
h2 span {font-size: 30px; font-weight: normal; line-height: 1.2; text-transform: none; font-family: Arial, Helvetica, sans-serif; color: #a6a6a6;}

/* ################################## Text placement ###################################### */

h1 {margin: 3px 0 0 0; padding: 0 0 12px 0;}
h2 {margin: 1px 0 0 0; padding: 0 0 12px 0;}
h3 {margin: -1px 0 0 0; padding: 0 0 8px 0;}
h4 {margin: -1px 0 0 0; padding: 0 0 8px 0;}
p {margin: -1px 0 0 0; padding: 0 0 13px 0;}
p img {margin-top: 1px; margin-bottom: 4px;}

/* ################################## Links ###################################### */

a {color: white; text-decoration: none;}
a:hover {color: #00ccff; text-decoration: none;}
.mceContentBody a {color: white !important; text-decoration: none !important;}
.mceContentBody a:hover {color: #00ccff !important; text-decoration: none !important;}

/* ############################ Lists ################################# */

ul, ol {margin: 0 0 13px 0;}
ul {list-style-type: disc; list-style-position: outside;}
ol {list-style-type: decimal; list-style-position: inside;}
li {margin: 0 0 7px 20px;}
ul li ul, ol li ol {margin: 7px 0;}

/* ############################ Image alignment ################################# */

.image-left {padding: 0; margin-right: 10px; margin-bottom: 0px; float: left;}
.image-right {padding: 0; margin-left: 10px; margin-bottom: 0px; float: right;}

/* ################################## Horizontal & vertical lines ###################################### */

.col-line1 {background: black;}
.col-horline1 {margin-bottom: 10px; background: black;}

/* ############################ Column with background color ################################ */

td.col-color1 {background: url('img/graph.png') no-repeat center 3px;}
td.col-color2 {text-align: left;}
td.col-color3 {text-align: right;}
td.col-color4 {border: 1px solid #262626;}
td.col-color5 {background: url('img/graph_en.png') no-repeat center 3px;}

/* ############################ Language menu ################################# */

#langlink ul li {
	/* reset all styles */
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-image: none;
	text-decoration: none;
	display: inline;
}
#langlink ul li span {
	width: 5px;
	display: inline-block;
}

/* ############################ Other ################################# */

#logo a {
	width: 105px;
	height: 44px;
	background: url('img/gluteus_logo.png');
	display: block;
}
#logo a:hover {
	width: 105px;
	height: 44px;
	background: url('img/gluteus_logo.png') 0 -50px;
}
#logo p {text-indent: -10000px;}

.headingrow {height: 9px; margin: 0 0 20px 0; background: #262626;}
.headingrow h2 {float: left; background: black; line-height: 0.8; padding: 0 10px 0 0; margin: 0; color: white;}

#footer p {padding: 0; line-height: 70px; text-align: right; color: #404040; margin: 0;}

#menu {border-left: 1px dotted white; margin: 0 0 0 30px;}
#menu a, #langlink a {font-size: 12px; line-height: 45px; font-weight: bold; text-transform: uppercase; padding: 0 0 0 30px; font-family: "Arial Black", Gadget, sans-serif;}
#menu a:hover, #langlink a:hover {color: #00ccff; text-decoration: none;}

a:hover {
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: menu;
}
a:hover {-webkit-animation-duration: 0.1s;}
@-webkit-keyframes menu { 
from {color: white;} 
to {color: #00ccff;}}

#map {position: relative;}
#map_adress {width: 200px; padding: 28px 30px 24px 30px; background: url('img/black80percent.png') no-repeat; position: absolute; top: 30px; left: 30px; z-index: 10; color: white;}
#map_adress h3 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; text-transform: uppercase;}
#map_adress span {font-size: 18px; padding-top: 5px; display: block;}

#casecontainer {width: 1000px; overflow: hidden;}
.rowcontainer {width: 1000px; overflow: hidden;}
.case {background: #262626; width: 196px; height: 244px; float: left; margin: 0 5px 15px 0; color: #939393; font-size: 12px;}
.case.last {margin-right: 407px;}
.case:hover {background: #00ccff; color: white; cursor: pointer;}
.case .description {padding: 10px;}
.case h3 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; line-height: 1; padding: 0 0 5px 0; margin: -2px 0 0 0; color: white;}

.case:hover {
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: opacity;
}
.case:hover {-webkit-animation-duration: 0.1s;}
@-webkit-keyframes opacity { 
from {background: #262626; color: #939393;} 
to {background: #00ccff; color: white;}}

.row {width: 6030px; height: 259px; overflow: hidden;}
.row .single {width: 1000px; height: 244px; margin-right: 5px; float: left; background: #262626;}
.row .single h3 {font-family: Arial, Helvetica, sans-serif; font-weight: bold;}
.row .single img {margin-left: 10px; float: left;}
.row .single .textcontainer {padding: 30px; float: left; width: 370px;}

.row .single .navleft, .row .single .navright {width: 50px; height: 60px; margin-top: 92px;}
.row .single .navleft {margin-left: 10px; float: left; background: url('img/navigation_arrows.png') no-repeat -10px 18px;}
.row .single .navleft:hover {background: url('img/navigation_arrows.png') no-repeat -10px -32px; cursor: pointer;}
.row .single .navleft:active {background: url('img/navigation_arrows.png') no-repeat -9px -31px;}
.row .single .navright {margin-right: 10px; float: right; background: url('img/navigation_arrows.png') no-repeat -80px 18px;}
.row .single .navright:hover {background: url('img/navigation_arrows.png') no-repeat -80px -32px; cursor: pointer;}
.row .single .navright:active {background: url('img/navigation_arrows.png') no-repeat -79px -31px;}

.row .single .navleft:hover, .row .single .navright:hover {
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: navigation;
}
.row .single .navleft:hover, .row .single .navright:hover {-webkit-animation-duration: 0.5s;}
@-webkit-keyframes navigation { 
from {opacity: 0;} 
to {opacity: 1;}}

#contentbox {
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: fade;
}
#contentbox  {-webkit-animation-duration: 0.5s;}
@-webkit-keyframes fade { 
from {margin-left: -2560px;} 
to {margin-left: 0px;}}

*:focus {
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
	-webkit-animation-name: focus;
}
*:focus {-webkit-animation-duration: 0.5s;}
@-webkit-keyframes focus { 
from {opacity: 0} 
to {opacity: 1}}