/* ::::: http://pxtoem.com/static/css/style.css ::::: */

* { box-sizing: border-box; padding: 0px; margin: 0px; }
html { overflow-y: scroll; }
body { font: 12px/16px "Helvetica Neue",Arial,sans-serif; background-color: rgb(51, 51, 51); color: rgb(255, 255, 255); }
h1, h2, h3, h4, h5 { font-family: Georgia,"Helvetica Neue",Arial,sans-serif; font-weight: bold; }
a { text-decoration: none; color: rgb(255, 153, 153); }
p { margin: 0px 0px 16px; }
dl { margin: 0px 0px 16px; }
dt { font-weight: bold; }
dd { margin-left: 16px; }
dd + dt { margin: 16px 0px 0px; }
ul { margin: 0px 16px 16px; }
input { font-size: 16px; padding: 8px; width: 60px; }
.container { width: 950px; margin: 0px auto; }
.header { height: 30px; margin-bottom: 32px; }
h1 { float: left; width: 500px; background-color: rgb(255, 255, 255); background-image: -moz-linear-gradient(center top , rgb(255, 255, 255) 0%, rgb(204, 204, 204) 100%); height: 50px; color: rgb(0, 0, 0); line-height: 48px; font-size: 16px; text-align: center; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); border-bottom: 2px solid rgb(44, 44, 44); }
h1 a { color: rgb(0, 0, 0); }
.subtitle { color: rgb(102, 102, 102); }
.menu { float: left; width: 450px; height: 50px; margin: 0px; padding: 0px; list-style: outside none none; }
.menu-item { float: left; width: 150px; padding-left: 10px; height: 50px; }
.menu-item-link { text-decoration: none; display: block; background-color: rgb(17, 17, 17); background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%); color: rgb(204, 204, 204); font: italic 16px/48px Georgia,"Helvetica Neue",Arial,sans-serif; text-align: center; border-bottom: 2px solid rgb(44, 44, 44); height: 50px; text-shadow: 0px 1px 2px rgb(0, 0, 0); }
.menu-item-link:hover { background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); }
.current .menu-item-link, .current .menu-item-link:hover { background-color: rgb(102, 34, 34); color: rgb(255, 255, 255); }
.pages { height: 550px; }
.page { height: 550px; }
.hide { display: none; }
.column { float: left; width: 310px; margin-right: 10px; }
.column:last-child { margin-right: 0px; }
.even { background-color: rgba(0, 0, 0, 0.05); }
h3 { font-size: 14px; font-style: italic; font-weight: normal; color: rgb(119, 119, 119); margin-bottom: 16px; text-shadow: 0px 1px 0px rgb(0, 0, 0); }
.conversion-column { height: 502px; background-color: rgb(255, 255, 255); background-image: -moz-linear-gradient(center top , rgb(255, 255, 255) 0%, rgb(238, 238, 238) 100%); color: rgb(34, 34, 34); border-bottom: 2px solid rgb(0, 0, 0); }
.conversion-table { width: 100%; border-collapse: collapse; border-spacing: 0px; border: medium none; }
.conversion-table td, .conversion-table th { width: 25%; padding: 4px 8px; }
.conversion-table td { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.conversion-table th { background-color: rgb(204, 204, 204); background-image: -moz-linear-gradient(center top , rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%); border-bottom: 1px solid rgb(153, 153, 153); border-left: 1px solid rgb(204, 204, 204); }
.base { background-color: rgba(0, 0, 0, 0.2); }
.base-table tbody tr:hover, .base-table .selected, .base-table .base.selected { cursor: pointer; background-color: rgb(0, 153, 204); color: rgb(255, 255, 255); text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.7); background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%); }
.conversion-column h4 { text-align: center; padding: 4px; background-color: rgb(204, 204, 204); background-image: -moz-linear-gradient(center top , rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%); border-bottom: 1px solid rgb(153, 153, 153); }
.conversion-column div + h4 { border-top: 1px solid rgb(221, 221, 221); }
.conversion-column h5 { padding: 4px; background-color: rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgb(204, 204, 204); margin-bottom: 16px; border-left: 1px solid rgb(204, 204, 204); }
.custom-base-size, .custom-px-to-em, .custom-em-to-px, .custom-result { padding: 16px; text-align: center; font-size: 16px; }
.custom-px-to-em, .custom-em-to-px { padding: 0px 0px 16px; position: absolute; top: 0px; left: 0px; width: 50%; line-height: 16px; border-left: 1px solid rgba(0, 0, 0, 0.1); }
.custom-em-to-px { left: 50%; }
.custom-wrap { width: 100%; position: relative; height: 143px; line-height: 120px; text-align: center; }
.or { padding: 4px; position: relative; z-index: 10; background-color: rgb(249, 249, 249); }
.convert-button { text-align: center; padding: 4px; cursor: pointer; background-color: rgb(153, 153, 153); border: 1px solid rgb(119, 119, 119); font-weight: bold; color: rgb(255, 255, 255); text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.7); background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%); display: block; position: absolute; top: 95px; left: 50%; margin-left: -50px; width: 100px; height: 32px; line-height: 22px; border-radius: 4px; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6); }
.convert-button:hover { background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%); }
.content { padding: 10px; width: 100%; height: 502px; background-color: rgb(255, 255, 255); background-image: -moz-linear-gradient(center top , rgb(255, 255, 255) 0%, rgb(238, 238, 238) 100%); color: rgb(34, 34, 34); border-bottom: 2px solid rgb(0, 0, 0); overflow-y: scroll; }
.content h4 { font-size: 16px; margin: 0px 0px 16px; }
.footer { margin: 32px 0px; text-align: center; }