/**
 * ------------------------------------------------------------------------
 * JA Wall Template for J25 & J3x
 * ------------------------------------------------------------------------
 * Copyright (C) 2004-2018 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
 * @license - Copyrighted Commercial Software
 * Author: J.O.O.M Solutions Co., Ltd
 * Websites:  http://www.joomlart.com -  http://www.joomlancers.com
 * This file may not be redistributed in whole or significant part.
 * ------------------------------------------------------------------------
 */

body {
  background: #e5e5e5;
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 12px; /* basesize */
  line-height: 1.5;
}

/* Percentage Font-size reference:
- 84%   ~ 10px
- 92%   ~ 11px
- 100%  ~ 12px (basesize)
- 110%  ~ 13px
- 115%  ~ 14px
- 125%  ~ 15px
- 150%  ~ 18px
- 185%  ~ 22px
- 200%  ~ 24px
- 250%  ~ 30px
*/


/* Links ---*/
a {
  color: #09c;
  text-decoration: none;
  transition: background 0s ease 0s, color 0.2s linear 0s;
  -o-transition: background 0s ease 0s, color 0.2s linear 0s;
  -moz-transition: background 0s ease 0s, color 0.2s linear 0s;
  -webkit-transition: background 0s ease 0s, color 0.2s linear 0s;
}

a:hover, a:active, a:focus {
  color: #333;
  text-decoration: none;
}

/* Headings & Titles ---*/
h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: bold;
  line-height: 1.2;
  text-rendering: optimizelegibility;
}

h1 {
  font-size: 185%;
}

h2 {
  font-size: 150%;
}

h3 {
  font-size: 125%;
}

h4 {
  font-size: 100%;
  text-transform: UPPERCASE;
}

h5 {
  font-size: 100%;
}

/* Small text ---*/
small, .small {
  font-size: 92%;
}

/* List ---*/
ul {
  list-style: none;
}

ul li {
}

.container-main ul li {
  background: url(../images/bullet-1.png) no-repeat 0 7px;
  margin-top: 2px;
  padding-left: 10px;
}

.container-main ul li:first-child {
  margin-top: 0;
}

ol {
}

.container-main ol {
  margin-left: 10px;
}

ol li {
  list-style-position: inside;
}

.container-main ol li {
}

dt {
  font-weight: bold;
}

dd {
}

/* Image ---*/
img {
  max-width: 100%;
}

img[align=left] {
  margin: 0 20px 0 0;
}

img[align=right] {
  margin: 0 0 0 20px;
}

/* Others ---*/
hr {
  border-top: 1px solid #ccc;
}

/* Content spacing ---*/
.content-inner p, .content-inner pre, .content-inner blockquote,
.content-inner h1, .content-inner h2, .content-inner h3, .content-inner h4, .content-inner h5, .content-inner h6,
.content-inner ol, .content-inner ul, .content-inner dl {
  margin-top: 15px;
  margin-bottom: 15px;
}

/* TABLES
--------------------------------------------------------- */
table {
}

td {
  border-bottom: 1px solid #e5e5e5;
  font-size: 100%;
  padding: 5px 10px;
}

tr td {
}

th {
  background: #333;
  color: #fff;
  font-weight: bold;
  padding: 10px;
  text-align: left;
}

th td {
}

th a {
  color: #fff;
}

th a:hover,
th a:focus,
th a:active {
  color: #fff;
}

.cat-list-row1,
.cat-list-row2,
tr.cat-list-row1 td,
tr.cat-list-row2 td {
}

.cat-list-row1:hover,
.cat-list-row2:hover {
}

.cat-list-row2,
tr.cat-list-row2 td {
}

table.contentpane,
table.tablelist,
table.category,
table.admintable,
table.blog {
  width: 100%;
}

table.contentpaneopen {
  border: none;
}

/* FORM
--------------------------------------------------------- */
form {
}

label {
  cursor: pointer;
  margin-right: 10px;
}

input, select, button, textarea {
  font-family: inherit;
  font-size: 100%; /* Set the font size to match with the basesize */
  transition: all 0.2s ease 0s;
  -o-transition: all 0.2s ease 0s;
  -moz-transition: all 0.2s ease 0s;
  -webkit-transition: all 0.2s ease 0s;
}

textarea {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  box-sizing: border-box;
  color: #333;
  overflow: auto;
  padding: 10px 15px;
  vertical-align: top;
}

textarea:hover {
  border-color: #999;
}

textarea:focus {
  border-color: #666;
  box-shadow: inset 0 0 2px rgba(0,0,0,.4);
}

input[type=text],
input[type=password],
input[type=email],
input[type=url],
.inputbox {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  color: #333;
  line-height: normal;
  margin: 0;
  padding: 5px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

input[type=text]:hover,
input[type=password]:hover,
input[type=email]:hover,
input[type=url]:hover,
.inputbox:hover {
  border-color: #09c;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
.inputbox:focus {
  border-color: #666;
  box-shadow: inset 0 0 2px rgba(0,0,0,.4);
}

input[type=submit],
.button,
.btn,
button {
  background: url(../images/trans-grad-white-20.png) repeat-x center #09c;
  border: 1px solid #09c;
  border-radius: 3px;
  color: #FFF;
  font-weight: bold;
  line-height: normal;
  margin: 0;
  padding: 3px 5px;
  text-shadow: 0 -1px 0 rgba(0,0,0,.4);
   -webkit-border-radius: 3px;
 -webkit-appearance: none;
}

a.btn {
  padding: 5px;  
}

a.btn:hover,
a.btn:active,
a.btn:focus {
  color: #fff;
}

input[type=submit]:hover,
.button:hover,
.btn:hover,
button:hover {
  background-color: #333;
  border: 1px solid #333;
}

input[type=submit]:focus,
.button:focus,
button:focus {
  background-color: #333;
  border: 1px solid #333;
  box-shadow: inset 1px 1px 1px rgba(0,0,0,.7);
}

button:hover,
button:focus,
input[type=submit]:hover,
input[type=submit]:focus,
.button:hover,
.button:focus,
.btn:hover,
.btn:focus {
  cursor: pointer;
}

.checkbox,
input[type=checkbox] {
  border: 0;
}

.radio,
input[type=radio] {
  border: 0;
}

input[type=checkbox],
input[type=radio] {
  margin: 0;
  padding: 0;
  vertical-align: middle;
  width: auto !important;
}

fieldset {
  border: none;
}

legend {
  font-size: 125%;
  font-weight: bold;
  line-height: 1.2;
}

fieldset dt {
  clear: left;
  float: left;
  padding: 3px 0;
  line-height: 25px;
}

fieldset dd {
  min-height: 25px;
  padding: 3px 0;
  line-height: 25px;
}

.star {
  color: #c00;
}

.invalid {
  border-color: #c00;
}

label.invalid {
  color: #c00;
}

/* GENERIC STYLE
--------------------------------------------------------- */
/* Clearfix */
.clearfix:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
}

* html .clearfix {
  height: 1%;
}

:first-child + html .clearfix {
  min-height: 1%;
}

/* Alignment */
.left {
  float: left;
}

.right {
  float: right;
}