@charset "utf-8";
/* ===================================================================
CSS information

 author     :hirasawa (admin)
 style info :セレクタ
=================================================================== */

/* CSS2.1 セレクタ
-------------------------------------------------------- */

/* クラスセレクタ */
.class_selectorsBody #main .article .browserView .item {
	padding: 15px;
}

.class_selectorsBody #main .article .browserView .item ul.relatedLink.exLink a {
	color: orange;
	font-weight: bold;
}


.class_selectorsBody #main .article .browserView .item li.relatedLink a {
	color: black;
}

.class_selectorsBody #main .article .browserView .item li.relatedLink.exLink a {
	color: red;
}

.class_selectorsBody #main .article .browserView .item li.relatedLink.exLink.pickupLink a {
	color: green;
}

.class_selectorsBody #main .article .browserView .item li.pickupLink.exLink a {
	color: orange;
}

.class_selectorsBody #main .article .browserView .item li.relatedLink.pickupLink a {
	color: blue;
}

.class_selectorsBody #main .article .browserView .item li.spLink a {
	color: teal;
	font-weight: bold;
}


/* 子セレクタ */
#main .article .browserView #child_combinatorsExample {
	padding: 15px;
}

#main .article .browserView #child_combinatorsExample > p {
	color: #f00;
}


/* 隣接セレクタ */
#main .article .browserView #adjacent_sibling_combinatorsExample {
	padding: 15px;
}

#main .article .browserView #adjacent_sibling_combinatorsExample p + ul {
	margin-top: 50px;
}


/* CSS2 属性セレクタ */
#main .article .browserView #attribute_selectorsExample04,
#main .article .browserView #attribute_selectorsExample03,
#main .article .browserView #attribute_selectorsExample02,
#main .article .browserView #attribute_selectorsExample01 {
	padding: 15px;
}

#main .article .browserView #attribute_selectorsExample01 p[title] {
	color: blue;
}

#main .article .browserView #attribute_selectorsExample01 p[class][id] {
	font-weight: bold;
	color: green;
}

#main .article .browserView #attribute_selectorsExample02 input[type="text"] {
  width: 300px;
  padding: 5px;
}

#main .article .browserView #attribute_selectorsExample02 input[type="text"][value="http://"] {
  color: #666;
}

#main .article .browserView #attribute_selectorsExample02 a[href="http://css-happylife.com/"] {
  font-size: 200%;
  color: red;
}

#main .article .browserView #attribute_selectorsExample03 p[class~="attributeText"] {
	text-align: center;
	color: blue;
}

#main .article .browserView #attribute_selectorsExample03 p[class~="attributeText"][class~="attributeArea"] {
	color: green;
}

#main .article .browserView #attribute_selectorsExample03 p[class~="attributeSample"][class~="attributeText"][class~="attributeArea"] {
	color: red;
}

#main .article .browserView #attribute_selectorsExample04 p[class|="attribute"] {
	color: green;
}

#main .article .browserView #attribute_selectorsExample04 a[hreflang|="en"],
#main .article .browserView #attribute_selectorsExample04 p[lang|="en"] {
	font-family: Georgia, David, serif;
	font-size: 150%;
}


/* リンク疑似クラス（E:link, E:visited） */
#main .article .browserView #linkExample {
	padding: 15px;
}

#main .article .browserView #linkExample a:link {
	background: #ffffd6;
	text-decoration: underline;
	color: blue;
}

#main .article .browserView #linkExample a:visited {
	background: #f1e8fd;
	text-decoration: underline;
}


/* ダイナミック疑似クラス */
#main .article .browserView #useraction_pseudosExample01 {
	padding: 15px;
}

#main .article .browserView #useraction_pseudosExample01 a:link {
	color: blue;
	text-decoration: underline;
}

#main .article .browserView #useraction_pseudosExample01 a:visited {
	text-decoration: underline;
}

#main .article .browserView #useraction_pseudosExample01 a:hover {
	background: #333;
	color: #fff;
}

#main .article .browserView #useraction_pseudosExample01 a:active {
	background: #33c;
}

#main .article .browserView #useraction_pseudosExample01 a:focus {
	background: #eee;
	color: #000;
}


/* 言語疑似クラス */
#main .article .browserView #lang_pseudoExample {
	padding: 15px;
}

#main .article .browserView #lang_pseudoExample :lang(en) {
	font-family: Georgia, David, serif;
	font-style: italic;
}

#main .article .browserView #lang_pseudoExample blockquote {
	margin: 20px 0 10px;
	padding: 15px 15px 5px;
	border: 5px solid #ccc;
}

#main .article .browserView #lang_pseudoExample blockquote:lang(en) {
	margin-top: 10px;
	background: #e8e8e8;
	color: green;
}


/* :first-child疑似クラス */
#main .article .browserView #first-childExample ul {
	margin: 50px 20px;
	padding: 5px 0;
	text-align: center;
	border: 1px solid #999;
}

#main .article .browserView #first-childExample ul li {
	display: inline;
	margin-left: 5px;
	padding-left: 10px;
	border-left: 1px solid #666;
}

#main .article .browserView #first-childExample ul li:first-child {
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
}


/* :first-line疑似要素 */
#main .article .browserView #first-lineExample {
	padding: 15px;
}

#main .article .browserView #first-lineExample p.pick:first-line {
	color: #633;
	font-size: 125%;
}


/* :first-letter疑似要素 */
#main .article .browserView #first-letterExample {
	padding: 15px;
}

#main .article .browserView #first-letterExample p.pick:first-letter {
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
	color: #633;
	font-size: 5em;
	font-weight: bold;
	line-height: 1;
}


/* :before疑似要素  */
#main .article .browserView #beforeExample {
	padding: 15px;
}

#main .article .browserView #beforeExample p.att:before {
	content: "※ ";
	color: red;
	font-weight: bold;
}

#main .article .browserView #beforeExample ul li a[href="http://cssnite.jp/"]:before {
	content: "[オススメ] ";
	color: orange;
	font-size: 85%;
}


/* :after疑似要素  */
#main .article .browserView #afterExample01 {
	padding: 15px;
}

#main .article .browserView #afterExample01 ul li.new:after {
	content: " NEW!";
	color: red;
	font-size: 85%;
}

#main .article .browserView #afterExample03 p,
#main .article .browserView #afterExample02 p {
	margin: 0;
}

#main .article .browserView #afterExample03 #contentsSample02,
#main .article .browserView #afterExample02 #contentsSample01 {
	width: 560px;
	margin: 20px;
	background: #ccc;
}

#main .article .browserView #afterExample03 #mainSample02,
#main .article .browserView #afterExample02 #mainSample01 {
	float: left;
	width: 370px;
	height: 150px;
	background: #ccf;
}

#main .article .browserView #afterExample03 #subSample02,
#main .article .browserView #afterExample02 #subSample01 {
	float: right;
	width: 180px;
	background: #ffc;
}

#main .article .browserView #afterExample03 #contentsSample02:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}

/* CSS3 セレクタ
-------------------------------------------------------- */

/* 間接セレクタ */
#main .article .browserView #general_sibling_combinatorExample {
	padding: 0 15px 15px;
}

#main .article .browserView #general_sibling_combinatorExample h3 {
	margin-top: 15px;
}

#main .article .browserView #general_sibling_combinatorExample h3 ~ h3 {
	margin-top: 50px;
}


/* CSS3 属性セレクタ */
#main .article .browserView #attribute_selectorsExample07,
#main .article .browserView #attribute_selectorsExample06,
#main .article .browserView #attribute_selectorsExample05 {
	padding: 15px;
}

#main .article .browserView #attribute_selectorsExample05 a[href^="http://"] {
	padding-right: 15px;
	background: url(/prx/000/http/zero.css-happylife.com/img/item/icon_blank.gif) no-repeat right .5em;
}

#main .article .browserView #attribute_selectorsExample05 a[href^="http://css-happylifezero.com/"] {
	padding-right: 0;
	background: none;
}

#main .article .browserView #attribute_selectorsExample07 ul,
#main .article .browserView #attribute_selectorsExample06 ul {
	margin-left: 0;
}

#main .article .browserView #attribute_selectorsExample07 ul li,
#main .article .browserView #attribute_selectorsExample06 ul li {
	list-style-type: none;
	margin-bottom: 5px;
}

#main .article .browserView #attribute_selectorsExample06 a[href$=".zip"],
#main .article .browserView #attribute_selectorsExample06 a[href$=".xls"],
#main .article .browserView #attribute_selectorsExample06 a[href$=".doc"],
#main .article .browserView #attribute_selectorsExample06 a[href$=".pdf"] {
	padding-left: 22px;
	background-repeat: no-repeat;
	background-position: left .2em;
}

#main .article .browserView #attribute_selectorsExample06 a[href$=".pdf"] {
	background-image: url(/prx/000/http/zero.css-happylife.com/img/item/icon_pdf.gif);
}

#main .article .browserView #attribute_selectorsExample06 a[href$=".doc"] {
	background-image: url(/prx/000/http/zero.css-happylife.com/img/item/icon_word.gif);
}

#main .article .browserView #attribute_selectorsExample06 a[href$=".xls"] {
	background-image: url(/prx/000/http/zero.css-happylife.com/img/item/icon_excel.gif);
}

#main .article .browserView #attribute_selectorsExample06 a[href$=".zip"] {
	background-image: url(/prx/000/http/zero.css-happylife.com/img/item/icon_zip.gif);
}

#main .article .browserView #attribute_selectorsExample07 ul li img[src*="/img/bnr/"] {
	padding: 1px;
	border: 1px solid #999;
}

#main .article .browserView #ui_statesExample {
	padding: 15px;
}

#main .article .browserView #ui_statesExample textarea:disabled {
	background: #666;
}

#main .article .browserView #ui_statesExample textarea:enabled {
	background: #fff;
}

#main .article .browserView #ui_checkedExample {
	padding: 15px;
}

#main .article .browserView #ui_checkedExample input[type="checkbox"] {
	margin-right: 5px;
}

#main .article .browserView #ui_checkedExample input[type="checkbox"]:checked {
	margin-right: 10px;
}


/* :nth-child()疑似クラス */
#main .article .browserView #nth-childExample02,
#main .article .browserView #nth-childExample01 {
	padding: 15px;
}

#main .article .browserView #nth-childExample01 ol li:nth-child(2n) {
	color: green;
}

#main .article .browserView #nth-childExample01 ol li:nth-child(5) {
	color: purple;
	font-weight: bold;
}

#main .article .browserView #nth-childExample02 p:nth-child(3n+1) {
	background: #f5dada;
}

#main .article .browserView #nth-childExample02 p:nth-child(3n+2) {
	background: #ddf5da;
}

#main .article .browserView #nth-childExample02 p:nth-child(3n+3) {
	background: #dae0f5;
}


/* :first-of-type()疑似クラス */
#main .article .browserView #first-of-typeExample01 {
	padding: 15px;
}

#page #main .article .browserView #first-of-typeExample01 dl dt {
	padding-top: 10px;
	border-top: 3px double #95c810;
}

#page #main .article .browserView #first-of-typeExample01 dl dt:first-of-type {
	padding-top: 0;
	border-top: 0;
}

#page #main .article .browserView #first-of-typeExample01 dl dd {
	margin-bottom: 10px;
}


/* :nth-of-type()疑似クラス */
#main .article .browserView #nth-of-typeExample02,
#main .article .browserView #nth-of-typeExample01 {
	padding: 15px;
}

#main .article .browserView #nth-of-typeExample01 p:nth-of-type(3n+1) {
	background: #f5dada;
}

#main .article .browserView #nth-of-typeExample01 p:nth-of-type(3n+2) {
	background: #ddf5da;
}

#main .article .browserView #nth-of-typeExample01 p:nth-of-type(3n+3) {
	background: #dae0f5;
}


#page #main .article .browserView #nth-of-typeExample02 dl {
	margin-bottom: 50px;
}

#page #main .article .browserView #nth-of-typeExample02 dl dt {
	clear: both;
	float: left;
	width: 80px;
	padding: 10px 0 10px 10px;
}

#page #main .article .browserView #nth-of-typeExample02 dl dd {
	padding: 10px 10px 10px 85px;
	border-top: 1px dotted #999;
}

#page #main .article .browserView #nth-of-typeExample02 dl dd:nth-of-type(odd) {
	background: #dae0f5;
}

#page #main .article .browserView #nth-of-typeExample02 dl dd:nth-of-type(1) {
	border-top: 0;
}


/* :only-child疑似クラス */
#main .article .browserView #only-childExample {
	padding: 15px;
}

#main .article .browserView #only-childExample .item {
	margin-bottom: 15px;
	padding: 10px;
	border: 1px solid #999;
}

#main .article .browserView #only-childExample .item p:only-child {
	color: red;
}

#page #main .article .browserView #only-childExample dl {
	margin-bottom: 20px;
}

#page #main .article .browserView #only-childExample dl dt:only-child {
	background: #dae0f5;
}


/* :only-of-type疑似クラス */
#main .article .browserView #only-of-typeExample {
	padding: 15px;
}

#main .article .browserView #only-of-typeExample .item {
	margin-bottom: 15px;
	padding: 10px;
	border: 1px solid #999;
}

#main .article .browserView #only-of-typeExample .item h4 {
	margin-top: 0;
}

#main .article .browserView #only-of-typeExample .item p:only-of-type {
	color: red;
}

#page #main .article .browserView #only-of-typeExample dl {
	margin-bottom: 20px;
}

#page #main .article .browserView #only-of-typeExample dl dt:only-of-type {
	background: #ddf5da;
}


/* :empty疑似クラス */
#main .article .browserView #emptyExample {
	padding: 15px;
}

#main .article .browserView #emptyExample table {
	border: 1px solid #333;
}

#main .article .browserView #emptyExample table td {
	width: 50px;
	padding: 10px 20px;
	border: 1px solid #333;
	text-align: center;
}

#main .article .browserView #emptyExample tr:nth-child(2n+1) {
	background: #fff;
}

#main .article .browserView #emptyExample table td:empty {
	background: #ecc;
}


/* ターゲット疑似クラス */
#main .article .browserView #targetExample {
	padding: 15px;
}

#main .article .browserView #targetExample h4 {
	margin-top: 100px;
}


#main .article .browserView #targetExample :target {
	position: static;
	color: red;
	font-weight: bold;
}

#main .article .browserView #targetExample :target::after {
	content: "←ココに飛んできたよ";
	padding-left: 5px;
	font-weight: normal;
	color: #666;
}

#main .article .browserView #targetExample :target::before {
	background: none;
}


/* 否定疑似クラス */
#main .article .browserView #notExample {
	padding: 15px;
}

#main .article .browserView #notExample ul:not([class]) {
	margin-left: 3px;
}

#main .article .browserView #notExample ul:not([class]) li {
	margin: 0 0 5px;
	padding: 0 0 0 15px;
	background: url(/prx/000/http/zero.css-happylife.com/img/item/mark_basic.gif) no-repeat left center;
	list-style-type: none;
}