/*
Theme Name: Debsirin Nonthaburi School
Description: A theme for Debsirin Nonthaburi School website.
Author: Tonsai Singhkangwan
Author URI: http://iton.in.th
Version: 2.0
License: GNU General Public License, version 2 (GPL-2.0)
License URI: http://opensource.org/licenses/GPL-2.0
*/
/*------------------------------------*\
MAIN
\*------------------------------------*/
/* global box-sizing */
*,
*:after,
*:before {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
body {
font-family: Tahoma;
font-size:13px;
color:#262626;
background-color: #FCFEF5;
}
/* clear */
.clear:before,
.clear:after {
content:' ';
display:table;
}
.clear:after {
clear:both;
}
.clear {
zoom:1;
}
img {
max-width:100%;
vertical-align:bottom;
}
a {
color:#345308;
text-decoration:none;
}
a:hover {
color:#444;
}
a:focus {
outline:0;
}
a:hover,
a:active {
outline:0;
}
input:focus {
outline:0;
border:1px solid #04A4CC;
}
li {
padding-top: 5px;
}
/*------------------------------------*\
STRUCTURE
\*------------------------------------*/
/* wrapper */
.wrapper {
width:1000px;
margin: auto;
}
/* container */
.container {
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
}
#main {
border-right: 1px solid #E0E0E0;
border-left: 1px solid #E0E0E0;
background: url('img/widget_bg.jpg');
}
/* header */
.header{
width: 100%;
height: 200px;
}
.header img {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/* logo */
.logo {
}
.logo-img {
}
/* content */
.content {
float: left;
width: 700px;
background-color: #fff;
padding: 20px;
margin-top: -10px;
border-right: 1px dashed #E0E0E0;
}
.content_full-width {
padding: 20px;
width: 100%;
background-color: #fff;
}
/* sidebar */
.sidebar {
float: left;
width: 298px;
padding-top: 10px;
margin-top: -10px;
}
/* footer */
.footer {
border: 1px solid #E0E0E0;
text-align: center;
padding: 10px;
clear: both;
background-color: #dfdfdf;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
/*------------------------------------*\
Home Page Components
\*------------------------------------*/
.homebox{
width: 100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px;
}
.ribbon {
height: 35px;
width: 400px;
padding-left: 10px;
margin-bottom: 20px;
position: relative;
left: -25px;
color: #fff;
border-top: 1px solid #72b314;
border-bottom: 1px solid #446616;
background: #579900;
background: linear-gradient(top, #383838 0%, #262626 100%);
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ribbon ::before{
content: '';
width: 0;
height: 0;
position: absolute;
bottom: -11px;
z-index: -10;
border: 5px solid;
border-color: #2c5a13 transparent transparent transparent;
}
.ribbon ::before {left: 0;}
.ribbon h2 {
text-shadow: 0 1px 1px #677f17;
font-family: 'ThaiSansLite';
line-height: 1em;
font-size: 24px;
padding-left: 5px;
font-weight: normal;
position: relative;
top: -18px;
}
.icon-ribbon {
position: relative;
top: 8px;
}
/* SLIDER */
#rotator {
padding: 0;
list-style-type: none;
margin: 0;
display: block;
width: 100%;
height: 300px;
margin-bottom: 10px;
}
/* ANNOUNCEMENT BOX */
#announcement {
display: block;
width: 100%;
}
#announcement ul { list-style-type: none; padding: 0; margin: 0; }
#announcement ul li{
border-bottom: 1px dashed #7AB317;
padding: 4px 0 4px 0;
width: 100%;
}
#announcement ul li:first-child {
border-top: 1px dashed #7AB317;
}
#announcement .homebox {
font-weight: bold;
line-height: 1.8em;
}
/*#announcement .homebox i {
position: relative;
top: 4px;
}*/
.announcement-date {
float: right;
text-align: right;
}
/* NEWS BOX */
.news-item {
padding-bottom: 20px;
border-bottom: 1px dotted #88C100;
margin-bottom: 10px;
}
.news-thumbnail {
float: left;
margin-right: 8px;
}
.news-title {
}
.news-title h2 {
font-family: 'ThSarabunNew';
font-weight: bold;
font-size: 16px;
margin-bottom: 0;
}
.news-meta {
font-size: 12px;
padding-left: 18px;
}
.news-excerpt {
margin-bottom: 5px;
}
.news-excerpt > p {
margin-top: 5px;
margin-bottom: 5px;
}
.news-readmore {
font-size: 12px;
}
.news-thumbnail img {
width : 100px;
height: 100px;
padding: 5px;
border: 1px solid #88C100;
}
/* GALLERY BOX */
#gallery-box > .gallery-item {
float: left;
margin-bottom: 0;
width: 154px;
border: 1px solid #88C100;
padding-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
text-align: center;
height: 200px;
}
#gallery-box > .gallery-item > .gallery-thumbnail {
}
#gallery-box > .gallery-item > .gallery-name {
vertical-align: middle;
height: 42px;
}
#gallery-box > .gallery-item > .gallery-name h2 {
font-family: 'ThaiSansLite';
font-weight: normal;
font-size: 18px;
margin-bottom: 5px;
margin-top: 5px;
padding: 0 10px 0 10px;
}
#gallery-box > .gallery-item > .gallery-date {
border-top: 1px dashed #88C100;
font-size: 12px;
padding-top: 5px;
padding-bottom: 5px;
}
/*------------------------------------*\
WIDGETS
\*------------------------------------*/
.widget-container {
padding: 10px;
line-height: 1.6em;
}
.widget-title {
width: 290px;
height: 30px;
margin-bottom: 10px;
padding: 5px 10px;
position: relative;
right: -4px;
color: #fff;
text-shadow: 0 1px 1px #deb02c;
border-top: 1px solid #FABE28;
border-bottom: 1px solid #D07C06;
background-color: #EBA800;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.widget-title:after {
content: '';
width: 0;
height: 0;
position: absolute;
top: 29px;
z-index: -10;
border: 5px solid;
border-color: #8b4113 transparent transparent transparent;
right: 0;
}
.widget-title h3 {
width: 280px;
font-family: 'ThaiSansLite';
font-size: 20px;
font-weight: normal;
position: relative;
top: -16px;
line-height: 1ex;
}
/*------------------------------------*\
NAV RIBBON
\*------------------------------------*/
.nav > ul {
height: 40px;
}
.nav > ul > li {
padding-top: 0px;
}
/* First Level Button */
.menu-item {
float: left;
height: 40px;
position: relative;
top: -21px;
left: -30px;
}
.menu-item a {
display: inline-block;
color: #fff;
font-family: 'ThaiSansLite';
font-weight: normal;
font-size: 22px;
height: 40px;
padding: 0 10px 0 10px;
margin-top: 7px;
line-height: 40px;
}
.menu-item a:hover {
color: #fff;
text-shadow: 0 1px 1px #deb02c;
background-color: #EBA800;
}
.menu-item:hover > ul li{
display: list-item;
}
/* Second Level Button */
.menu-item > ul li a {
display: block;
height: 40px;
width: 200px;
overflow: hidden;
background-color: #72b314;
margin: 0px;
font-size: 20px;
border-bottom: solid 1px #579900;
}
.menu-item > ul {
padding:0;
margin:0;
position:absolute;
clear: both;
width: 200px;
}
.menu-item > ul li{
display: none;
position: relative;
top: 0;
left: 0;
clear: both;
float: none;
z-index: 100;
}
nav {
height: 50px;
width: 1010px;
padding: 5px 10px;
position: relative;
left: -5px;
text-shadow: 0 1px 1px #677f17;
border-top: 1px solid #72b314;
border-bottom: 1px solid #446616;
background-color: #579900;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
nav:after, nav:before {
content: '';
width: 0;
height: 0;
position: absolute;
bottom: -11px;
z-index: -10;
border: 5px solid;
border-color: #2c5a13 transparent transparent transparent;
}
nav:before {left: 0;}
nav:after {right: 0;}
/*------------------------------------*\
SHOW PAGE
\*------------------------------------*/
#post_meta {
border-bottom: 1px dotted #E0E0E0;
padding-bottom: 10px;
}
#post_content {
padding: 10px 0 10px 0;
border-bottom: 1px dotted #E0E0E0;
margin-bottom: 10px;
line-height: 1.6em;
}
.ribbon-post {
height: 35px;
width: 400px;
padding-left: 10px;
margin-bottom: 20px;
position: relative;
left: -26px;
color: #fff;
border-top: 1px solid #72b314;
border-bottom: 1px solid #446616;
background: #579900;
background: linear-gradient(top, #383838 0%, #262626 100%);
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ribbon-post ::before{
content: '';
width: 0;
height: 0;
position: absolute;
bottom: -11px;
z-index: -10;
border: 5px solid;
border-color: #2c5a13 transparent transparent transparent;
}
.ribbon-post ::before {left: 0;}
.ribbon-post h2 {
text-shadow: 0 1px 1px #677f17;
font-family: 'ThaiSansLite';
line-height: 1em;
font-size: 24px;
padding-left: 5px;
font-weight: normal;
top: 0;
}
#post_content h1,h2,h3,h4,h5 {
font-family: 'ThaiSansLite';
font-weight: normal;
}
#post_content h1 {
font-size: 30px;
}
#post_content h2 {
font-size: 25px;
}
#post_content h3,h4,h5 {
font-size: 20px;
}
/*------------------------------------*\
POST LIST
\*------------------------------------*/
.post-list {
border: 1px solid #E0E0E0;
margin-bottom: 25px;
padding: 10px;
clear: both;
height: 122px;
}
article h1{
font-family: 'THSarabunNew';
font-weight: bold;
margin: 0 0 5px 0;
line-height: 1.5em;
}
article h2{
margin-top: 0;
margin-bottom: 3px;
}
.post-title h2{
font-size: 16px;
margin-bottom: 3px;
font-family: Tahoma;
}
.post-thumbnail {
width: 100px;
height: 100px;
float: left;
padding: 5px;
border: 1px solid #E0E0E0;
margin-right: 10px;
}
.post-edit-link {
clear: both;
}
.post-excerpt {
margin-bottom: 5px;
}
.post-excerpt > p {
margin-top: 5px;
margin-bottom: 5px;
}
/*------------------------------------*\
SEARCH FORM
\*------------------------------------*/
.search-input {
height: 25px;
width: 180px;
float: left;
margin-right: 10px;
border: 1px solid #E0E0E0;
padding-left: 10px;
}
.search-submit {
width: 70px;
height: 30px;
position: relative;
bottom: 1px;
border: 1px solid #E0E0E0;
background-color: #fff
}
/*------------------------------------*\
TYPOGRAPHY
\*------------------------------------*/
@font-face {
font-family: 'THSarabunNew';
src: url('font/thsarabunnew-webfont.eot');
src: url('font/thsarabunnew-webfont.eot?#iefix') format('embedded-opentype'),
url('font/thsarabunnew-webfont.woff') format('woff'),
url('font/thsarabunnew-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'THSarabunNew';
src: url('font/thsarabunnew_bolditalic-webfont.eot');
src: url('font/thsarabunnew_bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
url('font/thsarabunnew_bolditalic-webfont.woff') format('woff'),
url('font/thsarabunnew_bolditalic-webfont.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'THSarabunNew';
src: url('font/thsarabunnew_italic-webfont.eot');
src: url('font/thsarabunnew_italic-webfont.eot?#iefix') format('embedded-opentype'),
url('font/thsarabunnew_italic-webfont.woff') format('woff'),
url('font/thsarabunnew_italic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'THSarabunNew';
src: url('font/thsarabunnew_bold-webfont.eot');
src: url('font/thsarabunnew_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('font/thsarabunnew_bold-webfont.woff') format('woff'),
url('font/thsarabunnew_bold-webfont.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'ThaiSansLite';
src: url('font/thaisanslite_r1-webfont.eot');
src: url('font/thaisanslite_r1-webfont.eot?#iefix') format('embedded-opentype'),
url('font/thaisanslite_r1-webfont.woff') format('woff'),
url('font/thaisanslite_r1-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.thsarabunnew {
font-family: 'THSarabunNew';
}
.thaisanslite {
font-family: 'ThaiSansLite';
font-weight: normal;
}
.full-width_title {
font-size: 30px;
}
/*------------------------------------*\
RESPONSIVE
\*------------------------------------*/
@media only screen and (max-width:1010px) {
.container {
overflow: hidden;
margin: 0;
}
.header img {
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-resolution:144dpi) {
}
/*------------------------------------*\
MISC
\*------------------------------------*/
::selection {
background:#04A4CC;
color:#FFF;
text-shadow:none;
}
::-webkit-selection {
background:#04A4CC;
color:#FFF;
text-shadow:none;
}
::-moz-selection {
background:#04A4CC;
color:#FFF;
text-shadow:none;
}
.clearfloat {
clear: both;
background-color: #fff;
}
.label,
.badge {
display: inline-block;
padding: 2px 4px;
font-size: 11.844px;
font-weight: bold;
line-height: 14px;
color: #ffffff;
vertical-align: baseline;
white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #999999;
}
.label {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.badge {
padding-left: 9px;
padding-right: 9px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}
.label:empty,
.badge:empty {
display: none;
}
a.label:hover,
a.label:focus,
a.badge:hover,
a.badge:focus {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
.label-important,
.badge-important {
background-color: #b94a48;
}
.label-important[href],
.badge-important[href] {
background-color: #953b39;
}
.label-warning,
.badge-warning {
background-color: #f89406;
}
.label-warning[href],
.badge-warning[href] {
background-color: #c67605;
}
.label-success,
.badge-success {
background-color: #468847;
}
.label-success[href],
.badge-success[href] {
background-color: #356635;
}
.label-info,
.badge-info {
background-color: #3a87ad;
}
.label-info[href],
.badge-info[href] {
background-color: #2d6987;
}
.label-inverse,
.badge-inverse {
background-color: #333333;
}
.label-inverse[href],
.badge-inverse[href] {
background-color: #1a1a1a;
}
.btn .label,
.btn .badge {
position: relative;
top: -1px;
}
.btn-mini .label,
.btn-mini .badge {
top: 0;
}
/*------------------------------------*\
WORDPRESS CORE
\*------------------------------------*/
.alignnone {
margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
display:block;
margin:5px auto 5px auto;
}
.alignright {
float:right;
margin:5px 0 20px 20px;
}
.alignleft {
float:left;
margin:5px 20px 20px 0;
}
.aligncenter {
display:block;
margin:5px auto 5px auto;
}
a img.alignright {
float:right;
margin:5px 0 20px 20px;
}
a img.alignnone {
margin:5px 20px 20px 0;
}
a img.alignleft {
float:left;
margin:5px 20px 20px 0;
}
a img.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}
.wp-caption {
background:#FFF;
border:1px solid #F0F0F0;
max-width:96%;
padding:5px 3px 10px;
text-align:center;
}
.wp-caption.alignnone {
margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
margin:5px 20px 20px 0;
}
.wp-caption.alignright {
margin:5px 0 20px 20px;
}
.wp-caption img {
border:0 none;
height:auto;
margin:0;
max-width:98.5%;
padding:0;
width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
font-size:11px;
line-height:17px;
margin:0;
padding:0 4px 5px;
}
.sticky {
}
.bypostauthor {
}
/*------------------------------------*\
PRINT
\*------------------------------------*/
@media print {
* {
background:transparent !important;
color:#000 !important;
box-shadow:none !important;
text-shadow:none !important;
}
a,
a:visited {
text-decoration:underline;
}
a[href]:after {
content:" (" attr(href) ")";
}
abbr[title]:after {
content:" (" attr(title) ")";
}
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content:"";
}
pre,blockquote {
border:1px solid #999;
page-break-inside:avoid;
}
thead {
display:table-header-group;
}
tr,img {
page-break-inside:avoid;
}
img {
max-width:100% !important;
}
@page {
margin:0.5cm;
}
p,
h2,
h3 {
orphans:3;
widows:3;
}
h2,
h3 {
page-break-after:avoid;
}
}