/*
Theme Name: Cyantology
Theme URI: http://www.jundevelopment.com/wordpress/themes/Cyantology
Author: Fer J. Jun Baldo
Author URI: http://www.jundevelopment.com
Description: Cyantology is a theme that showcases how the color cyan, black and shades of gray could really have a really nice combination, it also has a responsive feature which makes it look good on any devices. Standard wordpress features have been activated like header images, featued images, navigation menus and widgets. Some social media sharing features like Facebook and Twitter are also included. 
Version: 1.0
License: GNU General Public License v3.0 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: blue, gray, black, responsive-layout, right-sidebar, fluid-layout, featured-image-header, featured-images, custom-header, custom-menu
Text Domain: cyantology

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*
*	
*	Order of styles 
* 	0. CSS Reset
*	1. General Typograhpy
*	2. Masthead
*	3. Navigation
*	4. main-content
*	5. Sidebar
*	6. Footer
*	7. Comments and Replies
*	 
*	 
*/

/* 0. CSS Reset
html5doctor.com Reset Stylesheet
v1.0 
2009-07-15
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video, source {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
body {
	line-height:1;
}

article, aside, dialog, figure, footer, header, 
hgroup, menu, nav, section, menu { 
	display:block;
}

nav ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

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

ins {
	background-color:#ff9;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse:collapse;
	border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;	
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
	vertical-align:middle;
}

/* ----------------------------------------------
-------1. General Typography --------------------
-----------------------------------------------*/

/* Box Model */

.main-body-container{
	max-width: 100%;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

/* colors and fonts */

body {
	background-color: #F5F5F5;
	background-image: url("images/stardust.png"); /* pattern downloaded from http://subtlepatterns.com/ */
	background-repeat: repeat;
}

body,
button,
input,
select,
textarea {
	color: #404040;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-weight: 400; 
	font-size: 15px;
	line-height: 1.8;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
}

h1{ font-size: 2.2em; }
h2{ font-size: 2em; }
h3{ font-size: 1.8em; }
h4{ font-size: 1.6em; }
h5{ font-size: 1.0em; }
h6{ font-size: 1.2em; }

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

b{
	font-weight: 700;
}

li{
	list-style: none;
}

a:link{
	text-decoration: none;
	color: #00ACC1;
}

a:visited{
	color: #00BCD4;
}

a:hover{
	color: #26C6DA;
}

.alignright{
	text-align: right !important;
}

.alignleft{
	text-align: left !important;
}

.aligncenter{
	text-align: center !important;
}

.wp-caption{}
.wp-caption-text{}
.sticky{}
.gallery-caption{}
.bypostauthor{}

/* Text meant only for screen readers */
.screen-reader-text {
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}

/* ----------------------------------------------
------------------ 2. Masthead ------------------
-----------------------------------------------*/

/* Box Model */
@media screen and (max-width: 600px){
	.banner,
	.masthead{
		max-width: 100%;
		width: 100%;
		height: auto;
		margin: 0 auto;
		text-align: center;
	}
	
	.header-wraper{
		position: absolute;
		max-width: 100%;
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
	
	.header-container{
		position: relative;
		max-width: 1024px;
		width: 100%;
		top: 0;
		padding-top: 20px;
	}
	
	.logo-wraper{
		max-width: 20%;
		width: 100%;
		position: static;
		display: inline-block;
		vertical-align: middle;
	}
	
	.site-logo img{
		position: static;
		max-width: 90%;
		width: 100%;
		margin: 5%;
		height: auto;
	}
	
	.header-text-wraper{
		position: static;
		display: inline-block;
		max-width: 60%;
		width: 100%;
		height: auto;
		margin: 0 auto;
		vertical-align: middle;
	}
	
	.mobile-nav-wraper{
		position: static;
		display: inline-block;
		max-width: 14%;
		width: 100%;
		height: auto;
		margin: 0 auto;
		vertical-align: middle;
	}
	
	.mobile-nav-wraper img{
		max-width: 40px;
		width: 100%;
		padding: 5%;
	}
	
	.nav-wraper{
		max-width: 100%;
		width: 100%;
		margin-top: 20px;
	}
	
	.banner img{
		max-width: 100%;
		width: 100%;
		height: auto;
	}
}
@media screen and (min-width: 601px){
	.banner,
	.masthead{
		max-width: 100%;
		width: 100%;
		height: auto;
		margin: 0 auto;
		text-align: center;
	}
	
	.header-wraper{
		position: absolute;
		max-width: 100%;
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
	
	.header-container{
		position: relative;
		max-width: 1024px;
		width: 100%;
		top: 0;
		padding-top: 20px;
	}
	
	.logo-wraper{
		max-width: 20%;
		width: 100%;
		position: static;
		display: inline-block;
		vertical-align: middle;
	}
	
	.site-logo img{
		position: static;
		max-width: 90%;
		width: 100%;
		margin: 5%;
		height: auto;
	}
	
	.header-text-wraper{
		position: static;
		display: inline-block;
		max-width: 65%;
		width: 100%;
		height: auto;
		margin: 0 auto;
		vertical-align: middle;
	}
	
	.mobile-nav-wraper{
		position: static;
		display: none;
		max-width: 0%;
		width: 0%;
		height: auto;
		margin: 0 auto;
		vertical-align: middle;
	}
	
	.mobile-nav-wraper img{
		max-width: 40px;
		width: 100%;
		padding: 5%;
	}
	
	.nav-wraper{
		max-width: 100%;
		width: 100%;
		margin-top: 20px;
	}
	
	.header-container{
		position: static;
		max-width: 1024px;
		width: 100%;
		top: 0;
	}
	
	.banner img{
		max-width: 100%;
		width: 100%;
		height: auto;
	}
}
@media screen and (min-width: 800px){
	.banner,
	.masthead{
		max-width: 100%;
		width: 100%;
		height: auto;
		margin: 0 auto;
		text-align: left;
	}
	
	.header-wraper{
		position: absolute;
		max-width: 100%;
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
	
	.header-container{
		position: relative;
		max-width: 1024px;
		width: 100%;
		top: 0;
	}
	
	.logo-wraper{
		max-width: 20%;
		width: 100%;
		position: static;
		display: inline-block;
		vertical-align: bottom;
	}
	
	.site-logo img{
		position: static;
		max-width: 90%;
		width: 100%;
		margin: 5%;
		height: auto;
	}
	
	.header-text-wraper{
		position: static;
		display: inline-block;
		max-width: 61%;
		width: 100%;
		height: auto;
		margin: 20px 2%;
		vertical-align: bottom;
	}
	
	.mobile-nav-wraper{
		position: static;
		display: none;
		max-width: 0%;
		width: 0%;
		height: auto;
		margin: 0 auto;
		vertical-align: bottom;
	}
	
	.mobile-nav-wraper img{
		max-width: 40px;
		width: 100%;
		padding: 5%;
	}
	
	.nav-wraper{
		max-width: 100%;
		width: 100%;
		margin-top: 20px;
	}
		
	.banner img{
		max-width: 100%;
		width: 100%;
		height: auto;
	}
}
@media screen and (min-width: 1024px){
	
	.banner,
	.header-container,
	.masthead{
		max-width: 100%;
		width: 100%;
		height: auto;
		margin: 0 auto;
		text-align: left;
	}
	
	.header-wraper{
		position: absolute;
		max-width: 100%;
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
	
	.header-container{
		position: relative;
		max-width: 1024px;
		width: 100%;
		top: 0;
	}
	
	.logo-wraper{
		max-width: 20%;
		width: 100%;
		position: static;
		display: inline-block;
		vertical-align: bottom;
	}
	
	.site-logo img{
		position: static;
		max-width: 150px;
		width: 100%;
		margin: 5%;
		height: auto;
	}
	
	.header-text-wraper{
		position: static;
		display: inline-block;
		max-width: 61%;
		width: 100%;
		height: auto;
		margin: 20px 2%;
		vertical-align: bottom;
	}
	
	.mobile-nav-wraper{
		position: static;
		display: none;
		max-width: 0%;
		width: 0%;
		height: auto;
		margin: 0 auto;
		vertical-align: bottom;
	}
	
	.mobile-nav-wraper img{
		max-width: 40px;
		width: 100%;
		padding: 5%;
	}
	
	.nav-wraper{
		max-width: 100%;
		width: 100%;
		margin-top: 20px;
	}
		
	.banner img{
		max-width: 100%;
		width: 100%;
		height: auto;
	}
}

/* Masthead - fonts and colors */

@media screen and (max-width: 600px){
	.masthead{
		background-color: rgba(250, 250, 250, 0.8);
	}
	
	.header-container{
		background-color: rgba(0, 0, 0, 0.7);
	}
	
	.masthead h1{
		font-size: 1.5em;
		text-align: center;
	}
	
	.masthead h2{
		font-size: 1em;
		color: #ffffff;
	}
	
	.name-container{
		background-color: none;
	}
	
	.logo-wraper img{
		background-color: rgba(250, 250, 250, 0.8);
		padding: 2%;
	}

	.description-container{
		background-color: none;
	}
}

@media screen and (min-width: 601px){
	.masthead{
		background-color: rgba(250, 250, 250, 0.8);
	}
	
	.header-container{
		background-color: rgba(0, 0, 0, 0.7);
	}
	
	.masthead h1{
		font-size: 2em;
		text-align: center;
	}
	
	.masthead h2{
		font-size: 1.2em;
		color: #ffffff;
	}
	
	.name-container{
		background-color: none;
	}
	
	.logo-wraper img{
		background-color: rgba(250, 250, 250, 0.8);
		padding: 0 !important;
	}

	.description-container{
		background-color: none;
	}
}

@media screen and (min-width: 800px){
	.masthead{
		background-color: rgba(250, 250, 250, 0.8);
	}
	
	.header-container{
		background-color: rgba(0, 0, 0, 0.7);
	}
	
	.masthead h1{
		font-size: 2em;
		text-align: left;
	}
	
	.masthead h2{
		font-size: 1.2em;
		color: #ffffff;
	}
	
	.name-container{
		background-color: none;
	}
	
	.logo-wraper img{
		background-color: rgba(250, 250, 250, 0.8);
		padding: 0 !important;
	}

	.description-container{
		background-color: none;
	}
}

@media screen and (min-width: 1024px){
	.masthead{
		background-color: none;
	}
		
	.header-container{
		background-color: rgba(0, 0, 0, 0.7);
	}
	
	.masthead h1{
		font-size: 2em;
		text-align: left;
	}
	
	.masthead h2{
		font-size: 1.2em;
		color: #ffffff;
	}
	
	.name-container{
		background-color: none;
	}
	
	.logo-wraper img{
		background-color: rgba(250, 250, 250, 0.8);
		padding: 0 !important;
	}

	.description-container{
		background-color: none;
	}
}


/* ----------------------------------------------
------------------ 3. Navigation ----------------
-----------------------------------------------*/

/* Navigatioin - Box Model */

@media screen and (max-width: 600px){
	input[type=checkbox]{
		display: none !important;
	}
	
	.show-menu{
		display: block;
	}
	
	#main-nav   {
		display: none;
	}
	
	#show-menu:checked ~ #main-nav{
		display: block;
	}

	#main-nav ul    {
		margin: 0; padding: 0; 
	}

	#main-nav li    {
		display: inline-block;
		float: none;
		line-height: 30px; /* this should be the same as your #main-nav height */
		height: 30px; /* this should be the same as your #main-nav height */
		margin: 0; padding: 0; 
		position: relative; /* this is needed in order to position sub menus */
		max-width: 100%;
		width: 100%;
	}

	#main-nav li a  {
		display: block;
		height: 30px;
		line-height: 30px;
		padding: 0 15px;
	}

	#main-nav ul ul { /* this targets all sub menus */
		display: none; /* hide all sub menus from view */
		position: relative;
		top: 0; /* this should be the same height as the top level menu -- height + padding + borders */
	}

	#main-nav ul ul li { /* this targets all submenu items */
		float: none; /* overwriting our float up above */
		width: 100%; /* set to the width you want your sub menus to be. This needs to match the value we set below */
		line-height: 30px;
		
	}

	#main-nav ul ul li a { /* target all sub menu item links */
		padding: 0 5px; /* give our sub menu links a nice button feel */
	}

	#main-nav ul li:hover > ul {
		display: block; /* show sub menus when hovering over a parent */
	}

	#main-nav ul ul li ul {
		/* target all second, third, and deeper level sub menus */
		display: block;
		width: 100%;
		left: 0; /* this needs to match the sub menu width set above -- width + padding + borders */
		top: 0; /* this ensures the sub menu starts in line with its parent item */
	}
	
}

@media screen and (min-width: 601px){
	
	input[type=checkbox]{
		display: none !important;
	}
	
	.show-menu{
		display:none;
	}
	
	#main-nav   {
		display: block;
		height: 30px; /* set to the height you want your menu to be */
	}

	#main-nav ul    {
		margin: 0; padding: 0; 
	}

	#main-nav li    {
		display: block;
		float: left;
		line-height: 30px; /* this should be the same as your #main-nav height */
		height: 30px; /* this should be the same as your #main-nav height */
		margin: 0; padding: 0; 
		position: relative; /* this is needed in order to position sub menus */
		max-width: 100%;
		width: inherit;
	}

	#main-nav li a  {
		display: block;
		height: 30px;
		line-height: 30px;
		padding: 0 15px;
	}

	#main-nav ul ul { /* this targets all sub menus */
		display: none; /* hide all sub menus from view */
		position: absolute;
		top: 30px; /* this should be the same height as the top level menu -- height + padding + borders */
	}

	#main-nav ul ul li { /* this targets all submenu items */
		float: none; /* overwriting our float up above */
		width: 150px; /* set to the width you want your sub menus to be. This needs to match the value we set below */
		line-height: 30px;
	}

	#main-nav ul ul li a { /* target all sub menu item links */
		padding: 0 5px; /* give our sub menu links a nice button feel */
	}

	#main-nav ul li:hover > ul {
		display: block; /* show sub menus when hovering over a parent */
	}

	#main-nav ul ul li ul {
		display: none;
		width: inherit;
		/* target all second, third, and deeper level sub menus */
		left: 150px; /* this needs to match the sub menu width set above -- width + padding + borders */
		top: 0; /* this ensures the sub menu starts in line with its parent item */
	}
}

@media screen and (min-width: 800px){
	
	input[type=checkbox]{
		display: none !important;
	}
	
	.show-menu{
		display:none;
	}
	
	#main-nav   {
		display: block;
		height: 30px; /* set to the height you want your menu to be */
	}

	#main-nav ul    {
		margin: 0; padding: 0; 
	}

	#main-nav li    {
		display: block;
		float: left;
		line-height: 30px; /* this should be the same as your #main-nav height */
		height: 30px; /* this should be the same as your #main-nav height */
		margin: 0; padding: 0; 
		position: relative; /* this is needed in order to position sub menus */
		max-width: 100%;
		width: inherit;
	}

	#main-nav li a  {
		display: block;
		height: 30px;
		line-height: 30px;
		padding: 0 15px;
	}

	#main-nav ul ul { /* this targets all sub menus */
		display: none; /* hide all sub menus from view */
		position: absolute;
		top: 30px; /* this should be the same height as the top level menu -- height + padding + borders */
	}

	#main-nav ul ul li { /* this targets all submenu items */
		float: none; /* overwriting our float up above */
		width: 150px; /* set to the width you want your sub menus to be. This needs to match the value we set below */
		line-height: 30px;
	}

	#main-nav ul ul li a { /* target all sub menu item links */
		padding: 0 5px; /* give our sub menu links a nice button feel */
	}

	#main-nav ul li:hover > ul {
		display: block; /* show sub menus when hovering over a parent */
	}

	#main-nav ul ul li ul {
		display: none;
		width: inherit;
		/* target all second, third, and deeper level sub menus */
		left: 150px; /* this needs to match the sub menu width set above -- width + padding + borders */
		top: 0; /* this ensures the sub menu starts in line with its parent item */
	}
}

/* Navigation - fonts and colors */

#main-nav .current-menu-item a,
#main-nav .current_page_item a {
    background-color: rgba(250, 250, 250, 0.2);
}

#main-nav a:hover {
	background-color: #00BCD4;
}

#main-nav{
	text-align: right;
	background-color: rgba(0, 0, 0, 0.8);
}

#main-nav ul ul li {
	background-color: rgba(0, 0, 0, 0.9);
}

#main-nav a:link{
	text-decoration: none;
	color: #ffffff;
}

#main-nav a:visited{
	color: #ffffff;
}

#main-nav a:hover{
	color: #ffffff !important;
}


/* Secondary Navigation */

.menu li {
	text-decoration: none;
	display: inline-block;
	margin: 20px 15px;
	list-style: normal;
}

.menu li a{
	text-decoration: none;
	color: #ffffff;
}

.menu li a:visited{
	text-decoration: none;
	color: #ffffff;
}

.menu li a:hover{
	text-decoration: none;
	color: #B2EBF2;
}

/* ----------------------------------------------
------------------ 4. main-content --------------
-----------------------------------------------*/

/* Box Model - Main Content */

@media screen and (max-width:799px){
	
	.main-content{
		max-width: 100%;
		width: 100%;
		margin: 0 auto;
		display: block;
	}
	
	.entry-container{
		max-width: 90%;
		width: 100%;
		margin: 5%;
		margin-bottom: 0;
	}
	
	.entry-content p img,
	.entry-content div,
	.entry-content div img{
		max-width: 100% !important;
		height: auto;
	}
	
	.archive-entry-container,
	.entry-container-page,
	.entry-container-single,
	.pagination,
	.text-content-wraper{
		max-width: 90%;
		width: 100%;
		margin: 0 auto;
		margin-bottom: 20px;
		padding: 5%;
	}
	
	.featured-image img{
		max-width: 100%;
		width: 100%;
		height: auto;
	}
	
}

@media screen and (min-width:800px){
	
	.content-wraper{
		max-width: 1024px;
		width: 96%;
		height: auto;
		margin: 0 auto;
		padding: 2%;
	}
	
	.main-content{
		max-width: 68%;
		width: 100%;
		margin: 0 auto;
		padding: 0 2% 0 0;
		display: inline-block;
	}
	
	.entry-container{
		max-width: 100%;
		width: 100%;
		margin: 0 auto;
		margin-bottom: 20px;
		padding: 0;
	}
	
	.entry-content p img,
	.entry-content div,
	.entry-content div img{
		max-width: 100% !important;
		height: auto;
	}
	
	.entry-container-page,
	.entry-container-single,
	.pagination,
	.text-content-wraper{
		max-width: 90%;
		width: 100%;
		margin: 0 auto;
		margin-bottom: 20px;
		padding: 5%;
	}
	
	.featured-image img{
		max-width: 100%;
		width: 100%;
		height: auto;
	}
	
}

/* main-content - fonts and color */
@media screen and (max-width: 600){
	.entry-title a{
		font-size: 1em !important;
	}
}

.social{
	text-align: right;	
}

.tag-links li{
	margin: 5px 2px !important;
	display: inline-block;
}

.tag-links li a{
	display: block;
	padding: 0 10px;
	color: #00BCD4 !important;
	border: 1px solid #00BCD4;
}

.tag-links li a:visited{
	background-color: none;
	color: #00BCD4 !important;
}

.tag-links li a:hover{
	background-color: #00BCD4;
	color: #ffffff !important;
}

/* post navigation */

.post-nav-prev ,
.post-nav-next {
	font-size: 0.9em;
	text-align: right;
}
.post-nav-prev{
	padding-bottom: 20px;
}
.post-nav-next{
	padding-top: 20px;
}
.post-nav-prev a:link,
.post-nav-next a:link{
	text-decoration: none;
	color: #00BCD4;
}
.post-nav-prev a:visited,
.post-nav-next a:visited{
	color: #00BCD4;
}
.post-nav-prev a:hover,soci
.post-nav-next a:hover{
	color: #4DD0E1;
}

/* article */
.archive-entry-container,
.pagination,
.entry-container,
.content-search{
	background-color: rgba(255,255,255,0.9);
	color: #616161;
}

.entry-container-page,
.entry-container-single{
	background-color: #ffffff;
	color: #616161;
}

.entry-container-single img{
	max-width: 100%;
	width: 100%;
	height: auto;
}

.cat_links ,
.article-footer{
	font-size: 0.8em;
	padding-top: 10px;
}

.article-footer a:link{
	text-decoration: none;
	color: #00BCD4;
}

.article-footer a:visited{
	text-decoration: none;
	color: #00BCD4;
}

.article-footer a:hover{
	color: #00838F;
}

.entry-header{
	padding-bottom: 10px;
}

.entry-title a:link{
	font-family: inherit;
	text-decoration: none;
	color: #00BCD4;
}

.entry-title a:visited{
	color: #26C6DA;
}

.entry-title a:hover{
	color: #00ACC1;
}

.author,
.date{
	color: #00BCD4;
}

.entry-content a:link{
	text-decoration: none;
	border-bottom: 1px #00ACC1 dotted;
	color: #00ACC1;
}

.entry-content a:visited{
	color: #00BCD4
}

.entry-content a:hover{
	color: #26C6DA
}

/* ----------------------------------------------
------------------ 5. Sidebar -------------------
-----------------------------------------------*/

/* Sidebar - Box Model */

@media screen and (max-width:799px){
	
	.sidebar{
		max-width: 100%;
		width: 100%;
		margin: 0 auto;
	}
	
	.sidebar-container{
		display: block;
		max-width: 90%;
		width: 100%;
		padding: 5%;
	}
	
}

@media screen and (min-width: 800px){
	
	.sidebar{
		display: inline-block;
		max-width: 30%;
		width: 100%;
		vertical-align: top;
	}
	
	.sidebar-container{
		display: block;
		max-width: 100%;
		width: 100%;
		padding-top: 5%;
	}
	
	.sidebar-container li{
		padding: 2% 5%;
	}
}

/* Sidebar - colors and fonts */

.sidebar{
	background-color: rgba(255,255,255,0.9);
	color: #616161; 
}

/* search - sidebar */

.search-field{
	border: none;
	background-color: #ffffff;
	margin-top: 10px;
	padding: 0 5px;
} 

.search-submit{
	border: none;
	background-color: #00BCD4;
	color: #ffffff;
	margin-top: 10px;
} 
.search-submit:hover{
	background-color: #00838F;
	cursor: hand;
}

/* nav - sidebar */
.menu-sidebar-container li{
	background-color: #00BCD4;
	margin: 0 2px !important;
	padding: 2px 10px;
}

.menu-sidebar-container li:hover{
	background-color: #4DD0E1;
}

.menu-sidebar-container li a:hover{
	color: #ffffff !important;
}

.widget{
	margin-bottom: 15px;
}

.widget_recent_comments ul li,
.widget_recent_entries ul li{
	border-bottom: 1px dotted #cccccc;
}

#feedburner-email-subscription-2{
	background-color: #00ACC1 !important;
	color: #ffffff;
	padding: 5%;
	margin-bottom: 0px !important;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

#feedburner-email-subscription-2 input{
	color: #cccccc;
}

.widget_categories li a{
	color: #ffffff;
}

.widget_categories li{
	background-color: #00BCD4;
	margin: 5px 2px !important;
	padding: 2px 10px;
	display: inline-block;
}

.widget_categories li:hover{
	background-color: #4DD0E1;
}

.widget_categories li a:hover{
	color: #ffffff !important;
}

.btn-submit{
	border: none;
	background-color: #00838F;
	color: #ffffff;
} 

.btn-submit:hover{
	background-color: #00BCD4;
	cursor: hand;
}

.body-footer a:link{
	color: #ffffff;
}

.body-footer a:visited{
	color: #ffffff;
}

.body-footer a:hover{
	color: #cccccc;
}
/* ----------------------------------------------
-------6. Footer --------------------
-----------------------------------------------*/

/* Footer - Box Model */

.body-footer{
	display: inline-block;
	width: 100%;
	border-top: 2px solid #ffffff;
	padding-bottom: 20px;
	margin-top: 20px;
}

/* Footer - fonts and colors */

.body-footer{
	font-size: 0.9em;
	color: #ffffff;
	text-align: center;
	background-color: #00BCD4;
}

/* ----------------------------------------------
-------7. Comments and Replies --------------------
-----------------------------------------------*/

/* comments and replies  */
.comments-title{
	font-size: 1.2em;
}

.comment-author img{
	max-width: 30px;
	width: 100%;
	height: auto;
}

.comment-list  .even{ 
	background-color: #B2EBF2; 
} 

.comment-list .odd{
	
	background-color: #E0F7FA;
}

.comment{
	margin: 10px 0;
	padding: 10px;
	list-style-type: none;
}

.comment p{
	padding: 10px 0;
}

.comment-meta a{
	text-decoration: none;
	font-size: 0.8em;
}

.reply a:link{
	max-width: 70px;
	width: 100%;
	display: block;
	color: #ffffff;
	padding: 5px;
	text-decoration: none;
	background-color: #00ACC1;
	text-align: center;
}

.reply a:visited{
	background-color: #00ACC1;
	color: #ffffff;
}

.reply a:hover{
	background-color: #26C6DA;
	color: #ffffff;
}

#comment{
	max-width: 96%;
	width: 100%;
	margin: 2% 0;
	padding: 2%;
	border-color: #00BCD4;
}

#respond p{
	padding-top: 5px;
}

#respond a{
	text-decoration: none;
}

#respond input{
	border: 1px solid #00BCD4;
	padding: 5px;
}

#respond #submit{
	background-color: #00BCD4;
	color: #ffffff;
}

#respond #submit:hover{
	background-color: #00838F;
}