/* Yellow default style 0.3.3 */

html {height:101%;}

html, body, div, form, pre, span, tr, th, td { margin:0; padding:0; border:0; vertical-align:baseline; }

body { 
	margin:1em;
	background : url(img/bgblue.jpg) repeat;
        color:#222;
	font-family:"Open Sans", "DejaVu sans", "Helvetica Neue",Arial,Helvetica,"Liberation Sans",FreeSans,sans-serif;	
	font-size:0.95em; 
	line-height:1.5;
}

h1, h2, h3, h4, h5, h6 { color:#111; font-weight:bold; }
hr { height:1px; background:#ddd; border:0; }
code { font-size:1.1em; }
a { color:#06A; text-decoration:none;}
a:hover { color:orange; text-decoration:underline; }
a:hover, img { border:none; text-decoration:none; }


.header h1 { margin-top:0.5em; margin-bottom:0em; font-size:2.5em; }
.header a { color:#000; text-decoration:none; }
.header-banner {margin-bottom:0em;}


.sitename { padding:0em 1.5em; }
.sitename h1 { margin:0.4em 0; font-size:2em; font-family: Lobster,"Open Sans",arial, sans-serif;}
.sitename a { color:#000; text-decoration:none; }
.sitename-banner {
padding-top:30%;
background-image:url(img/banner.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}

.navigation { 
margin-bottom:1em; 
border-bottom:0px solid #ddd; 
line-height:1.5em; 
display: table;
background: #000; 
width: 100%;
}

.navigation a { color:#000; padding:0 0.3em; display:inline-block; }
.navigation a:hover { color:black; }
.navigation li a.active { color:darkred; }
.navigation li a.active:hover { color:black; }

/*.navigation li { display:inline; } */
.navigation ul { margin:0 -0.3em; padding:0; list-style:none; }

.pagination { margin:1em 0; }

.content h1 a:hover { text-decoration:none; }
.content form { margin:1em 0; }
.content .flexible { position:relative; padding-bottom:56.25%; padding-top:30px; }
.content .flexible iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
.footer { padding:0.5em 0Em 2em 0em; border-top:1px solid #CCC; }
.footer a { color:#717171; }
.footer a:hover { color:#07d; text-decoration:underline; }
.left { float:left; margin:0 1em 0 0; }
.center { display:block; margin:0 auto; }
.right { float:right; margin:0 0 0 1em; }

textarea {}

/* SPECIAL NIBBLEBLOG */
.latest {}
.post-title {}
.post-description {}
.page-titile {}
.comment {background : red;}
.info {border:0px solid #CCC; margin:0.5em; padding:0.5em; background:#FFF}

table {margin: 0 auto;}
thead {display:none;}
td {text-align:center;padding:0.5em; border: 1px solid #CCC;}
.content img {border: 1px solid #EEE; padding:0.5em;}
.content table img {border: 0px solid #EEE; padding:0em; width:100%; height: auto; }


/* Responsive and print */

.page { margin:0 auto; max-width:62em; padding:1em; border:1px solid #CCC; background:#FFF; border-radius:5px;}

@media screen and (min-width:62em) { 
	body { width:60em; margin:1em auto; }
	.page{ margin:0; max-width:none; }
}

@media screen and (max-width:45em) {
	.content img { max-width:98%; height:auto;}
	table, tbody, th, td, tr {display: block;}
	td {width:98%; text-align:left; }
.navigation {width: 0; background:#FFF; padding:1em;}
}

@media screen and (max-width:30em) { 
	 body { margin:0.5em; font-size:0.9em; background:#FFF;}
	.header h1, h1, h2, .sitename h1{ font-size:1.3em; }
	.header h1, .header, .navigation, .footer, .page { margin:0; padding:0; }
	textarea {width :85%;}
        .page { padding:0em; border:0px solid #CCC; background:#FFF; border-radius:0px;}
.navigation{background:#FFF; padding:1em;}
.info {border:0px solid #CCC; margin:0em; padding:0em; background:#FFF}
}
@media print {
	body, h1, h2, h3, h4, h5, h6 { background-color:white; color:black; }
	.page { border:none !important; }
	.navigation, .footer { display:none !important; }
}


/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap {
	margin: 0.1em;
}

/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */
}

#nav, 
#nav li {
	margin: 0;
	padding: 0;
}
#nav li {
	list-style: none;
	float: left;
	margin-right: 0px;
}

/* nav link */
#nav a {
	padding: 4px 15px;
	display: block;
	color: #FFF;
}

#nav a:hover {
}

/* nav dropdown */

#nav ul {
	 /*#8CC6D7;*/
	padding: 1px;
	position: absolute;
	border: 1px solid  #000;
	display: none; /* hide dropdown */
	width: 200px;
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}
#nav li:hover > ul {
	display: block;  background:orange; /* show dropdown on hover */
}


/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width:45em) {

	/* nav-wrap */
	#nav-wrap {
		position: relative;
	}

	/* menu icon */
	#menu-icon {
		color: #000;
		width: 42px;
		height: 30px;
		background: #ecebeb url(img/menu-icon.png) no-repeat 10px center;
		padding: 8px 10px 0 42px;
		cursor: pointer;
		border: solid 1px #666;
		display: block; /* show menu icon */
	}
	#menu-icon:hover {
		background-color: #f8f8f8;
	}
	#menu-icon.active {
		background-color: #bbb;
	}
	
	/* main nav */
	#nav {
		clear: both;
		position: absolute;
		top: 38px;
		width: 200px;
		z-index: 10000;
		padding: 5px;
		background: #f8f8f8;
		border: solid 1px #999;
		display: none; /* visibility will be toggled with jquery */
	}
	#nav li {
		clear: both;
		float: none;
		margin: 5px 0 5px 10px;
	}
	#nav a, 
	#nav ul a {
		font: inherit;
		background: none;
		display: inline;
		padding: 0;
		color: #666;
		border: none;
	}
	#nav a:hover, 
	#nav ul a:hover {
		background: none;
		color: #000;
	}
	
	/* dropdown */
	#nav ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}
	#nav ul li {
		margin: 3px 0 3px 15px;
	}

}

@media screen and (min-width: 45em) {

	/* ensure #nav is visible on desktop version */
	#nav {
		display: block !important;
	}

}