joomla_test/templates/beez3/css/layout.css
2020-01-02 22:20:31 +07:00

1051 lines
17 KiB
CSS

/**
* @author ( Angie Radtke )
* @package Joomla
* @subpackage Accessible-Template-Beez
* @copyright Copyright (C) 2005 - 2009 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant to the
* GNU General Public License, and as distributed it includes or is derivative
* of works licensed under the GNU General Public License or other free or open
* source software licenses. See COPYRIGHT.php for copyright notices and
* details.
/* Typography =================================================== */
body {
font-family: arial,sans-serif
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
font-family: inherit;
font-weight: normal;
color: inherit;
text-rendering: optimizelegibility;
}
h1 {
margin-bottom: 0.75em;
font-size: 3.6em;
line-height: 1.2;
}
h2 {
margin-bottom: 0.75em;
font-size: 1.5em;
line-height: 1.2;
padding: 5px 0
}
h3 {
margin-bottom: 1em;
font-size: 1.4em;
line-height: 1.3;
padding-bottom: 5px
}
h4 {
margin-bottom: 1.5em;
font-size: 1.2em;
line-height: 1.25;
}
h5 {
font-size: 1.1em;
margin-bottom: 1.5em;
}
p,ol,ul,dl,address {
margin-bottom: 1.5em;
font-size: 1.0em;
line-height: 1.5em;
}
small {
font-size: 0.9em;
}
ul,ol {
margin: 0 0 1.5em 12px;
padding: 0 0 0 12px;
}
li ul,li ol {
margin: 0;
}
ul.categories-module
{ padding:0; margin:0}
blockquote {
margin: 0 0 1.5em -24px;
padding-left: 24px;
border-left: 2px solid #c7ced6;
font-style: normal;
}
q {
quotes: none;
}
cite {
font-style: normal;
}
abbr[title] {
border-bottom: 1px dotted #c7ced6;
cursor: help;
}
b,strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
ins {
text-decoration: none;
}
mark {
font-style: italic;
font-weight: bold;
}
pre,code,kbd,samp {
line-height: 1.5em;
}
pre {
white-space: pre-wrap;
}
sub,sup {
position: relative;
line-height: 0;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
table {
width: 100%;
max-width: 100%;
margin-bottom: 1.5em;
border-collapse: collapse;
border-spacing: 0;
background-color: transparent;
font-size: 1em
}
table th,table td {
padding: 8px;
vertical-align: top;
border-top: 1px solid #ddd;
line-height: 1.5em;
text-align: left;
}
table th {
font-weight: bold;
border: 0
}
table thead th {
vertical-align: bottom;
}
table tr:first-child th,table tr:first-child td,table thead:first-child tr:first-child th,table thead:first-child tr:first-child td
{
border-top: 0;
}
table tbody+tbody {
border-top: 2px solid #8c9bab;
}
table tbody tr td,table tbody tr th {
-webkit-transition: background-color 0.25s 0 linear;
-moz-transition: background-color 0.25s 0 linear;
-ms-transition: background-color 0.25s 0 linear;
-o-transition: background-color 0.25s 0 linear;
transition: background-color 0.25s 0 linear;
}
/* links */
p.readmore a, .mod-articles-category-readmore a {
border: 1px solid #CCCCCC;
border-radius: 3px;
display: inline-block;
text-decoration: none;
line-height: 1.6em;
margin-bottom: 9px;
padding: 4px;
line-height: 1.6em;
}
/* +++++++++++++++++ forms general ####################### */
form {
margin: 0 0 18px;
}
fieldset {
border: solid 1px #ddd;
margin: 10px 0;
padding: 20px;
border-radius: 5px
}
fieldset p {
margin: 0;
padding: 0;
}
legend {
font-weight: bold;
background: #fff;
padding: 5px 10px
}
label,input,button,select,textarea {
font-weight: normal;
}
label {
color: #333333;
display: block;
margin-bottom: 5px;
max-width: 90%
}
input,textarea,select,#advanced-search-toggle {
border: 1px solid #CCCCCC;
border-radius: 3px;
display: inline-block;
margin-bottom: 9px;
padding: 4px;
}
.filter-search-lbl {display:inline}
.filter-search, .display-limit {float:left; margin-right:10px}
.button,button,.profile-edit a {
border-radius: 3px;
padding: 4px;
line-height: 1.2em;
text-decoration: none;
}
label input,label textarea,label select {
display: block;
}
input[type="image"],input[type="checkbox"],input[type="radio"] {
border-radius: 0;
cursor: pointer;
height: auto;
line-height: normal;
margin: 3px 0;
padding: 0;
width: auto;
}
input[type="button"],input[type="reset"],input[type="submit"] {
height: auto;
width: auto;
}
select {
height: 28px;
line-height: 28px;
max-width:99%}
select {
width: 220px;
}
select[multiple],select[size] {
height: auto;
}
textarea {
height: auto;
}
.radio,.checkbox {
padding-left: 18px;
}
input[type="radio"],input[type="checkbox"] {
display: inline;
margin-right : 10px;
border:none
}
input,textarea {
-moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
input:focus,textarea:focus {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px
rgba(82, 168, 236, 0.6);
outline: 0 none;
}
input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus,select:focus
{
box-shadow: none;
outline-offset: -2px;
}
/* +++++++++++++++++++++++ header searchbox +++++++++++++++++++++ */
#header form {
overflow: hidden;
float: right
}
#header form .search {display:inline}
#header input {
font-weight: bold;
float: left;
}
#header .inputbox {
margin-right: 5px
}
/* ++++++++++++++++++++ search component +++++++++++++++++++++++ */
fieldset.word {
border: 0;
background: #fff;
padding: 0
}
fieldset.phrases label,fieldset.only label {
display: inline;
margin: 0 10px
}
:root *> fieldset.only label:before {
background: #a7c7dc;
background: -moz-linear-gradient(-45deg, #fefefe, #ddd);
background: -webkit-linear-gradient(-45deg, #fefefe, #ddd);
background: -o-linear-gradient(-45deg, #fefefe, #ddd);
background: -ms-linear-gradient(-45deg, #fefefe, #ddd);
background: linear-gradient(-45deg, #fefefe, #ddd);
border: 1px solid #aaa;
border-radius: 3px;
box-shadow: 0 0 1px 1px #CCCCCC;
height: 1em;
margin: 0 4px 0 0;
text-transform: uppercase;
width: 1em;
content: ".";
display: inline-block;
margin-left: -40px;
padding: 2px;
line-height: 1em;
text-indent: -50px;
}
input[type="checkbox"]:checked+label:before {
content: "\2714";
text-indent: 0;
background: -moz-linear-gradient(-45deg, #fefefe, #0b70cd);
background: -webkit-linear-gradient(-45deg, #fefefe, #0b70cd);
background: -o-linear-gradient(-45deg, #fefefe, #0b70cd);
background: -ms-linear-gradient(-45deg, #fefefe, #0b70cd);
background: linear-gradient(-45deg, #fefefe, #0b70cd);
border: 1px solid #0B70CD;
}
:root *> .phrases-box label:before {
background: #a7c7dc;
background: -moz-linear-gradient(-45deg, #fefefe, #ccc);
background: -webkit-linear-gradient(-45deg, #fefefe, #0b70cd);
background: -o-linear-gradient(-45deg, #fefefe, #0b70cd);
background: -ms-linear-gradient(-45deg, #fefefe, #0b70cd);
background: linear-gradient(-45deg, #fefefe, #0b70cd);
border: 1px solid #aaa;
line-height: 1.3em;
margin: 0 4px 0 0;
text-transform: uppercase;
width: 1.3em;
content: ".";
display: inline-block;
margin-left: -40px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
text-indent: -40px;
color: #fff;
text-shadow: 0px 10px 6px #fff;
}
/*
input[type="radio"]:checked + label:before {
content: "\2022";
text-indent: 6px;
background: -moz-linear-gradient(-45deg, #fefefe, #0b70cd);
background: -webkit-linear-gradient(-45deg, #fefefe, #0b70cd);
background: -o-linear-gradient(-45deg, #fefefe, #0b70cd);
background: -ms-linear-gradient(-45deg, #fefefe, #0b70cd);
background: linear-gradient(-45deg, #fefefe, #0b70cd);
color: #000;
zoom:1;
border: 1px solid #aaa;
}*/
.ordering-box {
margin: 10px 0;
}
.search-results dt.result-title {
padding: 15px 15px 0px 5px;
font-weight: bold;
}
.search-results dd {
padding: 2px 15px 2px 5px
}
.search-results dd.result-text {
padding: 10px 15px 10px 5px;
line-height: 1.7em
}
.search-results dd.result-url {
font-size: 90%;
padding: 2px 15px 15px 5px;
}
.search-results dd.result-created {
padding: 2px 15px 15px 5px
}
.search-results dd.result-category {
padding: 10px 15px 5px 5px
}
.advanced-search-tip {
background: #FEFDE2;
border-radius: 3px;
padding: 20px;
border: solid 1px #ddd
}
.advanced-search-tip p {
margin: 0
}
.advanced-search-tip .term {
font-weight: bold;
font-style: italic
}
.panel {
border: solid 1px #ddd;
margin-top: -1px;
}
#main .panel h3 {
margin: 0px;
padding: 0;
background: #eee;
border: 0;
font-size: 1.0em
}
.panel h3 a {
display: block;
padding: 6px;
text-decoration: none;
padding: 6px;
}
.pane-slider {
border: solid 0px;
padding: 10px;
margin: 0;
}
/* +++++++++++++++++++ Contact Form +++++++++++++++++++++++++++++++++ */
.panel .contact-form,.panel .contact-miscinfo {
padding: 10px
}
.contact .panel .contact-form form,.contact .panel .contact-address {
margin: 20px 0 0 0
}
textarea,.contact-form input[type="text"],.contact-form input[type="email"],.contact-form textarea
{
width: 80%;
border: solid 1px;
-moz-box-sizing: border-box;
border: 1px solid #DDDDDD;
color: #333333;
overflow: auto;
padding: 5px;
vertical-align: top;
}
#jform_contact_email_copy-lbl,#jform_contact_email_copy {
float: left;
margin-right: 10px;
border: 0
}
.contact-form .button {
clear: left;
float: left;
margin: 20px 0
}
fieldset.filters {
background: none;
border: none;
padding: 0
}
.contact-form,.contact-links,.contact-misc,.contact-image,.contact-contactinfo,.contact-address
{
margin: 20px 0
}
/* ++++++++++++++ loginmodule +++++++++++++++++++++++++++ */
#form-login-remember {
overflow: hidden;
margin-bottom: 10px
}
#form-login-remember label {
display: inline;
margin-left: 10px
}
#modlgn-remember {
float: left
}
#login-form fieldset {
background: #f5f5f5
}
form ul {
list-style-type: none;
margin: 0;
padding: 0
}
/* +++++++++++++++++++++++ pagenav +++++++++++++++++++++++ */
.pagenav {
text-align: right
}
.pagenav ul {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
list-style-type: none;
margin-left: 0;
margin-bottom: 0;
}
.pagenav li {
display: inline;
margin: 0px;
padding: 0
}
.pagenav a,span.pagenav {
padding: 0 14px;
margin: 0;
line-height: 1.9em;
text-decoration: none;
border: 1px solid #ddd;
border-left: 0px solid #ddd;
display: inline-block;
line-height: 1.9em;
}
.pagenav li:first-child a,.pagination-start span {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
border-left: solid 1px #ddd
}
.pagenav li:last-child a,.pagination-end span {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.pagination ul {
margin: 10px 10px 10px 0;
padding: 0
}
.pagination li {
display: inline;
}
.pagination a {
padding: 0 14px;
line-height: 2em;
text-decoration: none;
border: 1px solid #ddd;
border-left: 0px solid #ddd;
display: inline-block
}
.pagination .active a {
cursor: default;
}
.pagination span,.pagination span a:hover {
cursor: default;
padding: 0 14px;
line-height: 2em;
}
.pagination li:first-child a {
border-left-width: 1px;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.pagination li:last-child a {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
/* +++++++++++++++++ Breadcrumbs +++++++++++++++++++++++++++ */
.breadcrumbs,.article-info {
padding: 7px;
margin: 0 0 18px;
list-style: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.breadcrumbs li {
display: inline-block;
}
/* +++++++++++++++++ articleinfo /actions +++++++++++++++++++++++++++ */
ul.actions {
list-style-type: none;
text-align: right
}
ul.actions a {padding:0}
ul.actions li {
display: inline
}
.article-info-term {
display: none
}
.article-info {
overflow: hidden;
font-size: 0.9em
}
.article-info dd {
float: left;
padding: 0 5px;
border-right: solid 1px #ccc
}
.article-info dd span {
text-transform: none;
display: inline-block;
padding: 0 5px 0 0px;
margin: 0 10px 0 0px;
}
.article-info dd.create {
clear: left
}
/* ###################### header ###################### */
#fontsize {
padding: 0;
margin: 0 20px 0 1px;
text-align: right;
margin-bottom: 0px;
float: none;
}
#fontsize h3 {
padding-right: 0;
font-weight: normal;
display: inline;
font-size: 1em;
margin: 0
}
#fontsize p {
margin: 0 0 0 2px;
padding: 0;
display: inline;
font-size: 1em;
}
#fontsize p a {
margin: 0 2px;
display: inline;
padding: 0px 5px;
}
/* +++++++++++++++ menus ++++++++++++++++++++++++ */
#header ul.menu {
padding: 0;
width: auto;
text-align: left;
display: block;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
margin: 0 10px
}
#header ul.menu li {
display: inline;
padding: 0;
margin: 0;
}
#header ul.menu li a:link,#header ul.menu li a:visited,#header ul.menu li:last-child a
{
font-weight: bold;
text-decoration: none;
padding: 0px 10px;
margin: 0;
display: inline-block;
margin: 0 0 0;
padding: 12px 15px;
position: relative;
border-right: 1px solid #ddd;
box-shadow: 1px 0px 0px #f5f5f5;
}
#header ul.menu li:first-child a {
border-radius: 4px 0 0 0;
margin-left: -1px
}
.moduletable_menu {
border: solid 1px #ddd;
background: #f9f9f9;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 20px;
margin-bottom: 20px
}
ul.menu {
margin: 0 0 20px 0;
padding: 0;
}
ul.menu,ul.menu ul {
list-style-type: none;
}
ul.menu a {
display: block;
margin: 0;
text-decoration: none;
padding: 5px 0px;
border-bottom: solid 1px #ddd;
}
ul.menu li:last-child a {
border: 0;
box-shadow: none
}
ul.menu ul {
margin: 0;
padding: 0
}
ul.menu ul a {
padding-left: 20px
}
ul.menu ul ul a {
padding-left: 30px
}
ul.menu ul ul ul a {
padding-left: 40px
}
ul.menu ul ul ul ul a {
padding-left: 45px
}
/* ++++++++++++++ content-module ++++++++++++++ */
.category-module {
margin: 0;
padding: 0
}
.category-module li {
padding: 5px 0 5px 0;
margin: 0;
list-style-type: none
}
.category-module li h4 {
margin-bottom: 0
}
.category-module span {
display: block;
font-size: 0.85em;
}
.category-module a span {
display: inline
}
/* content */
.categories-list .item-title a {
text-decoration: none;
margin-bottom: 20px
}
.category-desc {
margin: 20px 0
}
.category-desc img {
float: left;
margin: 0 20px 10px 0
}
.categories-list dt,.categories-list dd {
display: inline
}
/* ++++++++++++++++++++++ Footer +++++++++++++++++++++++++ */
#footer-outer
{font-size:0.8em}
.box {
text-align: left
}
.box ul {
list-style-type: none
}
#bottom .newsfeed-item {
padding: 0;
margin-bottom: 10px
}
.box .moduletable_menu,.box .moduletable {
margin: 10px
}
.box3 {
padding-left: 10px
}
.box h3 {
font-size: 1.3em
}
#footer {
font-size: 0.8em
}
/* #################### Sliding modules ################## */
.moduletable_js,.moduletable {
margin-bottom: 20px;
}
.js_heading,.js_heading {
position: relative;
display: block;
padding: 5px 10px;
margin: 0px;
font-size: 1.40em;
border-radius: 3px
}
h3.js_heading a {
display: block;
position: absolute;
right: 0px;
top: 0px;
padding: 5px 5px 0 0;
text-decoration: none;
background: none
}
.module_content {
padding: 10px;
border: solid 1px #ddd;
border-top: 0;
border-radius: 0 0 3px 3px;
margin-top: -1px
}
.no {
font-size: 1px;
}
.slide {
height: auto !important;
}
/* +++++++++++++++++++++++++++++ Module Tabs / Pagebreak Tabs / Contact Tabs ++++++++++++++++ */
ul.tabs {
margin: 0;
padding: 0;
overflow: hidden
}
dl.tabs dt,dl.tabs dd {
margin: 0;
padding: 7px 5px;
}
dl.tabs dt h3 {
font-size: 1em;
margin: 0;
padding: 0
}
dl.tabs dt {
position: relative;
z-index: 1
}
ul.tabs li,dl.tabs dt {
list-style-type: none;
float: left;
width: auto;
padding: 0;
display: block;
margin: 0 3px 0 0;
font-size: 1em;
}
ul.tabs li a:link,ul.tabs li a:visited,dl.tabs dt h3 a:link,dl.tabs dt h3 a:visited
{
text-decoration: none;
padding: 7px 5px;
margin: 0px;
display: block;
font-size: 0.9em;
font-weight: normal;
border-radius: 5px 5px 0px 0px;
}
ul.tabs li a.linkopen:link,ul.tabs li a.linkopen:visited,dl.tabs dt.open h3 a:link,dl.tabs dt.open h3 a:visited
{
font-weight: bold;
}
.tabcontent,div.current {
padding: 30px 20px;
margin: -1px 0 0 0;
border-radius: 0 3px 3px 3px;
clear: left;
}
div.current {
position: relative;
z-index: 0;
top: -1px
}
.tabcontent:focus {
outline: none
}
.tabopen {
display: block;
margin-bottom: 20px;
overflow: hidden
}
.tabclosed {
display: none
}
.tabcontent ul {
padding: 0
}
.tabcontent ul li {
list-style-type: none
}
/* ++++++++++++++ image float style ++++++++++++++ */
.img-fulltext-left {
float:left;
margin-right: 20px;
margin-bottom: 20px;
}
.img-intro-left {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.img-fulltext-right {
float: right;
margin-left: 20px;
margin-bottom: 20px;
}
.img-intro-right {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
.img-fulltext-none
{display:block;
margin:10px 0
}
/* Correction for user profile date of birth calendar image */
#jform_profile_dob_img {
background: url("../images/system/calendar.png") no-repeat scroll 0 0 transparent;
cursor: pointer;
height: 18px;
margin: 0 3px;
vertical-align: middle;
width: 18px;
}