/* 
    Author     : Alexander Schwichtenberg
*/

a {
    border:0;
    outline: 0;
}

h1.rateComaparison {
    font-family: Verdana, Arial, sans_serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

ul#topNavi {
    list-style: none;
    border: 1px solid #444;
    margin: 0;
    padding: 0;
    background-color: #eee;
    height:37px;
    width:100%;
}

ul#topNavi li {
    float: left;
}

ul#topNavi li a {
    display: block;
    padding: 10px 25px;
    color: #444;
    background-color: #eee;
    border-right: 1px solid #444;
    text-decoration: none;
}

ul#topNavi li a:hover {
    color: #fff;
    background-color: #444;
}

ul#topNavi li.on a {
    display: block;
    padding: 10px 25px;
    color: #fff;
    background-color: #444;
    text-decoration: none;
}

div.myClearfix {
    content: '';
    clear:both;
}

table {
    border-collapse:separate;
    border-spacing:0;
    margin-bottom: 1.4em;
    width: 100%;
}

table, th, td {
vertical-align: middle;
}

th, td, caption {
    padding: 0;
}

th {
    font-weight: bold;
}

table.overview {
    border: 0px solid #999;
    border-bottom: 0;
    background-color: #e5ecf9;
}

table.overview th {
    background-color: #258FCC;
    background:-moz-linear-gradient(top, #258FCC, #0A628E); /* Firefox */
    background:-webkit-gradient(linear, left top, left bottom, from(#258FCC), to(#0A628E)); /* Safari, Chrome */
    background:-webkit-linear-gradient(top, #258FCC, #0A628E); /* Safari, Chrome - neue Syntax! */
    background:-o-linear-gradient(top, #258FCC, #0A628E); /* Opera */
    background:-ms-linear-gradient(top, #258FCC, #0A628E); /* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#258FCC', EndColorStr='#0A628E') 0 0 no-repeat;
    background:linear-gradient(top, #258FCC, #0A628E); /* W3C Standard */
    text-align: center;
    color: #fff;
    border-right:1px solid #055177;
    height: 30px;
    padding: 0 5px;
}

table.overview th:last-child {
    border-right: 0;
}

table.overview th.arrowPlugin {
    height:15px;
    background: transparent;
    filter:'';
    background-image: url("images/pointer_infobox_blue.png");
    background-position: 12px 0;
    background-repeat: no-repeat;
    text-align: center;
    color: #fff;
    border-right: 1px solid #999;
}

table.overview th.arrowPlugin:last-child {
    border-right:0;
}

table.overview th.arrow-yellow {
    height:15px;
    background-color: #ffff99;
    background: #ffff99;
    filter:'';
    background-image: url("images/pointer_infobox_blue.png");
    background-position: 12px 0;
    background-repeat: no-repeat;
    text-align: center;
    color: #fff;
    border-right: 1px solid #999;
}

table.overview td {
    background-color: #fff;
    border-right: 1px solid #999;
    padding: 5px;
}

table.overview td:last-child {
    border:0;
    border-bottom: 1px solid #999;
}

table.overview tr:last-child {
    border:1px solid #999;
}

tr.even td {
background-color: #e5ecf9;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
border-top:0;
border-bottom:1px solid #999;
}

table.overview tr td {
border-top:0;
border-bottom:1px solid #999;
}

table.overview td.yellow {
    background-color: #ffff99;
    padding: 5px;
    border-right: 1px solid #999;
    font-weight: bold;
}

table.overview td.yellow-centerPlugin {
    background-color: #ffff99;
    padding: 5px;
    border-right: 1px solid #999;
    font-weight: bold;
    text-align: center;
    font-size: 24px;
}

table.overview ul {
    margin: 0 0 0 15px;
    padding: 0;
}

div.tarife {
    padding-bottom: 5px;
}


div.tarifsurf {
    width:520px;
    height: 250px;
    overflow-y: scroll;
    background-color: #eee;
    margin:5px 0 5px 0;
    padding-left: 10px;
}

div.surf {
    width:115px;
    height: 70px;
    float:left;
    text-align: center;
    border-bottom: 1px solid #999;
    margin:10px 10px 0 0;
}

div.wrap textarea {
}

label {
    display: inline-block;
    width:120px;
}

div.filter {
    float:left;
    padding-right: 7px;
}

div.filter label {
    display: inline;
    padding-right: 7px;
    font-weight: normal;
}

form.filter {
    width:94%;
    margin: 0 0 15px 0;
    padding: 0;
    position:relative;
}

form.filter fieldset {
    border:0;
    padding: 0;
    margin:0;
}

form.filter legend {
    background-color: #ED1700;
    border: 0px solid #777;
    border-bottom: 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    box-shadow: #333333;
    color:#fff;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 20px 5px 20px;
    display: block;
}

form.filter ul {
    margin-left: -18px;
}

form.filter ul li {
    float:left;
    list-style: none;
}

form.filter ul li a {
    background-color: #fff;
    border: 1px solid #ED1700;
    border-bottom: 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    box-shadow: #333333;
    color:#ED1700;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 20px 5px 20px;
    margin: 0 2px;
    display: block;
}

form.filter ul li a.active, form.filter ul li a:hover {
    background-color: #ED1700;
    border: 1px solid #ED1700;
    border-bottom: 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    box-shadow: #333333;
    color:#fff;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 20px 5px 20px;
    display: block;
}

form.filter div.innerForm2 {
    background-color: #ED1700;
    background:-moz-linear-gradient(top, #ED1700, #c00100); /* Firefox */
    background:-webkit-gradient(linear, left top, left bottom, from(#ED1700), to(#c00100)); /* Safari, Chrome */
    background:-webkit-linear-gradient(top, #ED1700, #c00100); /* Safari, Chrome - neue Syntax! */
    background:-o-linear-gradient(top, #ED1700, #c00100); /* Opera */
    background:-ms-linear-gradient(top, #ED1700, #c00100); /* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ED1700', EndColorStr='#c00100') 0 0 no-repeat;
    background:linear-gradient(top, #ED1700, #c00100); /* W3C Standard */
    border: 0px solid #777;
    -webkit-border-radius: 5px;
    -moz-border-radius-: 5px;
     border-radius: 5px;
     -webkit-border-top-left-radius: 0;
     -moz-border-top-left-radius: 0;
     border-top-left-radius: 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    box-shadow: #333333;
    color:#fff;
    font-weight: bold;
    text-decoration: none;
    padding: 20px 20px 2px 20px;
    display: block;
    width: 100%;
    height: 80px;
}

form.filter div.innerForm {
    background-color: #ED1700;
    background:-moz-linear-gradient(top, #ED1700, #c00100); /* Firefox */
    background:-webkit-gradient(linear, left top, left bottom, from(#ED1700), to(#c00100)); /* Safari, Chrome */
    background:-webkit-linear-gradient(top, #ED1700, #c00100); /* Safari, Chrome - neue Syntax! */
    background:-o-linear-gradient(top, #ED1700, #c00100); /* Opera */
    background:-ms-linear-gradient(top, #ED1700, #c00100); /* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ED1700', EndColorStr='#c00100') 0 0 no-repeat;
    background:linear-gradient(top, #ED1700, #c00100); /* W3C Standard */
    border: 0px solid #777;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
     border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    box-shadow: #333333;
    color:#fff;
    font-weight: bold;
    text-decoration: none;
    padding: 20px 20px 2px 20px;
    display: block;
    width: 100%;
    height: 80px;
}

table.overview li a, table.overview p a {
    text-decoration: underline;
}

table.overview a.small-button-red, table.overview a.small-button-red:focus, table.overview a.small-button-red:visited{
    background-color: #ED1700;
    background:-moz-linear-gradient(top, #ED1700, #c00100); /* Firefox */
    background:-webkit-gradient(linear, left top, left bottom, from(#ED1700), to(#c00100)); /* Safari, Chrome */
    background:-webkit-linear-gradient(top, #ED1700, #c00100); /* Safari, Chrome - neue Syntax! */
    background:-o-linear-gradient(top, #ED1700, #c00100); /* Opera */
    background:-ms-linear-gradient(top, #ED1700, #c00100); /* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ED1700', EndColorStr='#c00100') 0 0 no-repeat;
    background:linear-gradient(top, #ED1700, #c00100); /* W3C Standard */
    border: 1px solid #777;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    box-shadow: #333333;
    color:#fff;
    font-size: 12px;
    margin:2px;
    padding: 2px 15px;
    text-decoration: none;
    text-align: center;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
}

table.overview a.small-button-red:hover  {
    background-color: #ff4b44;
    background:-moz-linear-gradient(top, #ff4b44, #d11211); /* Firefox */
    background:-webkit-gradient(linear, left top, left bottom, from(#ff4b44), to(#d11211)); /* Safari, Chrome */
    background:-webkit-linear-gradient(top, #ff4b44, #d11211); /* Safari, Chrome - neue Syntax! */
    background:-o-linear-gradient(top, #ff4b44, #d11211); /* Opera */
    background:-ms-linear-gradient(top, #ff4b44, #d11211); /* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ff4b44', EndColorStr='#d11211') 0 0 no-repeat;
    background:linear-gradient(top, #ff4b44, #d11211); /* W3C Standard */
    border: 1px solid #777;
    cursor: pointer;
    color: #fff;
}

/* myTooltip */

.myTooltip {
  color: #000000; outline: none;
  cursor: help; text-decoration: none;
  position: relative;
  font-size:11px;
}

.myTooltip span {
  margin-left: -999em;
  position: absolute;
}

.myTooltip:hover span {
  position: absolute;
  left: 2em;
  top: -4em;
  z-index: +1;
  margin-left: 0;
  width: 450px;
  overflow: visible;
}

ul.hardwareDescription {
  text-align: left;
  margin: 20px 5px 5px 420px;
  line-height: 20px;
}

ul.hardwareDescription li {
  list-style-type: none;
  background: url(images/bullet.png) 3px 7px no-repeat;
  padding-left: 20px;
}

ul.hardwareDescription li.plus {
  list-style-type: none;
  background: url(images/cross-list.png) 0 4px no-repeat;
  padding-left: 20px;
}

ul.hardwareDescription li.minus {
  list-style-type: none;
  background: url(images/bad-list.png) 0 4px no-repeat;
  padding-left: 20px;
}

.myTooltip img {
  border: 0;
  margin: 0 5px 0 0;
  float: right;
}

.myTooltip:hover img {
  border: 0;
  margin: 0 5px 0 0;
  float: right;
}

.myTooltip:hover em {
  font-size: 12px;
  font-weight: bold;
  display: block;
  padding: 0.2em 0 0.6em 0;
  color: #000;
}

.classic {
    padding: 0.8em 1em;
    background: #ffffff;
    border: 1px solid #258FCC;
    color: #000;
    font-size: 11px;
    font-weight: normal;
    border-radius: 5px 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.2);
}

.text-center {
    text-align: center;
}

table.toolinfo tfoot td.text-right {
    text-align: right;
    font-weight: bold;
}

table.toolinfo {
    border-left:1px solid #999;
    border-right:1px solid #999;
    margin-top: 0px;
}

table.toolinfo tr td {
    background-color: #fff;
}

table.toolinfo tr.even td {
    background-color: #E5ECF9;
}

table.toolinfo tr.odd td {
    background-color: #FFFFFF;
}

.classic p {
    font-size:10px;
    line-height: 1.2;
    color:#777;
    text-decoration: none;
    text-align: left;
}

.myTooltip {
    width:400px;
    padding: 0.8em 1em;
    background: #ffffff;
    border: 1px solid #258FCC;
    color: #000;
    font-size: 11px;
    font-weight: normal;
    border-radius: 5px 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.2);
    display:none;
    position: absolute;
    top:-20px;
    left:70px;
}

span.tooly {
    position: relative;
}

span.tooly:hover .myTooltip {
    display: block;
    z-index: +100;
}

.myTooltip p {
    font-size:10px;
    line-height: 1.2;
    color:#777;
    text-decoration: none;
    text-align: left;
}


/* end myTooltip */

p.notExpired {
    background-color: #afa;
    margin: 0;
}

p.expired {
    background-color: #faa;
    margin: 0;
}

a.expire {
    color:#444;
    display: block;
    padding: 3px;
}

a.expire:hover {
    color:#fff;
    background-color: #1C73A0;
}