* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: rgb(61, 146, 201);
}

a.page-nav {
	color:black;
	font-size: 18pt;
	text-decoration: underline;
	margin: 1em;
}

a.next {
	float: right;
	clear: none;
}

a.prev {
	float: left;
	clear: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}

h3 {
    font-weight: 100;
}

/* LAYOUT CSS */
.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

#layout {
    padding: 0;
}

.header {
    text-align: center;
    top: auto;
    margin: 3em auto;
	position:relative;
}

.sidebar {
    background: rgb(154, 51, 52);
    color: #fff;
}

.brand-title,
.brand-tagline {
    margin: 0.2em 0 0 0;
}

.brand-title {
    text-transform: uppercase;
	font-family: 'Lalezar', cursive; 
	font-size:36pt;
	font-style: italic;
	font-weight: bold;
	line-height:1em;
}

.brand-title a {
	color:inherit;
}

.brand-title a:hover a:focus {
	color:inherit;
	font-style:inherit;
}

.brand-tagline {
    font-weight: 300;
    color: rgb(0, 0, 0);
}

.nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav-item {
    display: inline-block;
}

.nav-item a {
    color: #fff;
	font-weight: bold;
    margin-top: 1em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 100%;
}
.nav a:hover,
.nav a:focus {
    border: 3px solid black;
	color: black;
    text-decoration: none;
}

/*
ul.img-inline {
	position:absolute;
	bottom:0;
	width:100%;
	text-align: center;
}*/

.nav .links ul {
	padding:0;
}

.nav .links {
	width:100%;
	text-align:center;
	line-height:2.5em;
}

.nav .links a {
	font-size:24pt;
	color:black;
}

.nav .links li {
	border-bottom: 2px solid #000;
	list-style:none;
	padding:0;
	margin-top:1em;
}

ul.img-inline {
	padding:0;
	margin-top:3em;
/*	margin-left: -2em;*/
	text-align:center;
}

ul.img-inline img:hover {
	transform: scale(1.5,1.5);
}

ul.img-inline a:hover {
	border:none;
}

ul.img-inline a:visited {
	border:none;
}

ul.img-inline a:active{
	border:none;
}

ul.img-inline li{
	display: inline;
	list-style-type:none;
}

.nav .tag-cloud {
	font-size: 24pt;
	padding:0;
	display: none;
}

.nav a {
	color: black;
	margin:0;
	line-height: 0em;
}

.header a:hover {
	border: none;
	color: white;
}

.menu-header {
	background-color:#990000;
	margin-top: 0.5em;
	border: 1px solid black;
	width:100%;
	color: #fff;
    letter-spacing: 0.05em;
    text-transform: uppercase;
	font-size:100%;
	font-weight: bold;
}


.content-subhead {
    text-transform: uppercase;
    color: #aaa;
    border-bottom: 1px solid #eee;
    padding: 0.4em 0;
    font-size: 80%;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.content {
    padding: 2em 1em 0;
	overflow: auto;
}

.post {
    padding: 0 2em 2em 0;
	/*border: 1px solid #000;*/
}
.post-title {
    font-size: 2em;
    color: #222;
    margin-bottom: 0.2em;
}
 .post-title a {
	font-size: inherit;
	color: inherit;
 }

.post-avatar {
    border-radius: 50px;
    float: right;
    margin-left: 1em;
}
.post-description {
    font-family: Georgia, "Cambria", serif;
    color: #444;
    line-height: 1.8em;
	word-wrap: break-word;
}

.post-description img {
	float: right;
	vertical-align: top;
	width: 30%;
}

.post-meta {
    color: #999;
    font-size: 90%;
    margin: 0.5em 0 1em 1em;
	line-height: 2em;
}

.post-category {
    margin: 0.5em 0.1em 0 0.3em;
	line-height: 1.5em;
    padding: 0.3em 1em;
    color: #fff;
    background: #999;
    font-size: 100%;
	font-weight:bold;
}
    .post-category-design {
        background: #5aba59;
    }
    .post-category-pure {
        background: #4d85d1;
    }
    .post-category-yui {
        background: #8156a7;
    }
    .post-category-js {
        background: #df2d4f;
    }

.post-images {
    margin: 1em 0;
}
.post-image-meta {
    margin-top: -3.5em;
    margin-left: 1em;
    color: #fff;
    text-shadow: 0 1px 1px #333;
}

.post-content {
	overflow: hidden;
}

.post-content img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width:100%;
}


.ad-sense {
	text-align:center;
}

.box {
	margin:0;
	padding:0.5em;
	background-color:#f0f3f3;
}

.footer {
    text-align: center;
    padding: 1em 0;
}
.footer a {
    color: #ccc;
    font-size: 80%;
}
.footer .pure-menu a:hover,
.footer .pure-menu a:focus {
    background: none;
}

.nav {
	display:none;
}

.info, .success, .warning, .error, .validation {
	border: 1px solid;
	margin: 10px 0px;
	padding: 15px 10px 15px 50px;
	background-repeat: no-repeat;
	background-position: 10px center;
	max-width: 500px;
}

.info {
	color: #00529B;
	background-color: #BDE5F8;
}
.success {
	color: #4F8A10;
	background-color: #DFF2BF;
}
.warning {
	color: #9F6000;
	background-color: #FEEFB3;
}
.error{
	color: #D8000C;
	background-color: #FFBABA;
}
.validation{
	color: #D63301;
	background-color: #FFCCBA;
}

input, textarea {
	width:100%;
	max-width:500px;
}

img[alt~="AWS"] {
	float:left;
	margin: 0px 10px 2px 10px;
	width: 30px;
}	

@media (min-width: 1024px) {
/*Larger than 768*/
    .content {
        padding: 2em 0 0 2em;
		margin: 0 0 0 20%;
    }

    .header {
        margin: 0 2em 0;
        text-align: center;
    }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
    }

	.nav {
		display: block;
		margin-top: 20%;
	}
	
	.menu-btn {
		display: none;
	}
	
	.nav .links {
		text-align:right;
	}
	.nav .tag-cloud {
		display: block;
		margin-top: 50%;
	}
	
	.post {
		clear: none; 
		margin-left:-4px;
	}
	.post-content img {
		display: block;
		margin-left: auto;
		margin-right: auto;
		/*width: initial;
		float: left;
		margin: 1em 1em 1em 0;*/
	}
	
	img[alt~="AWS"] {
		float:left;
		margin: 0px 10px 2px 10px;
		width: 30px;
	}	
	.post-content {
		margin-bottom: 2em;
	}
	
	input, textarea {
		width: initial;
	}
}

@media (device-width: 768px) {
	.nav .tag-cloud {
		display: none;
	}
}