/* 
* Amazium V1.0.1
* Copyright 2012, Mike Ballan
* www.amazium.co.uk
*/

/***** Place standard 960px view CSS under here *****/

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplaymenu-dropdown-flyout-ipad6.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

ul#language_switch {margin-top: -3px;}
ul#language_switch img {position: relative; top: 4px; left: 2px;}

#sidemenu {
 
}

#sidemenu a {
  color: #666;
  display: block;
  padding-left: 0;
  -webkit-transition: padding-left 0.2s linear;
  -moz-transition: padding-left 0.2s linear;
  -o-transition: padding-left 0.2s linear;
  -ms-transition: padding-left 0.2s linear;
}

#pageUid_1 #sidemenu a {
  color: white;
}

#sidemenu a:hover {
  
}

#sidemenu p {
  margin-right: 5px;
}

#sidemenu ul li {
  margin-bottom: 0;
 /* border-top: 1px solid #eee;*/
  border-bottom: 1px solid #666;
  padding: 0;
  width: 100%;
  background-image: url(../img/arrow_box_red.png);
  background-repeat:no-repeat;
  background-position:right;
}

#sidemenu ul li:hover {
  background-color: white;
}

#pageUid_1 #sidemenu ul li:hover {
  background-color: #666;
}

#sidemenu ul li:hover a{
  padding-left: 10px;
}


#menu {
  /*position:relative; 
  margin:20px auto;*/
  text-align:left; 
  z-index:500; 
  position: absolute;
}

#menu ul {
  margin:0; 
  list-style:none;
  white-space:nowrap; 
  display:inline-block; 
  padding: 0; 
}

#menu ul ul {
  filter:0; 
  *background:rgb(174,188,191);
}

#menu ul {display: inline;}

#menu li {margin:0; padding:0; list-style:none;}
#menu li {display:inline-block; display:inline;}
#menu ul ul {position:absolute; left:0; display:none;
-webkit-box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.6);
 box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.6);
}
#menu ul ul ul { 
}

#menu > ul {display:table;}
#menu > ul > li {float:left; display:block;position:relative;  z-index:600; background-color: white; width: 172px;  margin: 0 0 0 16px;}
#menu > ul > li:hover {display:inline-block; z-index:605;}

#menu ul a, #menu ul span.nolink {
  display:block; 
  font:12px/20px 'Rubik', 'FaktPro-Black', Arial, sans-serif; 
  color: black; 
  text-decoration:none; 
  padding:0 0 0 0;  
}

#menu ul ul a, #menu ul ul span.nolink {
  display:block; 
  font:10px/20px 'Rubik', 'FaktPro-Black', Arial, sans-serif; 
  color: black; 
  text-decoration:none; 
  padding:0 0 0 0;  
}

#menu ul ul ul ul a { 
  font:10px/20px 'Rubik', 'FaktPro-Black', Arial, sans-serif; 
}

#menu > ul > li > a, #menu > ul > li > span.nolink {
   padding: 5px 10px 5px 18px;
   background-image: url(../img/arrow.png);
   background-repeat: no-repeat;
   background-position: left 6px;
}

#menu > ul > li:hover > a, #menu > ul > li:hover > span.nolink {
   padding: 5px 10px 5px 18px;
   background-image: url(../img/arrow_red.png);
   background-repeat: no-repeat;
   background-position: -3px 3px;
}

#menu ul > li > ul > li:first-child > a {   
}

#menu > ul > li:last-child > a {
}

#menu ul ul a, #menu ul ul span.nolink {padding:0 10px; padding: 0 3px; margin:0 0; line-height:25px; border-bottom:1px solid #000; height: 50px;}
/*#menu ul ul a {padding:0 10px; margin:5px 0; line-height:25px; border:1px solid #000; border-color:rgba(255,255,255,0.4) rgba(80,80,80,0.8) rgba(80,80,80,0.8) rgba(255,255,255,0.3); text-shadow:0 -1px 2px rgba(0, 0, 0, 0.6);}
*/

#menu ul li:hover > ul {display:block; top:30px; z-index:-1; background-color: white;}
#menu ul ul li:hover > ul {left:100%; top:auto; margin-top:-51px; margin-left:0; z-index:10; display:block;}
#menu ul ul li:hover > ul {*margin-top:-51px;}

/*#menu > ul > li.left:hover > ul {left:auto; right:0; top:30px; z-index:-1; text-align:right;}*/

#menu > ul > li.left ul li:hover > ul {left:auto; right:100%; top:auto; margin-top:-51px; margin-right:0; z-index:700; /*text-align:right;*/}
#menu > ul > li.left ul li:hover > ul {*margin-top:-42px;}

#menu ul ul li:hover > a, #menu ul ul li:hover > span.nolink {color:red; background-color: #eee;}

#menu > ul > li:hover > a, #menu > ul > li:hover > span.nolink {color:red;}

#menu  ul  li  a span, #menu  ul  li  span.nonlink span { position: relative; top: -15px; margin: 0 1px 0 10px;}
#menu  ul  ul  li  a span, #menu  ul  ul  li  span.nolink span { position: relative; top: -15px; margin: 0 1px 0 10px;}

#menu img.transp {position:fixed; left:0; top:0; width:100%; height:100%; display:none; z-index:-1;}
#menu ul:hover + img.transp {display:block;}

#menu img {  
}

#menu ul>li>ul>li>ul>li>span>img { /*max-width: 50px;*/}


#menu ul ul ul ul { width: 220px; background-color: transparent !important; 
-webkit-box-shadow:  -4px -5px 5px 0px rgba(0, 0, 0, 0.3);
 box-shadow:  -4px -5px 5px 0px rgba(0, 0, 0, 0.3);
}
#menu ul li.left ul ul ul { width: 220px; background-color: transparent !important; 
-webkit-box-shadow:  4px -5px 5px 0px rgba(0, 0, 0, 0.3);
 box-shadow:  4px -5px 5px 0px rgba(0, 0, 0, 0.3);
}
#menu ul ul ul ul li { width: 109px; float: left; background-color: white; border-right: 1px solid #000;}
#menu ul li.left ul ul ul li { width: 109px; float: right; background-color: white;}
#menu ul ul ul ul a {width: 109px; padding: 0;  line-height: 15px; text-align: center; color: black;}
#menu ul ul ul ul a:hover {background-color: white;}
#menu ul ul ul ul a img {/*display: none;*/}
#menu ul ul ul ul a img:hover {}
#menu ul ul ul ul a span { -webkit-box-shadow:  0px 0px 3px 0px rgba(0, 0, 0, 0.4); box-shadow:  0px 0px 3px 0px rgba(0, 0, 0, 0.4);display: block; position: relative; top: -55px; left: -10px; background-color: white; border-top: 1px solid black; border-bottom: none; /*background: rgba(238,238,238,1)*/; width: 100%;  -webkit-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; -ms-transition: all 0.4s ease-in; transition: all 0.4s ease-in;}
#menu ul ul ul ul a:hover span {  /*background: rgba(0,0,0,0); opacity: 0;*/  background-color: #eee;top: -65px; width: 100%; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}

.image-grid .grid_3 {
 width: 128px; 
}

.tinynav {
 display: none; 
}

/***** End standard 960px *****/

@media only screen and (min-width: 960px) {

}

/***** Bigger than 960px *****/
@media only screen and (min-width:1200px) {
#menu ul ul a, #menu ul ul span.nolink {font-size:12px;padding:0 10px;}
#menu > ul > li {float:left; display:block;position:relative;  z-index:600; background-color: white; width: 208px; margin: 0 0 0 20px;}
.image-grid .grid_3 {
 width: 160px;  
}
}


/***** iPad Smaller than 959px *****/
@media only screen and (min-width: 768px) and (max-width: 959px) {
#menu > ul > li {width: 135px;margin: 0 0 0 14px;}
.image-grid .grid_3 { width: 164px; }
#menu > ul > li > ul > li > span >img, #menu > ul > li > ul > li > ul > li > span > img, #menu > ul > li > ul > li > a > img {display:none !important; }
#menu ul ul a, #menu ul ul span.nolink { line-height: 80px; padding-left: 0; padding-right: 3px; font-size: 10px;}
#menu ul ul ul ul { width: 180px;}
#menu ul ul ul ul li { width: 89px;}
#menu ul li.left ul ul ul li { width: 89px;}
#menu ul ul ul ul a {width: 89px;}
#menu ul ul ul ul a span {font-size: 8px;}
} 

/***** iPhone  small *****/
@media only screen and (max-width: 767px) {
#menu {/*text-align: center;*/}
#menu ul a, #menu ul span.nolink {display:block; font:10px/20px 'FaktPro-Black', Arial, Helvetica, sans-serif;color: black; text-decoration:none;padding:0 0 0 0;}
#menu > ul > li {float:left; display:block;position:relative; z-index:600; background-color: white; width: 95px; margin: 0 0 0 0;}
#menu img {display:none !important; }
#menu ul:hover + img.transp {display:block !important;}
#menu ul ul a, #menu ul ul span.nolink {padding:0 6px; margin:0 0; line-height:40px; border-bottom:1px solid #000; height: 40px;}
#menu ul li:hover > ul { top:30px;}
#menu ul  ul  {/*position: relative;*/ width: 100px; width: auto;}
#menu ul ul li:hover > ul {left:100%; top:auto; margin-top:-31px;/*left:0; top:auto; margin-top:0;*/  margin-left:0; z-index:10; display:block;}
#menu  ul  ul  li  a span, #menu  ul  ul  li  span.nolink span { position: relative; top: 0; margin: 0;}

#menu > ul > li.left:hover > ul {left:auto; right:-34px; top:30px; z-index:-1; /*text-align:right;*/ left: 0;}

#menu > ul > li.left ul li:hover > ul {left:auto; right:100%; top:auto; margin-top:-31px; margin-right:0; z-index:700; text-align:left;}
#menu > ul > li.left ul li:hover > ul {*margin-top:-42px;}

#menu ul ul ul {/*position: relative;*/ width: auto; }

/*#menu ul ul ul ul { display: none !important; }*/

#menu > ul > li.right-left:hover > ul {left:auto; right:-34px; top:30px; z-index:-1; /*text-align:right;*/ left: 0;}

#menu > ul > li.right-left ul li:hover > ul {left:80%; right:auto; top:auto; margin-top:-31px; margin-right:0; z-index:700; text-align:left;}
#menu > ul > li.right-left ul li:hover > ul {*margin-top:-42px;}

#menu > ul > li.right-left ul li:hover > ul li:hover > ul {left:100%; right:auto; top:auto; margin-top:-31px; margin-right:0; z-index:700; text-align:right;}

#menu ul ul ul ul { width: 160px; background-color: transparent !important; }
#menu ul ul ul ul li { width: 79px; float: left; background-color: white;border-right: 1px solid black;}
#menu ul ul ul ul a {width: 79px; padding: 0; border-right: 1px solid black; line-height: 12px; text-align: center;height: 30px;}
#menu ul ul ul ul a:hover {background-color: #eee;}
#menu ul ul ul ul a img {display: none;}
#menu ul ul ul ul a span { display: block; position: relative; top: 10px; left: 0; background-color: transparent;}
#menu ul ul ul ul a:hover span {  background: rgba(0,0,0,0); opacity: 1; width: 100%; transition: all 2s ease-in-out; }

/*#menu > ul > li > ul > li > a {
   padding: 0 10px 0 12px;
   background-image: url(../img/arrow.png);
   background-repeat: no-repeat;
   background-position: left;
}

#menu > ul > li > ul> li:hover > a {
   padding: 0 10px 0 12px;
   background-image: url(../img/arrow_red.png);
   background-repeat: no-repeat;
   background-position: left;
}*/

.image-grid .grid_3 {
 width: 140px; 
}

#menu > ul > li ul li:hover > ul li:hover > ul {display: none;}
#menu > ul > li.left ul li:hover > ul li:hover > ul {display: none;}
#menu > ul > li.right-left ul li:hover > ul li:hover > ul {display: none;}

.tinynav { display: inline; }
.lowlevel { display: none; }

#menu ul ul ul a {border-bottom: none; height: 15px; line-height: 17px;}
#menu ul ul ul select {width: 96%; margin-left: 2%;}

}

/***** iPhone large *****/
@media only screen and (min-width: 480px) and (max-width: 767px) {
#menu > ul > li {width: 91px; margin: 0 0 0 0;}
#menu ul  ul  {/*position: relative;*/ width: 110px;}
#menu > ul > li.left:hover > ul {right:0;}

.image-grid .grid_3 {
 width: 218px; 
}
}