/* LAYOUT */

img, embed, object, video, iframe {
	max-width:100%;
}

#page {
	width:960px; 
	margin: 0 auto; 
	padding:30px 0;
	margin-bottom:30px;
	}

.logo {
	max-width:295px;
	margin: 0 auto;
}

ul.menu{
	text-align:center;
	padding-left:0;
}
ul.menu li, ul.page-nav li {
	display: inline-block;
	margin: 15px 10px;
}

#main {
	max-width:705px; 
	float:left;
	margin-top:30px; 
}

.month {
	padding-bottom:30px;
}

.month ul {
	margin-bottom:30px;
}

.months {
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

#sidebar {
	max-width:203px; 
	margin-left:20px;
	padding-right:10px;
	float:right;
}

.month-nav {
	float:left;
	clear:both;
	width:100%;
}

ul.page-nav {
	text-align: center;
	margin-top:50px;
	-webkit-padding-start:0;
}

ul.page-nav li {
	display:inline;
}

.title {
	padding-left:10px;
}

.footer, #main {
	margin-bottom:50px;
}

/* PRETTIFICATION */
body {
	font: normal 100% "brandon grotesque", "helvetica neue", helvetica, verdana, sans-serif;
	background-image:url('../img/sarahjbray-header-sky.png'), url('../img/sarahjbray-header-water.png'); 
	background-repeat:repeat-x, repeat-x;
	background-position:top left, bottom left;
	background-size:85%, 85%;
	}

hr {
	max-width:50%;
	border-top:none;
	border-left:none;
	border-right:none;
	height:1px;
	margin:30px auto;
}

h2 { 
	font-weight:300;
	margin-top:40px;
	line-height:1.4em;
}

.single a, .page a {
	color:#43d0d7;
}

.single a:hover, .page a:hover {
	color:#000;
}

ul.menu li, ul.page-nav li {
	list-style-type: none;
	text-transform: uppercase;
	}
ul.menu li a, ul.page-nav li a {
	font-weight:200;
	font-size:.95em;
	letter-spacing:.1em;
}
ul.menu li a, ul.page-nav li a, #sidebar ul li a {
	text-decoration: none;
	color:#000;
	}
ul.menu li a:hover, ul.page-nav li a:hover, #sidebar ul li a:hover {
	color:#43d0d7;
	}

h1 {
	font-size:1em;
	text-transform: uppercase;
	text-align: center;
}

.home h1 {
	padding-bottom:17px;
}

.single h1 {
	font-size:1.2em;
	-webkit-margin-before:0;
	-webkit-margin-after:0;
}

article .meta {
	margin-top:0;
	padding:.2em 0 2em 0;
	text-align:center;
	font-size:.85em;
	font-style: italic;
	font-weight: 200;
}

article {
	font-size:.9em;
	line-height:1.6em;
}

article blockquote {
	font-style:italic;
	font-weight: 200;
	padding:1em 5%;
}

article ul {
	margin:25px 5% 25px 0;
}

.month ul, #sidebar ul, .page-nav ul {
	list-style-type: none;
	padding:0;
}

.date {
	font-weight: bold;
}

.month {
	font-size: .875em;
	line-height:1.3em;
}

.month a {
	text-decoration: none;
	color:#000;
	font-weight:300;
}

.month a:hover {
	color:#43d0d7;
}

.cal-block {
    border-bottom: 1px dotted #888;
    text-align: justify;
    line-height:2em;
    margin-top:-15px;
}

.container {
    display: block;
}
.line {
    border-bottom: 1px dotted #888;
    padding-bottom:.45em;
}

.mailing-list h2 {
	font-size:1em;
	margin-top:27px;
}

#sidebar h2 {
	font-weight:500;
	font-size:1.075em;
}

.browse a h2 {
	color:#000;
	text-decoration:none;
	border:none;
}

.browse a:hover h2 {
	color:#43d0d7;
}

#sidebar .browse h2 {
	text-transform: uppercase;
	font-weight:400;
	letter-spacing:.025em;
	line-height:1em;
	margin-top:45px;
	margin-bottom:10px;
}

.browse ul {
	margin-top:0;
	padding-top:0;
}

.browse ul li {
	padding:2px 0;
}

.subject ul li, .type ul li {
	text-transform: capitalize;
}

form input[type="email"] {
	border:1px dotted #888;
	padding:9px 10px;
}

form input[type="submit"] {
	border:1px dotted #888;
	padding:9px 10px;
	background-color: transparent;
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;
}

/* .mailing-list form input[type="text"] {
	width:65%;
} */

#sidebar ul {
	font-size:.925em;
}

.connect {
	margin-top:20px;
	font-weight:500;

}

.connect, .browse {
	border-bottom:1px dotted #888;
	padding-bottom:1em;
	margin-bottom:2em;
}

#sidebar .connect ul li a, #sidebar .mailing-list h2 a {
	color:#43d0d7;
}

#sidebar .connect ul li a:hover, #sidebar .mailing-list h2 a:hover {
	color:#000;
}

.footer {
	font-size: .875em;
	line-height:1.3em;
	margin-bottom:50px;
}

.signature {
	font-style: italic;
	text-align: center;
}

.copyright {
	font-size:.8em;
	font-style:italic;
	padding-top:1em;
}

.footer a {
	color:#43d0d7;
	text-decoration: none;
}

.footer a:hover {
	color:#000;
}

.caption {
	font-size:12px;
	margin-top:-15px;
	margin-bottom:30px;
	font-style:italic;
}

/* Queries */

@media screen and (max-width: 960px) {
	#page {
		width:100%;
		max-width:768px;
	}

	.logo {
 		width:50%;
 		max-width:500px;
 	}

	#main {
		width:62%;
		max-width:500px;
	}

	#sidebar {
		width:30%;
		max-width:220px;
		margin-right:2px;
	}

	.months {
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
	    -moz-column-count: 1; /* Firefox */
	    column-count: 1;
	    -webkit-column-gap: 0; /* Chrome, Safari, Opera */
	    -moz-column-gap: 0; /* Firefox */
	    column-gap: 0;
}

	ul.page-nav {
		margin-top:20px;
	}
}

 @media screen and (max-width: 520px) {
 	#page {
 		width:100%;
 		max-width:520px;
 	}
 	.logo {
 		width:75%;
 	}

 	#main {
 		width:100%;
 		margin-top:0;
 	}

 	.month {
 		width:100%;
 	}
 	#sidebar {
		width:100%;
		max-width:520px;
		float:none;
		margin:0;
	}

	ul.menu {
		margin-right:0;
	}

 	ul.menu li, ul.page-nav li {
		margin:10px 5px;
	}

	ul.menu, ul.page-nav {
		-webkit-padding-start:0;
	}

	ul.page-nav {
		margin-top:15px;
	}
	.type, .subject {
		display: inline-block;
		vertical-align: top;
	}

	.type {
		padding-right:35px;
	}

	#main {
		margin-bottom:30px;
	}
 	ul.menu li a {
 		font-size:.93em;
 	}

 	.connect {
		margin-bottom:0;
	}

	.footer {
		margin-bottom:15px;
	}
 }