/* 
* Main theme CSS file
*
* License: http://www.opensource.org/licenses/mit-license.php
*/


/* Generic HTML element styling */

html {
  color: #000;
  background: #FFF;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset, img {
  border: 0;
}

address, caption, cite, code, dfn, em, th, var, optgroup {
  font-style: inherit;
  font-weight: inherit;
}

del, ins {
  text-decoration: none;
}

li {
  list-style: none;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

legend {
  color: #000;
}

input, button, textarea, select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
}

input, button, textarea, select * {
  font-size: 100%;
}

form {
  display: inline;
}

body {
  margin: 0;
  font-family: Helvetica;
  color: #000000;
  overflow-x: hidden;
  min-height: 300px;
}

h1 a, h2 a, h3 a, h4 a {
  color: inherit;
}

body, html {
  background-color: white;
}

body a {
  text-decoration: none;
}

textarea {
  width: 100%;
  height: 156px;
  border: 0;
  font-size: 14px;
}

hr {
  border-top-style: solid;
  border-left-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-color: #E0E0E0;
}


/* Generic classes used across iOS.MF */

.editor {
  border: none !important;
  -webkit-appearance: caret;
}

.field {
  border-bottom: 1px solid #E0E0E0;
}

.avatar {
  height: 62px;
  width: 62px;
  border-radius: 31px;
  background: url(../images/noavatar.png) #F5F5F5 center no-repeat;
  float: left;
  margin-top: 3px;
  background-size: 62px 62px !important;
}

.errors {
  font-size: 14px;
  padding: 0px 0px 6px 9px;
}

.errors a {
  color: #007AFF !important;
}

.middle-text {
  padding-top: 2px;
  padding-bottom: 2px;
}

.pad-top {
  padding-top: 9px !important;
  padding-bottom: 0px !important;
}

.small-pad-top {
  padding-top: 1px;
}

.new {
  top: -1px;
  position: relative;
  margin-left: 5px;
  display: inline;
  color: #007AFF;
  width: 9px;
}

.description {
  color: #777;
}

.sticky {
  display: inline-block;
  background: #FFCD00;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  margin-bottom: 2px;
  margin-right: 4px;
}

.mieilink a:active, .message a:active, .button:active, .post-details a:active, .mieilink a:hover, .message a:hover, .button:hover, .post-details a:hover, #email a:active, #show-hide-search:active, #show-hide-login:active, #input-button:active {
  opacity: 0.3;
}

.message-time > a {
  font-style: italic !important;
  font-size: 11px !important;
  text-decoration: none !important;
  color: black !important;
}

.input_radio {
  float: left;
  margin-right: 6px;
  margin-top: 1px;
}

.input_check {
  float: left;
  margin-right: 6px;
  margin-top: 1px;
}

.verification-image {
  background-color: white;
}

#unread-link {
  font-size: 16px;
  margin-left: 9px;
  padding-top: 6px;
}

#unread-link > a {
  color: #007AFF;
  font-size: 16px;
}

.no-left-padding {
  padding-left: 0px !important;
}


/* Tap highlight */

a:link, #input-button, .button, .clicked, #search-form > input, .editor, .no-left-padding > input, div {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* jQuery Mobile overrides */

.ui-loader-default {
  width: 46px !important;
  height: 46px !important;
  margin-left: -23px !important;
  margin-top: -23px !important;
  background-color: white !important;
  border-radius: 23px;
  -webkit-border-radius: 23px !important;
  opacity: 0.9 !important;
  filter: Alpha(Opacity=90) !important;
}

.ui-loader-default > h1 {
  display: none;
}

.ui-loader > h1 {
  border-radius: 7px;
}

.ui-loader .ui-icon-loading {
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  background-size: 46px 46px !important;
  background: url(../images/ajax-loader.gif) no-repeat;
  border-radius: 23px !important;
  -webkit-border-radius: 23px !important;
  opacity: 0.30;
  filter: Alpha(Opacity=30) !important;
}


/* Main page wrapper */

#wrapper {
  min-height: 400px;
  padding-bottom: 0px !important;
}


/* Titles and headers */

h1, #page-title {
  margin: 0;
  padding: 12px;
  line-height: 20px;
  font-size: 16px;
  font-weight: 600;
  height: 19px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  color: black;
  background: #F0F0F4;
}

#the-title {
  height: 20px;
  margin-right: 24px;
  margin-left: 24px;
  line-height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

h2, h3, .catbg {
  font-size: 16px;
  margin-top: 6px;
}

h3, .catbg {
  margin-left: 16px;
}

h2 {
  margin-left: 9px;
}

h3, h4, .catbg {
  margin-right: 24px;
  font-size: 16px;
}

h4 {
  font-size: 14px;
  font-weight: normal;
}

.title {
  text-overflow: ellipsis;
  max-width: 301px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 16px !important;
  display: inline-block;
}

.title a {
  color: inherit;
}

.short-title {
  max-width: 272px;
}

.sticky-short-title {
  max-width: 262px;
}

.the-title a {
  color: #000000;
}

.quick-reply-title {
  color: #007AFF;
}


/* Our generic list of content: boards, topics, messages, unread posts, recent posts, personal messages etc. */

.content-list {
  margin-left: 9px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 6px;
}

.content-list > li {
  display: table;
  padding: 6px 0px 6px 0px;
  text-decoration: none;
  color: inherit;
  vertical-align: middle;
  width: 100%;
  border-bottom: 1px solid #E0E0E0;
  font-size: 16px;
  box-sizing: border-box;
}

.content-list > li:first-child {
  border-top: 1px solid #E0E0E0;
}

.first-content > li:first-child {
  border-top: 0px !important;
}

.content-list > li > div {
  font-size: 13px;
}

.content-list > li embed {
  max-width: 289px;
  max-height: 163px;
}

.clicked {
  padding-left: 9px !important;
  margin-left: -9px !important;
  width: calc(100% + 9px) !important;
  outline: 1px solid #E0E0E0;
  background: #E0E0E0;
}

.editor[disabled] {
  color: black;
  -webkit-text-fill-color: black;
  -webkit-opacity: 1;
  background-color: white;
}

.new-post {
  padding: 6px;
  padding-top: 7px;
  padding-bottom: 3px;
  border-radius: 5px;
  background: white;
  border: 1px solid #E0E0E0;
}

.child-board {
  background: #3D991F !important;
}


/* Buttons */

button, .input-button {
  height: 31px;
  font-size: 16px;
}

.buttons {
  text-align: center;
}

#classic {
  position: relative;
  top: 0px;
  left: auto;
  right: auto;
  font-size: 7px;
  height: 12px;
  margin: 0 auto;
  display: block;
  width: 60px;
  line-height: 12px;
  text-align: center;
}

.button {
  text-align: center;
  color: #007AFF;
  text-decoration: none;
  border: 0;
  background: transparent;
}

.two-buttons {
  width: 48%;
  margin-left: 1.1%;
}

.slim-button {
  height: 16px;
  font-size: 12px;
}

#input-button {
  color: #007AFF;
}

#input-button-background {
  background-color: #F0F0F4;
  position: absolute;
  top: 1px;
  left: 0px;
  height: 22px;
  padding-right: 5px;
}

.edit-delete {
  margin-top: 2px;
  width: 46%;
  margin-left: 2.4%;
}

.page button {
  width: 32.4%;
  font-size: 11px;
  height: 25px;
}

.child button {
  width: 80px;
}

button[disabled] {
  color: #aaa;
}

.no-left-padding {
  padding-left: 0px !important;
}


/* Inputs */

.input-container input[type="text"], .input-container input[type="password"], .input-container select {
  height: 20px;
  font-size: 14px;
  border: 1px solid #E0E0E0;
  padding: 6px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 5px;
  background: white;
  width: calc(100% - 107px);
  -webkit-appearance: caret;
}

.input-container select {
  height: 34px;
  width: calc(100% - 90px);
}

.input-container img {
  vertical-align: middle;
  margin-left: -4px;
  width: 221px;
  height: 34px;
  border-radius: 5px;
}

.input-container .input-label {
  height: 31px;
  font-size: 16px;
  width: 80px;
  display: inline-block;
  text-align: center;
  margin-left: 4px;
  margin-right: 5px;
}

.input-container input[type="submit"] {
  width: 80px;
}

.input-container {
  padding: 9px;
  padding-top: 0px;
  background: #F0F0F4;
}

input#input-file {
  font-size: 12px;
  width: 170px;
}

.to-user-list {
  padding-left: 90px;
}

.to-user-list > span {
  font-size: 12px;
  background-size: 12px 12px !important;
  background: url(../images/icons/field_invalid.png) no-repeat right;
  padding-right: 16px;
  margin-right: 6px;
  display: inline-block;
}


/* Quick search and quick login */

#show-hide-search, #show-hide-login {
  position: absolute;
  top: 10px;
  height: 24px;
  width: 24px;
  background-size: 24px 24px !important;
}

#show-hide-search {
  right: 8px;
}

#show-hide-login {
  left: 8px;
}

.magnifier-icon {
  background: url(../images/icons/magnifier.png) no-repeat;
}

.login-icon {
  background: url(../images/icons/login.png) no-repeat;
}

.logout-icon {
  background: url(../images/icons/logout.png) no-repeat;
}

.close-icon {
  background: url(../images/icons/close.png) no-repeat;
}

#quick-reply, .quick-login {
  display: none;
  background: #F0F0F4;
}


/* Search */

#search-bar {
  display: none;
  padding-right: 0px;
  padding-bottom: 11px;
  border-top: 0px;
}


/* Toolbars */

.toolbar, .fixed-top-bar {
  position: fixed;
  z-index: 100;
  left: 0;
  width: 100%;
  background: #F0F0F4;
  border-width: 0 !important;
}

.toolbar {
  height: 43px;
  text-align: justify;
  bottom: 0;
}

.fixed-top-bar {
  top: 0;
}

.toolbar {
  width: 100%;
}

.toolbar > div {
  display: inline-block;
}

.toolbar > div > .toolbar-icon {
  float: right;
  width: 55px;
  height: 43px;
  background-size: 24px 24px !important;
}

.toolbar:after {
  content: '';
  width: 100%;
  display: inline-block;
}

.unread-count {
  background-color: red;
  border-radius: 7px;
  height: 14px;
  color: white;
  text-align: center;
  font-size: 9px;
  line-height: 14px;
  margin-right: -46px;
  margin-top: 4px;
  width: initial;
  padding: 0px 4px 0px 4px;
  min-width: 6px;
  float: right;
}

.unread-messages {
  margin-right: -47px !important;
}


/* Paging and copyright */

#page-count {
  border: 0;
  background: none;
  font-size: 11px;
}

#previous-page, #next-page, #page-buttons, #page-count {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#copyright {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 320px;
  display: block;
  text-align: center;
  margin-top: 1px;
  margin-bottom: 47px;
}

#copyright h4 {
  margin-left: 26px;
  font-size: 5px;
}


/* Posts and messages */

.message {
  margin: 0;
  min-height: 83px;
  padding: 4px;
  padding-left: 0px;
  word-break: break-word;
}

.message a {
  text-decoration: underline;
  font-size: 14px;
  color: #007AFF;
}

#post-container {
  margin-top: 0px !important;
  border-top: 0px !important;
}

.message img {
  max-width: 76%;
  max-height: 600px;
}

.quoteheader a {
  font-weight: normal;
  font-size: 10px;
  color: #444;
  margin-top: 0;
}

.mieilink a {
  font-weight: normal;
  font-size: 14px;
  color: #007AFF !important;
  position: relative;
  top: -1px;
}

.message blockquote {
  border: 1px solid #444;
  font-style: italic;
  color: #444;
  background: #fafafa;
  display: table;
  margin: 1px 0 3px 0;
  padding: 4px;
  padding-top: 1px;
  padding-bottom: 1px;
  border-radius: 3px;
}

.attachment-wrapper {
  padding: 0px 9px 9px 9px;
  background: #F0F0F4;
}

.attachment {
  margin-bottom: 3px;
}

.bbc_list {
  padding-left: 8px;
  display: table;
  list-style-position: inside;
}

.bbc_list > li {
  list-style: inherit;
}

.smiley {
  width: 14px;
  height: 14px;
  position: relative;
  vertical-align: middle;
  margin-top: -4px;
}

.market-all-read {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  width: 140px;
  margin-left: auto;
  margin-right: auto;
}


/* Polls */

#poll {
  overflow: hidden;
  font-size: 14px;
  display: block;
  margin-left: 9px;
  margin-bottom: 6px;
  border-top: 1px solid #E0E0E0;
}

#poll .icon {
  vertical-align: bottom;
  padding-bottom: 1px;
}

#poll-question {
  padding-bottom: 3px;
  padding-top: 3px;
}

.poll-message {
  padding-bottom: 3px;
}

#poll-options div.submit-button {
  clear: both;
  margin-top: 6px;
  margin-bottom: 4px;
}

#poll-options div.options .voted {
  font-weight: bold;
}

#poll-options div.options label {
  margin: 0 !important;
}

div#poll-moderation {
  margin: 0;
  padding: 0;
  overflow: auto;
}

.catbg {
  margin-left: 0;
}


/* Profile */

.profile {
  margin: 9px;
  margin-top: 4px;
  margin-right: 0px;
}

.field {
  padding: 6px;
}

#recent .post-details a {
  text-decoration: underline;
  font-size: 14px;
  color: #007AFF;
}

.post-details {
  padding-bottom: 4px;
  font-style: italic;
}

#email a {
  text-decoration: underline !important;
  color: #007AFF !important;
}

.profile a {
  text-decoration: none;
  color: black;
}

.poster-info {
  width: 70px;
  float: left;
  margin-left: 0px;
  margin-top: 4px;
  margin-bottom: 5px;
}

.poster-info img {
  margin-top: 2px;
  width: 60px;
}

.profile .field {
  padding-top: 9px;
  padding-bottom: 9px;
}

.profile .field-name {
  color: #777;
  font-size: 13px;
  text-transform: lowercase;
  text-align: right;
  float: left;
  position: relative;
  min-width: 75px;
}

.profile .field-info {
  font-size: 14px;
  color: #000;
  margin-top: -1px;
  margin-left: 0px;
  position: relative;
  padding-left: 84px;
}

#profile-header {
  margin: 9px 9px 0 9px;
  min-height: 70px;
}

#profile-header h4, #profile-header h3 {
  margin-left: 9px;
}

#profile-header #username {
  float: left;
}


/* Registration */

.agreement {
  padding: 6px 4px 0px 9px;
  font-size: 11px;
  text-align: justify;
}

.header {
  font-size: 14px;
  padding: 6px 0px 6px 9px;
}


/* Captcha verification */

#smf_autov_username_img {
  height: 14px;
  width: 14px;
  margin-top: -3px;
}

#smf_autov_username_div {
  margin-left: -23px;
}


/* Readme: iOS.MF details */

.readme {
  font-size: 11px;
  text-align: justify;
  list-style: disc outside none; 
  padding-left: 28px;
}

.readme > li {
  padding: 6px 4px 0px 0px;
}

.readme > li:before {
   content: "-";
   left: 15px;
   position: absolute;
}