@charset "utf-8";

@import url("yui.css");

BODY {
	font-family: arial, serif;
	font-size: small;
	color: #485569;
	margin: 0;
	padding: 0;
	background-image: url("images/bg.png");
	background-position: top left;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0;
}

IMG {
	border: 0;
	vertical-align: middle;
}

A {
	text-decoration: none;
	color: inherit;
	background-color: inherit;
	font-weight: inherit;
}

A:hover {
	text-decoration: underline;
}

H1 {
	text-transform: uppercase;
	font-family: verdana;
	font-size: 1.2em;
	font-weight: normal;
	background-color: inherit;
	width: auto;
	border-color: #000;
	border-style: solid;
	border-width: 0 0 1px 0;
	padding: 0;
	margin: 0 0 12px 0;
}

H1 A {
	color: inherit;
}

H1 BIG {
	color: inherit;
	display: inline-block;
	font-family: inherit;
	text-transform: inherit;
	margin: 0 .5% 0 0;
	font-weight: bold;
	padding: .5% 2%;
	border-top-right-radius: 0.5em;
	border-top-left-radius: 0.5em;
	background-color: #8ea4bc;
	background: -moz-linear-gradient(top, #8ea4bc, #697b99);
	background: linear-gradient(top, #8ea4bc, #697b99);
}

H1 BIG A {
	color: #fff;
	background-color: transparent;
	font-weight: bold;
}

H1 BIG A:hover {
	text-decoration: none
}

H1 EM {
	color: inherit;
	background-color: inherit;
}

H2 {
	color: #8ea4bc;
	font-size: 1.2em;
	font-weight: bold;
	font-family: georgia, serif;
	text-transform: uppercase;
	width: auto;
	padding: 2px 0;
	margin: 10px 0 6px 0;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: #8ea4bc;
	clear: both;
	text-transform: uppercase;
}

H2 A {
	color: inherit;
}

H3 {
	font-weight: bold
}

SMALL,SMALL A {
	background-color: transparent;
	color: #8ea4bc;
	font-size: inherit;
}

H1 SMALL {
	color: #8ea4bc;
}

H2 SMALL {
	text-transform: none;
	font-weight: lighter;
}

UL,OL {
	margin: 0px;
	padding: 8px 24px;
	clear: both;
}

LI {
	vertical-align: middle;
}

LI P {
	margin: 2px 0;
	font-size: .8em;
	font-family: verdana, sans serif;
	padding: 0;
	color: #8ea4bc;
	background-color: inherit;
	padding: 0;
}

DIV.description,BLOCKQUOTE {
	color: #5F5B34;
	background-color: #EFEEE2;
	margin: 6px 0;
	padding: 8px;
	border-left: 1px solid #B0AA71
}

DIV.description A,BLOCKQUOTE A {
	color: inherit;
	font-weight: bold;
}

FORM {
	background-color: #f0f0f0;
	color: inherit;
	border: 1px solid #c0c0c0;
	padding: 6px;
	margin: 10px 0;
}

FORM H1 {
	font-size: 1.5em
}

FORM LABEL {
	line-height: 18px;
}

FORM.inline {
	display: inline;
	border: 0;
	background-color: transparent;
}

FIELDSET {
	border: 1px solid #697b99;
}

LEGEND {
	color: #697b99;
	background-color: inherit
}

INPUT,SELECT,TEXTAREA {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 0.8em;
	vertical-align: middle;
	background-color: #fff;
	color: #000
}

TEXTAREA {
	width: 100%;
	height: 5em;
}

OPTION.niv0 {
	text-align: left;
	font-weight: normal;
	border-top: 1px solid #000;
	background-color: #FFFF90;
	background-image: url('images/folder_grid.gif');
	background-position: bottom right;
	background-repeat: no-repeat;
	margin-top: 6px;
	color: #909000
}

OPTION.niv1 {
	font-weight: bold;
}

BUTTON,INPUT[type="submit"],INPUT[type="button"],INPUT[type="reset"] {
	background-color: #f5f5f5;
	color: #888;
	border-color: #C0C0C0;
	border-width: 1px;
	border-style: solid;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	text-transform: capitalize;
	font-size: 0.8em;
	padding: 4px;
	margin: 2px 4px;
	vertical-align: middle
}

HR {
	clear: both;
	border-width: 0 0 1px 0;
	border-color: #c0c0c0;
	border-style: solid;
}

HR.clearer {
	clear: both;
	margin: 0;
	padding: 0;
	visibility: hidden;
}

#container {
	margin: 0;
	padding: 4px 20px;
}

#nav {
	position: relative;
	clear: both;
	padding: 1em;
	margin: 10px auto 0 auto;
	text-align: left;
	color: #CCC;
	background-color: #eee;
	border-color: #ccc;
	border-width: 1px 0;
	border-style: solid;
	margin: 10px auto 0 auto;
	padding: 1em;
}

#nav DL {
	float: left;
	width: 31%;
	padding: 0;
	margin: 0 1%;
}

#nav DT {
	padding: 0.2em 0.6em;
	color: #fff;
	background-color: #bbb;
	border-style: solid;
	border-color: #aaa;
	border-width: 1px 0 0 0;
	font-size: 1em;
	font-weight: bold;
	color: #fff;
}

#nav DD {
	margin: 0;
	padding: 6px;
	border-style: solid;
	border-color: #ccc;
	border-width: 0 0 0 1px;
}

#nav DD UL {
	margin: 0.5em 1.5em;
	padding: 0;
}

#nav A {
	color: #000;
	font-weight: normal;
}

#nav DIV {
	clear: both;
}

#sortBar {
	text-align: right;
	background-color: #f5f5f5;
	color: #000;
	border-bottom: 1px solid #c0c0c0;
	padding: 4px;
	font-size: .9em;
	margin: 1em 0 0 0;
}

#sortBar LI.emphased {
	font-weight: bolder;
}

#header {
	margin: 0;
	color: #ccc;
}

#header DIV {
	text-align: right;
}

#footer {
	padding: 8px;
	margin: 0 auto;
	text-align: center;
}

.stabylo {
	background-color: #9FF;
	color: inherit
}

.chart_container {
	margin: 10px auto;
	width: 90%;
	height: 200px;
}

.chart_legend {
	text-align: center;
}

.rssLink {
	border: 1px solid #666;
	font-size: 0.8em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #fff;
	background-color: #ccc;
	margin: 0;
	padding: 0 3px;
}

.rssLink:hover {
	color: #fff;
	background-color: #f60;
	text-decoration: none
}

.error {
	color: red;
	font-weight: bold;
}

.warning {
	color: orange;
	font-weight: bold;
}

.notice {
	color: orange;
	font-weight: bold;
}

.wrapper {
	margin: 1% auto;
	padding: 1%;
	border-width: 4px;
	border-style: solid;
	border-color: #ccc;
	background-color: #fff;
	color: inherit;
}

.wrapper,#nav,#footer {
	width: 960px;
}

.wrapper>UL,.wrapper>OL {
	margin: 1% 0;
}

DIV.subtopics LI {
	display: block;
	font-size: 1.1em;
	font-weight: normal;
	margin: 0 2%;
	padding: 1%;
	-moz-break-inside: avoid-column;
	-webkit-column-break-inside: avoid;
	break-inside: avoid-column;
}

DIV.subtopics LI A {
	padding: 0.1em 0.5em;
}

DIV.subtopics LI.unlockedtopic A {
	background-color: #ccb459;
	color: #fff;
}

DIV.subtopics LI.lockedtopic A {
	background-color: #ccbf93;
	color: #fff;
}

DIV.subtopics LI.unlockedtopic {
	list-style-image: url("images/foldercu.gif");
}

DIV.subtopics LI.lockedtopic {
	list-style-image: url("images/foldercl.gif");
}

DIV.subtopics LI.unlockedtopic SMALL,DIV.subtopics LI.lockedtopic SMALL {
	color: #63572c;
}

DIV.subtopics LI.virtual A {
	background-color: #eee;
	color: #333;
}

DIV.unlockedBookmark,DIV.lockedBookmark {
	float: left;
	display: block;
	width: 200px;
	min-height: 150px;
	margin: 3px;
	border: 2px solid #ccc;
	padding: 9px;
	background-color: #fff;
	color: #000;
}

DIV.bookmarks UL {
	margin: 1em 2em;
}

DIV.bookmarks LI {
	float: none;
	-moz-break-inside: avoid-column;
	-webkit-column-break-inside: avoid;
	break-inside: avoid-column;
	margin-bottom: 1em;
	padding: 0;
}

.bookmarkLink,.hotBookmarkLink {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.1em;
	background-color: inherit;
}

.bookmarkLink {
	color: #255199;
}

.hotBookmarkLink {
	color: #C30;
}

.inactive * {
	color: #A0A0A0;
}

.thumbnail {
	display: block;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	background-image: url('/skin/images/bg.gif');
	background-color: #EEE;
	margin-bottom: 1em;
	background-color: #EEE;
	height: 152px;
}

.thumbnail IMG {
	display: block;
	margin: auto;
	background-image: url('/skin/images/wait.gif');
	background-repeat: no-repeat;
	width: 202px;
}

.icon {
	margin: .5% 1%;
}

OL.collection {
	margin: 0;
	padding: 0;
}

OL.collection LI {
	float: left;
	display: block;
	overflow: hidden;
	border-style: solid;
	border-color: #eee;
	border-width: 0 0 1px 0;
	width: 30%;
	margin: 0.5% 1%;
	padding: 1% 0.5%;
}

OL.collection LI.emphased {
	height: 320px;
}

OL.top {
	margin: 1% 0;
	padding: 0;
	-moz-column-count: 1;
	-webkit-column-count: 1;
	column-count: 1;
	border-bottom: solid 1px #eee;
	height: 310px;
	overflow: hidden;
	background-color: #f5f5f5;
}

OL.top LI {
	height: 97%;
	float: left;
	display: block;
	width: 30%;
	margin: 0.5% 1%;
	padding: 1% 0.5%;
}

DIV.toolbar {
	margin: 1.2em 0;
	color: #000;
	clear: both;
}

DIV.toolbar SPAN.label {
	display: inline-block;
	margin: 0 0.5em;
	line-height: 1.3em;
	text-align: right;
	color: #bbb;
}

DIV .toolbar OL {
	margin: 0;
	padding: 0;
	display: inline-block;
	clear: none;
}

DIV.toolbar LI {
	display: inline-block;
	margin: 0 0 0 1em;
	padding-left: 1em;
	border-left: thin solid #ccc;
}

}
DIV.toolbar	LI A {
	line-height: 1.3em;
	text-align: center;
	color: #777;
}

DIV.toolbar FORM {
	margin: 0;
	padding: 0;
}

#home #photo {
	background-image: url("/skin/images/home_w920.png");
	background-repeat: no-repeat;
	width: 920px;
	height: 296px;
	width: 920px;
}

#home .subtopics,#home .bookmarks {
	margin: 1em;
	padding: 0;
}

#home .subtopics UL {
	-moz-columns: 3;
	-webkit-columns: 3;
	columns: 3;
	-moz-column-gap: 5em;
	-webkit-column-gap: 5em;
	column-gap: 5em;
	margin: .5em 1em;
	padding: 0;
}

#home .bookmarks UL {
	-moz-columns: 3;
	-webkit-columns: 3;
	columns: 3;
	-moz-column-gap: 5em;
	-webkit-column-gap: 5em;
	column-gap: 5em;
	margin: .5em 1em;
	padding: 0;
}

#topic .subtopics UL,#topic .bookmarks UL,#search .bookmarks UL {
	-moz-columns: 3;
	-webkit-columns: 3;
	columns: 3;
	-moz-column-gap: 5em;
	-webkit-column-gap: 5em;
	column-gap: 5em;
	margin: .5em 1em;
	padding: 0;
}

#bookmark #panel2 {
	clear: both;
}

#bookmark #panel2,#bookmark #panel3 {
	width: 46%;
	margin: 1% 2%;
	float: left
}

#bookmark #panel1>DIV {
	float: left;
	width: 48%;
	margin: 1%
}

#bookmark .thumbnail {
	width: 375px;
	height: 240px;
}

#bookmark .thumbnail IMG {
	width: 320px;
}

#bookmarkEdit DIV.section {
	float: left;
	width: 46%;
	margin: 0 2%;
}

@media screen and (max-device-width:800px) {
	BODY {
		background: none;
		font-size: large;
	}
	.wrapper {
		margin: 0;
		padding: 1.2%;
		border: 0;
	}
	OL.collection {
		list-style-position: inside;
	}
	OL.collection LI {
		float: none;
		width: 94%;
		margin: 1% 0;
		padding: 4% 2%;
		line-height: 1.2em;
	}
	OL.collection LI.emphased {
		border-left: none;
		border-right: none;
		border-top: none;
		margin: 1% 0;
		height: auto;
	}
	OL.top {
		height: auto;
		list-style-position: outside;
		list-style-type: disc;
	}
	OL.top LI {
		float: none;
		display: list-item;
		width: auto;
		margin : 0.5em 1em;
		padding: 0;
		line-height: 1.2em;
		border: none;
		height: auto;
		margin: 0.5em 1em;
	}
	.thumbnail {
		width: 100%;
		height: 240px;
		margin: 2% 0;
		float: none;
	}
	.thumbnail IMG {
		width: 320px;
	}
	DIV.toolbar SPAN {
		display: block;
		margin: 0.5em 0;
		line-height: 1em;
		text-align: left;
	}
	DIV.toolbar OL {
		display: block;
		margin: 0;
	}
	DIV.toolbar LI,DIV.toolbar LI:FIRST-CHILD {
		display: list-item;
		list-style: disc;
		margin: 1em 1.5em;
		padding: 0;
		border: 0;
	}
	.deco,.bonus,.description {
		display: none;
	}
	H1 BIG {
		display: block;
	}
	.subtopics,.bookmarks {
		float: none;
		width: 100%;
	}
	.wrapper,#nav,#footer {
		width: 100%;
	}
	#main {
		width: 100%;
		clear: both;
		margin: 4% 0
	}
	#sortBar {
		text-align: left;
	}
	#nav {
		margin: 0;
		padding: 1%
	}
	#nav DL {
		float: none;
		margin: 0;
		width: 100%;
	}
	#nav DT {
		margin: 0;
	}
	#nav DD {
		border: 0;
	}
	#nav DD LI {
		margin: 1em;
	}
	#container {
		padding: 0;
	}
	#home .subtopics UL,#home .bookmarks UL,#topic .subtopics UL,#topic .bookmarks UL,#search .bookmarks UL {
		-moz-columns: 1;
		-webkit-columns: 1;
		columns: 1;
		line-height: 1.2em;
	}
	#bookmark #panel2,#bookmark #panel3 {
		width: 96%;
		margin: 1% 2%;
		float: none;
	}
	#bookmark #panel1>DIV {
		float: none;
		width: 100%;
		margin: 1% 0
	}
	#bookmarkEdit DIV.section {
		float: none;
		width: 96%;
		margin: 1% 2%;
	}
}