/*
Theme Name: DabHTML5
Theme URI: http://sozai.wi-wi.jp/html5/
Description: Wings-Winds HTML5 explanation.
Author: Miyu Kanzaki
Version: 1.0
Tags: blue, white, single-column, theme-options, threaded-comments, sticky-post, microformats
*/

/* default styles
-------------------- */

html, body{
	margin: 0;
	padding: 0;
	background-color: #fff;
	color: #000;
}
body {
	line-height: 1.1;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	color: #000;
	background: transparent;
}

h1,h2,h3,h4,h5,h6 {
	clear: both;
}
h1,h2,h3,h4 {
	font-weight: bold;
}
h5,h6 {
	font-weight: normal;
}

blockquote {
	quotes: none;
}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}

del {
	text-decoration: line-through;
}
ins {
	text-decolation: under-line;
	font-style: italic;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
th, td {
	vertical-align: top;
}

a img { border: 0 none; }

ul, ol, dl {
	margin: 0;
	padding: 0;
}
ul, ol{
	list-style-position: outside;
}

a {
	cursor: pointer;
}

/* HTML4
-------------------- */
/*
A
ABBR
ACRONYM
ADDRESS
APPLET
AREA
B
BASE
BASEFONT
BDO
BIG
BLOCKQUOTE
BODY O O
BR
BUTTON
CAPTION
CENTER
CITE
CODE
COL
COLGROUP
DD
DEL
DFN
DIR
DIV
DL
DT
EM
FIELDSET
FONT
FORM
FRAME
FRAMESET
H1
H2
H3
H4
H5
H6
HEAD O O
HR
HTML O O
I
IFRAME
IMG
INPUT
INS
ISINDEX
KBD
LABEL
LEGEND
LI
LINK
MAP
MENU
META
NOFRAMES
NOSCRIPT
OBJECT
OL
OPTGROUP
OPTION
P
PARAM
PRE
Q
S
SAMP
SCRIPT
SELECT
SMALL
SPAN
STRIKE
STRONG
STYLE
SUB
SUP
TABLE
TBODY O O
TD
TEXTAREA
TFOOT
TH
THEAD
TITLE
TR
TT
U
UL
VAR
*/


/* =HTML5
------------------ */

/*
html
head
title
base
link
meta
style
script
noscript
*/

/* block elements
------------------ */

body,
section,
nav,
article,
aside,
h1, h2, h3, h4, h5, h6,
hgroup,
header,
footer,
address {
	display: block;
}
aside {
	font-size: smaller;
}

p,
hr,
pre,
blockquote,
ol,
ul,
dl,
figure,
figcaption,
div {
	display: block;
}

li,
dt,
dd {
	
}

/* inline elements 
------------------ */
a,
em,
strong,
small,
cite,
q,
dfn,
abbr,
time,
code,
var,
samp,
kbd,
sub, sup,
i,
b,
mark,
bdo,
span,
wbr {
	display: inline;
}

ins,
del {
	display: inline;
}

/*
br,

ruby,
rt,
rp,
*/

/* inline-block elements 
------------------ */
img,
iframe,
embed,
object,
param,
video,
audio,
source,
canvas,
map,
area {
/*	display: inline-block;*/
}

/* table 
------------------ */
table,
caption,
colgroup,
col,
tbody,
thead,
tfoot,
tr,
td,
th{
}

/* form 
------------------ */
form,
fieldset,
legend,
label,
input,
/*
	States of the type attribute 
	Hidden state
	Text state and Search state
	Telephone state
	URL state
	E-mail state
	Password state
	Date and Time state
	Date state
	Month state
	Week state
	Time state
	Local Date and Time state
	Number state
	Range state
	Color state
	Checkbox state
	Radio Button state
	File Upload state
	Submit Button state
	Image Button state
	Reset Button state
	Button state

	Common inputattributes 
	The autocomplete attribute
	The list attribute
	The readonly attribute
	The size attribute
	The required attribute
	The multiple attribute
	The maxlength attribute
	The pattern attribute
	The min and max attributes
	The step attribute
	The placeholder attribute
*/

button,
select,
optgroup,
option,
textarea {
}

datalist,
keygen,
output,
progress,
meter {
	display: inline-block;
	border: 1px solid #aaa;
	padding: 2px;
}

/* interactive 
------------------ */
details,
summary,
command {
	display: inline-block;
	border: 1px solid #aaa;
	padding: 2px;
}
menu {
	display: block;
}




/***************************/
/* layout
--------------------- */
html {
	background-color: #aaa;
/*	position: relative;*/
	min-height: 100%;
}
body {
	background-color: #fff;
	padding: 5px 20px 15px;
	margin: 0 auto;
	max-width: 960px;
	position: relative;
	height: 100%;
}
#introduction {
	height: 30px;
}
body>header {
	height: 200px;
}
body>header nav {
	
}
body>#body {
	margin-top: 15px;
	max-width: 740px;
	margin-right: 210px;
}
body>#body.single {
	max-width: 920px;
	margin-right: 20px;
	margin-left: 20px;
}
body>#sidebar {
	width: 200px;
	position: absolute;
	top: 270px; /* #introduction's height, header's height,  #body's margin-top, #body article's margin-top */
	right: 20px; /* body's padding-right */
}
body>footer {
/*	clear: both;*/
	margin-top: 30px;
}

html,body,body>#sidebar{position: static;}
body>#body { float: left; margin-right: auto; }
body>#sidebar { float:right;margin-top: 15px; background-color: #fff;}
body>#sidebar:after{content:url(images/spacer.gif);display:block;visibility:visible;height:1px;clear: right;}
body>footer{clear:both;}


/***************************/
/* common
--------------------- */

/* for screen-reader
--------------------- */
.screen-reader-text {
	display: block;
	height: 0;
	width: 0;
	overflow: hidden;
}
/* topic-path
-------------------- */
ol.topic-path, 
ol.topic-path {
	height: 20px;
	list-style-type: image;
	list-style-position: inside;
	list-style-image: url(images/topicpath.png);
}
ol.topic-path li {
	float: left;
	margin-right: 10px;
}


/***************************/
/* introduction
-------------------- */
#introduction {
	background-color: #faffff;
}
#introduction img {
	width: 24px;
	height: 24px;
	margin-right: 5px;
	vertical-align: middle;
}

/* header
-------------------- */
body>header {
	border: 1px solid #ace;
	background: #fff url(images/header.jpg) center center no-repeat;
}
body>header hgroup {
	margin: 25px 50px 0;
	height: 150px;
}
body>header h1,
body>header h2,
body>header h3 {
	margin: 0;
}
/* header-nav
-------------------- */
body>header nav {
	height: 25px;
}
body>header nav ul {
	list-style-type: none;
	margin: 0 20px;
	padding: 0;
}
body>header nav ul li {
	margin-left: 10px;
	margin-right: 20px;
	float: left;
}

/* footer
-------------------- */
body>footer {
	background-color: #faffff;
	padding: 10px 30px;
}
body>footer #footer-widget-area li {
	float: left;
	width: 30%;
}
body>footer #footer-widget-area li li{
	width: auto;
}
body>footer #footer-widget-area li li{
	float: none;
}
body>footer #footer-widget-area:after {
	content: url(images/spacer.gif);
	display:block;
	visibility: hidden;
	height:0;
	clear: left;
}

/* widget
-------------------- */

/* sidebar
-------------------- */
#sidebar {
	padding: 0;
}
#sidebar h2 {
	display: none;
}

#sidebar h3,
#sidebar h4,
#sidebar h5,
#sidebar h6 {
	font-weight: bold;
}

#sidebar a {
	color: #006;
}
#sidebar a:hover,
#sidebar a:focus {
	color: #f66;
}
#sidebar a:visited {
	color: #606;
}

#sidebar ul,
#sidebar ol {
	padding: 0;
	margin: 0;
	list-style-type: none;
	list-style-position: outside;
}
#sidebar ul ul {
	margin-left: 1ex;
	list-style-type: circle;
}

/* body
-------------------- */
#body {
}

/* previous page, next page
-------------------- */
#body>article+nav{
	margin-top: 15px;
	margin-bottom: 30px;
}

#body>nav ul{
	list-style-type: none;
}
#body>nav li{
	float: right;
}
#body>nav li:first-child{
	float: left;
}
#body>nav:after {
	content: url(images/spacer.gif);
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	clear: both;
}


/* post-tag-cloud ( WP Pages )
-------------------- */
#body .tags {
}
#body ul.wp-tag-cloud {
	
}
#body ul.wp-tag-cloud{
	list-style-type: none;
	list-style-position: outside;
}
#body ul.wp-tag-cloud:after {
	content: url(images/spacer.gif);
	visibility: hidden;
	height: 0;
	display: block;
	clear: left;
}
#body ul.wp-tag-cloud li {
	float: left;
	margin-right: 1em;
}




/* post
-------------------- */
article.post {
	margin-top: 15px;
	border: 1px dotted #eac;
	padding: 10px;
}

/* post-header
-------------------- */
article.post header {
	margin-top: 6px;
	border-top: 0px none;
	border-right: 0px none;
	border-left: 4px solid #ace;
	border-bottom: 3px dashed #ccc;
	background-image: none;
}

article.post header h1, 
article.post header h2, 
article.post header h3 {
	padding-left: 1.3em;
}
article.post header .meta {
	padding-right: 1ex;
	text-align: right;
}


article.post header h1, 
article.post header h2, 
article.post header h3 {
}
article.post header .meta {
	margin-top: 5px;
	margin-left: 1em;
}

article.post section table {
	border-collapse: collapse;
}
article.post section thead,
article.post section tbody,
article.post section tfoot {

}
article.post section th, 
article.post section td {
	border: 1px solid #333;
	margin: 0;
	padding: 2px;
}


/* post meta section.definitions
-------------------- */
article.post section.definitions {
	margin: 5px 0;
	background-color: #eee;
	border: 1px solid #999;
	font-size: smaller;
	padding: 3px;
}
article.post section.definitions div {
	float: left;
	width: 24%;
	border-right: 1px dotted #999;
	margin-right: 3px;
}
article.post section.definitions h3 {
	border-bottom: 1px dotted #666;
	margin-bottom: 3px;
	text-indent: 3em;
}
article.post section.definitions dfn {
	font-style: normal;
	font-weight: bold;
}
article.post section.definitions dl {
}
article.post section.definitions dt {
	font-weight: bold;
}
article.post section.definitions dd {
	font-weight: normal;
}
article.post section.definitions:after {
	content: url(images/spacer.gif);
	display: block;
	visibility: hidden;
	height: 0;
	overflow: hidden;
	clear: left;
}

/* post
-------------------- */
article.post section {
	
}

article.post section.summary i,
article.post section.summary b,
article.post section.summary i,
article.post section.summary i a,
article.post section.summary b,
article.post section.summary b a {
	font-weight: normal;
	font-style: normal;
	color: #000;
}

/* content */
article.post section.content {
	
}
article.post section.content h3,
article.post section.content h4,
article.post section.content h5 {
	border-left: 3px solid #ddf;
	background-color: #eee;
}
article.post section.content ul{
	margin-left: 2em;
}

article.post section.content i,
article.post section.content b {
	font-weight: bold;
	font-style: normal;
	margin-left: .2ex;
	margin-right: .2ex;
}
article.post section.content i,
article.post section.content i a {
	color: #606;
}
article.post section.content b,
article.post section.content b a {
	color: #080;
}


/* post-aside
-------------------- */
article.post aside.utility {
	margin-top: 5px;
	border-right: 0px none;
	border-left: 1px solid #ace;
	border-top: 1px dashed #ccc;
	border-bottom: 1px solid #aaa;
}
article.post aside.utility p{
	margin: 3px 1em;
}
article.post aside.utility p i {
	font-style: normal;
}

article.post aside.utility ul{
	list-style-type: none;
	list-style-position: inside;
	margin: 3px 2em;
}
article.post aside.utility li{
	margin: 3px;
}
article.post aside.utility i {
	font-style: normal;
}


/* post-meta
-------------------- */
.post nav {
	margin-bottom: 4px;
	background-color: #eee;
}
.post *+nav {
	margin-top: 15px;
}
.post nav ul{
	list-style-type: none;
}
.post nav li{
	float: right;
}
.post nav li:first-child{
	float: left;
}
.post nav:after {
	content: url(images/spacer.gif);
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	clear: both;
}


/* post-comment
-------------------- */
.post section#comments {
	margin-top: 10px;
}
.post section#comments h2,
.post section#comments h3,
.post section#comments h4 {
	
	
}
.post section#comments ol {
	list-style-position: outside;
	margin-left: 2em;
}
.post section#comments ol li {
	border-left: 1px solid gray;
	margin-bottom: 1ex;
	padding-left: 1em;
}
.post section#comments ol li {
	border-bottom: 1px solid gray;
}
.post section#comments ol li li:last-child {
	border-bottom: 0px none;
}
.post section#comments ol li.even {
}
.post section#comments ol li.odd {
}


.post section#comments ol li .comment-author{
	float: left;
	margin-right: 1em;
}
.post section#comments ol li .comment-author img{
	vertical-align: bottom;
}
.post section#comments ol li .comment-meta{
	margin-left: 1em;
	padding-top: 1.5em;
	font-size: smaller;
}
.post section#comments ol li .comment-meta:after{
	content: url(images/spacer.gif);
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	clear: both;
}
.post section#comments ol li p{


}
.post section#comments ol li .reply{


}

.post section#comments ol li ul.children {
	margin-left: 2em;
}
.post section#comments ol li li {
	border-left: 0 none;
}