/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */
@import url(../warp/css/tools.css);

/* Useful Classes for Content Creation
----------------------------------------------------------------------------------------------------*/

.margin-t-5 {
    margin-top: 5px;
}

.margin-t-10 {
    margin-top: 10px;
}

.margin-b-5 {
    margin-bottom: 5px;
}

.margin-b-10 {
    margin-bottom: 10px;
}

.color1,
.color2 {
    text-shadow: 0 1px #fff;
}

/* Buttons (Needed for System Markup)
----------------------------------------------------------------------------------------------------*/

.button-default,
.button-primary,
.button-black {
    display: inline-block;
    border-radius: 4px;
    font-size: 13px;
}

form.style button,
form.style input[type="button"],
form.style input[type="submit"] {
    display: inline-block;
    border-radius: 4px;
    font-size: 12px;
}

a.button,
button.button,
form.style button,
form.style input[type="button"],
form.style input[type="submit"],
.button-default,
.mod-box .button-default {
    -moz-box-shadow: 0px 1px 1px 0px #000000;
    -webkit-box-shadow: 0px 1px 1px 0px #000000;
    box-shadow: 0px 1px 1px 0px #000000;

    background: #2c0422; /* Old browsers */
    background: -moz-linear-gradient(top, #92427e 0%, #2c0422 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #92427e), color-stop(100%, #2c0422)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #92427e 0%, #2c0422 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #92427e 0%, #2c0422 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #92427e 0%, #2c0422 100%); /* IE10+ */
    background: linear-gradient(to bottom, #92427e 0%, #2c0422 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00647d', endColorstr='#2c0422', GradientType=0); /* IE6-9 */

    border: none;
    color: #ffffff;
    font-family: arial;
    font-size: 12px;
    line-height: 14px;
    font-weight: bold;
    padding: 4px 8px !important;
    text-decoration: none;
    text-shadow: 1px 1px 0px #222222;
    text-align: center;
    border-radius: 4px;
}

a.button:hover,
button.button:hover,
form.style button:hover,
form.style input[type="button"]:hover,
form.style input[type="submit"]:hover,
.mod-box-color form.style button,
.mod-box-color form.style input[type="button"],
.mod-box-color form.style input[type="submit"],
.button-default:hover,
.button-primary,
.mod-box .button-primary {
    background: #00647d;
    color: #fff;
}

a.button:active,
button.button:active,
form.style button:active,
form.style input[type="button"]:active,
form.style input[type="submit"]:active,
.button-default:active {
    background: #246e99;
    color: #fff;
}

.mod-box-color form.style button:hover,
.mod-box-color form.style input[type="button"]:hover,
.mod-box-color form.style input[type="submit"]:hover,
.button-primary:hover {
    background: #00647d;
    color: #fff;
}

.mod-box-color form.style button:active,
.mod-box-color form.style input[type="button"]:active,
.mod-box-color form.style input[type="submit"]:active,
.button-primary:active {
    background: #00647d;
    color: #fff;
}

.mod-box-black form.style button,
.mod-box-black form.style input[type="button"],
.mod-box-black form.style input[type="submit"],
.button-black,
.mod-box .button-black {
    border: 1px solid #4B4D51;
    border-bottom-color: #3E4144;
    background: #5B5D63;
    background: -webkit-linear-gradient(top, #5B5D63, #52555A);
    background: -moz-linear-gradient(top, #5B5D63, #52555A);
    background: -o-linear-gradient(top, #5B5D63, #52555A);
    background: linear-gradient(to bottom, #5B5D63, #52555A);
    box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    color: #d1d1d1;
}

.mod-box-black form.style button:hover,
.mod-box-black form.style input[type="button"]:hover,
.mod-box-black form.style input[type="submit"]:hover,
.button-black:hover {
    border-color: #47494D;
    border-bottom-color: #3E4144;
    background: #4D5055;
    background: -webkit-linear-gradient(top, #4D5055, #45494E);
    background: -moz-linear-gradient(top, #4D5055, #45494E);
    background: -o-linear-gradient(top, #4D5055, #45494E);
    background: linear-gradient(to bottom, #4D5055, #45494E);
    box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    color: #d1d1d1;
}

.mod-box-black form.style button:active,
.mod-box-black form.style input[type="button"]:active,
.mod-box-black form.style input[type="submit"]:active,
.button-black:active {
    border-color: #3E4144;
    background: #45494E;
    background: -webkit-linear-gradient(top, #45494E, #4D5055);
    background: -moz-linear-gradient(top, #45494E, #4D5055);
    background: -o-linear-gradient(top, #45494E, #4D5055);
    background: linear-gradient(to bottom, #45494E, #4D5055);
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.2),
    inset 0px 1px 2px rgba(0, 0, 0, 0.1);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    color: #d1d1d1;
}

/* Images and Objects (Needed for System Markup)
----------------------------------------------------------------------------------------------------*/

img.border-box {
    border: 1px solid #ddd;
}

/* Lists and Tables (Needed for System Markup)
----------------------------------------------------------------------------------------------------*/

/* Line */

ul.line > li {
    border-top: 1px solid #d1d1d1;
    padding-left: 20px;
    background: url(../images/tools/list_line_icon.png) 0 0 no-repeat;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

ul.line > li:first-child {
    border-top: none;
    box-shadow: none;
}

.mod-box-black ul.line > li,
.mod-box-color ul.line > li {
    border-top-color: rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

ul.line > li:first-child {
    border-top: none;
    padding-top: 5px;
    box-shadow: none;
}

/* Check */
ul.check > li {
    padding: 5px 0 0 25px;
    background: url(../images/tools/list_check.png) 0 0 no-repeat;
}

/* Zebra List and Table */

table {
    border-collapse: separate;
}

table.zebra {
    border-right: 1px solid;
    border-color: rgba(0, 0, 0, 0.15);
}

ul.zebra > li,
table.zebra tbody td {
    border-bottom: 1px solid #d1d1d1;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}

.mod-box-black ul.zebra > li,
.mod-box-black table.zebra tbody td,
.mod-box-color ul.zebra > li,
.mod-box-color table.zebra tbody td {
    border-bottom: 1px solid;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}

ul.zebra > li:first-child,
table.zebra tbody tr:first-child td {
    border-top: 1px solid #d1d1d1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 0 rgba(255, 255, 255, 1);
}

.mod-box-black ul.zebra > li:first-child,
.mod-box-black table.zebra tbody tr:first-child td,
.mod-box-color ul.zebra > li:first-child,
.mod-box-color table.zebra tbody tr:first-child td {
    border-top: 1px solid;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.15);
}

ul.zebra > li.odd,
table.zebra tbody tr.odd {
    background: url(../images/bg_black_2.png);
}

ul.zebra > li:nth-of-type(odd),
table.zebra tbody tr:nth-of-type(odd) {
    background: rgba(0, 0, 0, 0.02);
}

table.zebra thead,
table.zebra tbody tr:hover,
table.zebra tbody tr.odd:hover,
.mod-box-black ul.zebra > li.odd,
.mod-box-black table.zebra tbody tr.odd,
.mod-box-color ul.zebra > li.odd,
.mod-box-color table.zebra tbody tr.odd,
table.zebra tfoot td,
.mod-box-black table.zebra tfoot td {
    background: url(../images/bg_black_5.png);
}

.mod-box-black ul.zebra > li:nth-of-type(odd),
.mod-box-black table.zebra tbody tr:nth-of-type(odd),
.mod-box-color ul.zebra > li:nth-of-type(odd),
.mod-box-color table.zebra tbody tr:nth-of-type(odd) {
    background: rgba(0, 0, 0, 0.05);
}

table.zebra caption {
    color: #999;
}

.mod-box-black table.zebra caption {
    color: #d1d1d1;
}

.mod-box-color table.zebra caption {
    color: #fff;
}

.mod-box-black table.zebra thead,
.mod-box-color table.zebra thead,
.mod-box-black table.zebra tbody tr:hover,
.mod-box-black table.zebra tbody tr.odd:hover,
.mod-box-color table.zebra tbody tr:hover,
.mod-box-color table.zebra tbody tr.odd:hover {
    background: url(../images/bg_black_10.png);
}

table.zebra tbody tr:nth-of-type(odd):hover {
    background: rgba(0, 0, 0, 0.05);
}

.mod-box-black table.zebra tbody tr:nth-of-type(odd):hover,
.mod-box-color table.zebra tbody tr:nth-of-type(odd):hover {
    background: rgba(0, 0, 0, 0.1);
}

table.zebra thead th {
    border-top: 1px solid;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.mod-box-black table.zebra thead th,
.mod-box-color table.zebra thead th {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

table.zebra tr td,
table.zebra tr th {
    border-left: 1px solid;
    border-color: rgba(0, 0, 0, 0.15);
    padding: 5px 10px;
}

table.zebra tfoot td {
    border-bottom: 1px solid;
    border-color: rgba(0, 0, 0, 0.15);
}

.mod-box-black table.zebra tfoot td,
.mod-box-color table.zebra tfoot td {
    background: url(../images/bg_black_15.png);
}

/* ZOO List */
ul.zoo-list > li,
.zoo-comments-list > article {
    border-top: 1px solid #d1d1d1;
    box-shadow: inset 0 1px 0 #fff;
}

ul.zoo-list > li:first-child,
.zoo-comments-list > article:first-child {
    box-shadow: none;
}

.mod-box-black ul.zoo-list > li,
.mod-box-black .zoo-comments-list > article,
.mod-box-color ul.zoo-list > li,
.mod-box-color .zoo-comments-list > article {
    border-top-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
}

.mod-box-black ul.zoo-list > li:first-child,
.mod-box-black .zoo-comments-list > article:first-child,
.mod-box-color ul.zoo-list > li:first-child,
.mod-box-color .zoo-comments-list > article:first-child {
    box-shadow: none;
}

.mod-box-color .zoo-comments-list .meta {
    color: #e1e1e1;
}

.mod-box-color .zoo-item-list p.meta {
    color: #e1e1e1;
}

/* Definition Lists
----------------------------------------------------------------------------------------------------*/

dl.separator dt {
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    text-transform: uppercase;
}

/* border code because of RTL */
dl.separator dd {
    padding-top: 5px;
    padding-bottom: 5px;
    border-width: 0 0 0 1px;
    border-style: solid;
    border-color: #DDD;
}

dl.separator dt:before {
    content: "";
    position: absolute;
    top: 0;
    right: -15px;
    width: 30px;
    border-top: 1px solid #DDD;
}

dl.separator dt:after {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 5px;
    height: 5px;
    background: #FFF;
    border: 1px solid #DDD;
    border-radius: 6px;
}

dl.separator dt:first-child:before,
dl.separator dt:first-child:after {
    display: none;
}

/* Text
----------------------------------------------------------------------------------------------------*/

/* Inline Text Box */
em.box {
    border-radius: 4px;
    border: 1px solid #E0E0E0;
    background: #f1f1f1;
    padding: 1px 3px;
}

/* Dotted Horizontal Rule */
hr.dotted {
    background: url(../images/tools/line_dotted.png) 0 0 repeat-x;
}

/* Boxes
----------------------------------------------------------------------------------------------------*/

.box-content,
.box-note,
.box-info,
.box-warning,
.box-hint,
.box-download {
    border-radius: 4px;
    background: #f1f1f1;
    border: 1px solid #ddd;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}

.box-info {
    background: #f1f1f1 url(../images/tools/box_info.png) 0 0 no-repeat;
}

.box-warning {
    background: #f1f1f1 url(../images/tools/box_warning.png) 0 0 no-repeat;
}

.box-hint {
    background: #f1f1f1 url(../images/tools/box_hint.png) 0 0 no-repeat;
}

.box-download {
    background: #f1f1f1 url(../images/tools/box_download.png) 0 0 no-repeat;
}

/* Forms (Needed for System Markup)
----------------------------------------------------------------------------------------------------*/

form.box fieldset {
    background: #f1f1f1;
    margin-bottom: 10px;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}

.mod-box-black form.box fieldset,
.mod-box-color form.box fieldset {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

form.box fieldset legend {
    color: #999;
    font-size: 12px;
}

form.style input[type="text"],
form.style input[type="password"],
form.style select,
form.style textarea {
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05),
    0 1px 0 #fff;
    color: #999;
    text-shadow: 0 1px 0 #ffffff;
}

.mod-box-color form.style input[type="text"],
.mod-box-color form.style input[type="password"],
.mod-box-color form.style select,
.mod-box-color form.style textarea {
    background: url(../images/bg_black_10.png);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.1);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    color: #fff;
}

.mod-box-black form.style input[type="text"],
.mod-box-black form.style input[type="password"],
.mod-box-black form.style select,
.mod-box-black form.style textarea {
    border-color: #3E4144;
    background: url(../images/bg_black_20.png);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.1);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    color: #999;
}

form.style input[type="text"]:focus,
form.style input[type="password"]:focus,
form.style select:focus,
form.style textarea:focus {
    outline: none;
    color: #444;
    background: #fff;
    text-shadow: none;
}

.mod-box-black form.style input[type="text"]:focus,
.mod-box-black form.style input[type="password"]:focus,
.mod-box-black form.style select:focus,
.mod-box-black form.style textarea:focus {
    border-color: rgba(0, 0, 0, 0.7);
}

form.style button:hover,
form.style input[type="button"]:hover,
form.style input.button:hover,
form.style #submit:hover {
    color: #fff;
}

/* Social Icons
----------------------------------------------------------------------------------------------------*/

.social-icons {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

.social-icons li {
    margin-left: 10px;
    line-height: 39px;
    float: left;
}

.social-icons li:first-child {
    margin-left: 0;
}

.social-icons li a {
    display: block;
    overflow: hidden;
    width: 30px;
    height: 31px;
    background-repeat: no-repeat;
    background-position: 0 0;
}

.social-icons .facebook a {
    background-position: 0 0;
}

.social-icons .facebook a:hover {
    background-position: 0 -50px;
}

.social-icons .facebook a:active {
    background-position: 0 -100px;
}

.social-icons .googleplus a {
    background-position: 0 -150px;
}

.social-icons .googleplus a:hover {
    background-position: 0 -200px;
}

.social-icons .googleplus a:active {
    background-position: 0 -250px;
}

.social-icons .twitter a {
    background-position: 0 -300px;
}

.social-icons .twitter a:hover {
    background-position: 0 -350px;
}

.social-icons .twitter a:active {
    background-position: 0 -400px;
}

.social-icons .rss a {
    background-position: 0 -450px;
}

.social-icons .rss a:hover {
    background-position: 0 -500px;
}

.social-icons .rss a:active {
    background-position: 0 -550px;
}

.social-icons .dribbble a {
    background-position: 0 -600px;
}

.social-icons .dribbble a:hover {
    background-position: 0 -650px;
}

.social-icons .dribbble a:active {
    background-position: 0 -700px;
}

/* Pricing Table
----------------------------------------------------------------------------------------------------*/

.pricing {
    border: 1px solid;
    border-color: rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background: #f7f7f7;
    background: -webkit-linear-gradient(top, #f7f7f7, #f4f4f4);
    background: -moz-linear-gradient(top, #f7f7f7, #f4f4f4);
    background: -o-linear-gradient(top, #f7f7f7, #f4f4f4);
    background: linear-gradient(to bottom, #f7f7f7, #f4f4f4);
    background-clip: padding-box;
    box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 1);
    text-shadow: 0 1px 0 #fff;
    text-align: center;
    overflow: hidden;
}

.pricing .grid-box > div {
    padding: 15px;
    border: 0 solid #d1d1d1;
    border-left-width: 1px;
    box-shadow: inset 1px 0 0 #fff;
}

.pricing .grid-box div > * {
    margin: 15px 0 0 0;
}

.pricing .grid-box:first-child > div {
    border: none;
    box-shadow: none;
}

.pricing .highlighted ul.zebra > li.odd {
    background: url(../images/bg_white_30.png);
}

.pricing .highlighted ul.zebra > li:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.3);
}

.pricing .highlighted {
    background-color: #eaeaea;
}

.pricing .highlighted > div {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 1px 0 0 rgba(255, 255, 255, 0.7);
}

.pricing .price {
    border: 1px solid #d1d1d1;
    border-radius: 5px;
    background: #f1f1f1;
    background: -webkit-linear-gradient(top, #f1f1f1, #e7e7e7);
    background: -moz-linear-gradient(top, #f1f1f1, #e7e7e7);
    background: -o-linear-gradient(top, #f1f1f1, #e7e7e7);
    background: linear-gradient(to bottom, #f1f1f1, #e7e7e7);
    font: bold 30px/54px Arial, Helvetica, sans-serif;
}

.pricing .highlighted .price {
    background: #f7f7f7;
    background: -webkit-linear-gradient(top, #f7f7f7, #f4f4f4);
    background: -moz-linear-gradient(top, #f7f7f7, #f4f4f4);
    background: -o-linear-gradient(top, #f7f7f7, #f4f4f4);
    background: linear-gradient(to bottom, #f7f7f7, #f4f4f4);
}