/*  
Theme Name: Regionbibliotek Sthml
Theme URI: http://oddalice.se/
Description: A custom theme created for Regionbibliotek Stockholm by Odd Alice
Version: 1.2
Tags: White, Two-columns, Fixed-width
Author: Odd Alice
Author URI: http://oddalice.se/
License: GNU General Public License
License URI: license.txt
*/

/* =====
   RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ======
   LAYOUT */

#logo{
	width: 166px;
	height: 40px;
	background: url(images/logo.png);
	display: inline-block;
	margin: 10px 0 0 0;
}

.right,
.alignright,
.nav-next,
div#sidebar-container {
	float: right;
}

.left,
.alignleft,
.nav-previous,
div#content {
	float: left;
}

.clear-both { clear: both; }

.pos {
	margin: 0 10px;
}

#bottom-bar-wrap	{
	position: fixed;
	bottom: 0;
	height: 80px;
	width: 100%;
	background: url(images/bottom-shadow.png) repeat-x top;
	z-index: 10000;
}
#bottom-bar {
	width: 100%;
	margin-top: 20px;
}

.calendar-header-date{
	border-bottom: 5px solid #333;
	width: auto;
	margin: 0 20px;
	font-size: 30px;
	line-height: 150%;
	font-family: sans-serif;
	font-weight: 600;
	color: #333;
}
.calendar-date-column{ 
	width: 20%; 
	float:left;
	padding: 20px 0;
	margin-left: 5%
}
.calendar-date-column h2{ font-size: 62px; color:#333; margin-bottom: 5px; line-height: 100%; }
.calendar-date-column strong, .calendar-date-column span{
	text-transform: uppercase;
	color: #777777;
	font-size: 16px;
	font-family: sans-serif;
	line-height: 150%;
}
.calendar-content-column{ 
	width: 74%; 
	float:left;
	padding: 20px 0;	
}
.calendar-content-column .entry-summary{
	line-height: 150%;
}
	
	/* 	Set colour of bottom bar depending on current page  */
	#bottom-bar { background: #9e0054;  } /* FALL BACK */
	body.home #bottom-bar { background: #58ac25; } /* FRONTPAGE */
	body.blog #bottom-bar, body.single-post #bottom-bar { background: #f39800; } /* BLOGGEN */
	body.post-type-archive-calendar #bottom-bar, body.single-calendar #bottom-bar { background: #e52aa5; } /* KALENDARIUM */
	body.post-type-archive-project #bottom-bar, body.single-project #bottom-bar { background: #756dab; } /* PROJEKT */
	body.post-type-archive-published_works #bottom-bar, body.single-published_works #bottom-bar { background: #006a8c; } /* PUBLICERAT */
	body.page-template-pagetemplate-boat-php #bottom-bar { background: #01b5dd; } /* BOKBTEN */
		
	/*
	blue		#01b5dd
	green		#58ac25
	orange 		#f39800
	petrol		#006a8c
	pink		#e52aa5
	purple		#756dab
	red			#9e0054
	*/
	
	#site-header img { margin: 10px 0 0 15px; }

#wrap-outer {
	margin: 0 auto;
}
	#wrap-inner { width: 100%; float:left; background-color: #fff; }

#header {}
	#page-header { width: 100%; float: left; margin: 20px 0; }
		#page-header .section-header { padding: 0 10px; }
	#featured-image { margin-bottom: 30px; }
	#sidebar-container #featured-image { margin-bottom: 10px; }

#blog {
	width: 100%;
	float: left;
	clear: both;
	margin-bottom: 20px;
}

.navigation { display: block; height: 30px; padding-left: 20px; }
.navigation .nav-previous { }
.navigation .nav-next { }

div.post, 
div.page,
div.hentry 
	{ margin-bottom: 30px; padding-left: 20px; }

div#comments { padding-left: 20px; }

div#sidebar-container {}
	ul#sidebar { padding-right: 20px; }
		li.widget-container { margin-bottom: 40px; padding-right: 20px; }
			li.widget-container li { margin-bottom: 10px; }
	
#special-sidebar-meta-box { margin: 5px 20px 20px 0; }
#special-sidebar-meta-box .wrapper { margin-bottom: 10px; background: #ccc url(images/tag.png) no-repeat right top; }
#special-sidebar-meta-box .wrapper .content { padding: 10px 10px 10px 40px; }

ul#center-content-sidebar { 
	margin-left: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #999;
}

/* blog post */	
	#post-footer {
		border-top: 1px solid #ccc;
		padding-top: 15px; 
	}
	#post-related {
		width: 350px;
		border-right: 1px solid #ccc;
		float: left;
		min-height: 60px;
	}
	#post-related ul { margin-top: 5px; }
	#post-social {
		width: 220px;
		float: right;
	}
	#post-social ul li.facebook {
		margin-bottom: 8px;
	}
	
	#special-sidebar-meta-box .wrapper .post { background: url(images/icon_small_tag.png) no-repeat 10px 10px; }
	
	#disqus_thread { background-color: #e9e9e9; padding: 0px 20px 0px 20px; margin: 0px 20px 0px 20px; }
	#disqus_thread #dsq-content { padding: 1px 0px 1px 0px; }
			
/* front page */

/* published-work */
	#special-sidebar-meta-box .wrapper .published-work { background: url(images/icon_small_book.png) no-repeat 10px 10px; }
	
	#box-link-published-work { 
		padding: 15px 10px 15px 50px; 
		margin-bottom: 20px; 
		background-image: url(images/icon_medium_pdf.png);
		background-repeat: no-repeat;
		background-position-x: 7px;
		background-position-y: center;  
		border: 2px solid #01b5dd; 
		font-weight: bold; 
	}
	#other-published-work ul { }
	#other-published-work ul li { display: block; padding: 10px; margin-bottom: 10px; background: #ccc; }
	#other-published-work ul li .book-thumbnail { float: left; margin-right: 10px; }
	#box-other-published-work {}
		.book-other-published-work { float: left; padding: 10px; margin-bottom: 10px; background: #ccc; }
		.book-thumbnail { float: left; margin-right: 10px; }
		
/* calendar */
	#special-sidebar-meta-box .wrapper .calendar { background: url(images/icon_small_calendar.png) no-repeat 10px 10px; }
	
	#box-link-calendar { padding: 10px; margin-bottom: 20px; border: 2px solid #01b5dd; font-weight: bold; }

/* project */
	#special-sidebar-meta-box .wrapper .project { background: url(images/icon_small_project.png) no-repeat 10px 10px; }

/* Sidebar: Twitter (see more under type and links) */
	ul#sidebar li.RBS_Twitter_Widget div {
		background: url(images/icon_sidebar_twitter.gif) no-repeat 0px 0px; 
		padding-left: 45px;
	}

/* Sidebar: Menu */
	ul#sidebar li.widget_nav_menu div { }
	ul#sidebar li.widget_nav_menu div ul.menu { }
	ul#sidebar li.widget_nav_menu div ul li { line-height: 1.3em; }
	ul#sidebar li.widget_nav_menu div ul.menu ul.sub-menu { padding-left: 10px; }
	
	ul#sidebar li.widget_links ul li { line-height: 1.3em; }
			
	#footer p.small-copy { margin-top: 5px; }
	
	#sidebar li ul li{ line-height: 150%; }

/* ========
   DEFAULTS */

body {
	background-color: #f2edf0;
	font-family: Georgia, serif;
}


/* ====
   TYPE */

#menu, h1, h2, #special-sidebar-meta-box, #footer, #post-related, .navigation {
	font-family: Helvetica, sans-serif;
}

#menu {
	font-size: 12px;
}

#menu, #footer {
	text-transform: uppercase;
	color: #888;
}	 
#footer a {
	color: #555;
}
#footer a.wordpress {vertical-align: -70%; padding: 0 5px; }
#footer a.oddalice {vertical-align: -20%; padding: 0 5px; }
#footer a.wordpress img, #footer a.oddalice img { opacity: 0.5; }
#footer p.small-copy {
	font-size: 12px;
}

h1.section-header { line-height: 0.9em; }
h1.section-header em { color: #58ac25; font-style: normal; display: block; }
h1.section-header em.archive { color: inherit; display: inline; }
h1.section-header em.search { color: inherit; font-style: italic; display: inline; }

.navigation { font-size: 14px; }

#content {
	color: #333;
}

.entry-content p, .entry-excerpt p {
	line-height: 24px;
	margin-bottom: 16px;
}

h1.entry-title {
	margin: 5px 0 10px 0;
	padding-bottom: 10px;
	font-size: 36px;
	font-weight: 600;
	letter-spacing: 1px;
	border-bottom: 1px solid #ccc;
}

h2.entry-title {
	font-size: 24px;
	margin: 5px 0 10px 0;
}
.post-type-archive-calendar h2.entry-title span.calendar-date {
	color: #999;
	display: block;
	font-size: 14px;
	font-weight: normal;
}
.post-type-archive-calendar h2.entry-title span.calendar-date em {
	font-weight: bold;
	font-style: normal;
	color: inherit;
	font-size: inherit;
	text-transform: uppercase;
}
.home h2.entry-title span.sticky {
	color: #999;
	display: block;
	font-size: 14px;
	font-weight: normal;
}

.entry-content ol, .entry-content ul {
	margin: 0 20px 16px 20px;
	padding-left: 25px;
	color: #444;
}
.entry-content ol { list-style: decimal; }
.entry-content ul { list-style: square; }
.entry-content ol li, .entry-content ul li { margin-bottom: 8px; }
.entry-content ul li { list-style-type: none; }
.entry-content ul li:before { content: "\00BB  "; }
.entry-content blockquote { font-style: italic; padding-left: 20px; padding-right: 10px; color: #444; }
.entry-content blockquote p:before { content: "\201C"; }
.entry-content blockquote P:after { content: "\201D"; }

.sticky .entry-summary {
	padding-bottom: 30px;
	border-bottom: 1px solid #999;
}

#post-related { font-size: 14px; }
#post-related ul li { line-height: 1.6em; }

#special-sidebar-meta-box .wrapper .content p, h3.title-other-published-work { 
	font-size: 14px; 
	font-weight: bold; 
	line-height: 18px;
}
h3.title-other-published-work { margin-bottom: 5px; }

#special-sidebar-meta-box .wrapper .content span, 
#other-published-work ul li p span { 
	font-size: 12px; 
	color: #444; 
	font-weight: normal;
}

#box-link-published-work, #box-link-calendar {
	font-size: 14px;
}
#box-link-calendar { text-align: center; }

#sidebar {
	color: #666;
}

h2.widget-title, #other-published-work h2  {
	font-family: Helvetica, sans-serif;
	font-weight: bold;
	font-size: 18px;
	color: #333;
	margin-bottom: 5px;
}
#sidebar h2.widget-title { border-bottom: 1px solid #eee; padding-bottom: 5px; margin-bottom: 10px; }

#other-published-work ul li p {
	font-size: 14px;
}

li.widget-container p, li.widget-container ul, li.widget-container ol {
	font-size: 14px;
}

li.widget-container p {
	margin-bottom: 10px;
}

ul#sidebar li.RBS_Twitter_Widget div { font-family: Georgia, serif; font-size: 18px; }
ul#sidebar li.RBS_Twitter_Widget div span { display: block; font-size: 10px; text-transform: uppercase; color: #000; margin-top: 4px; }


/* =====
   LINKS */

a:link, a:active, a:visited { text-decoration: none; color: #000; }
a:hover { color: #000; text-decoration: underline; }

div.entry-summary a:link, 
div.entry-summary a:active,
div.entry-summary a:visited,
div.entry-content a:link, 
div.entry-content a:active,
div.entry-content a:visited 
	{ text-decoration: underline; color: #000; }
div.entry-summary a:hover, 
div.entry-content a:hover 
	{ color: #333; text-decoration: underline; }

#menu a { margin: 0 5px; color: #333; font-weight: bold; }



#post-related ul li a { border-bottom: 1px solid #333; text-decoration: none; }
#post-related ul li a:hover { border-bottom: none; text-decoration: none; }

#box-link-published-work a, #box-link-calendar a { color: #01b5dd; }

ul#sidebar li.RBS_Twitter_Widget div a { color: #ae005f; text-decoration: none; }
ul#sidebar li.RBS_Twitter_Widget div a:hover { color: #ae005f; text-decoration: underline; }
ul#sidebar li.RBS_Twitter_Widget div span a { color: #000; font-weight: bold; text-decoration: none; }
ul#sidebar li.RBS_Twitter_Widget div span a:hover { color: #000; font-weight: bold; text-decoration: underline; }


/* ==========================================.
   FIGURES AND EMBEDS */
   
img, figure,
.entry-content img, .entry-header img {
   max-width: 100%;
   height: auto;
}

img.alignleft {
	margin: 0 24px 24px 0;
}

img.alignright {
	margin: 0 0 24px 24px;
}

.wp-caption {
	max-width: 100%;
	text-align: center;
}

img.aligncenter,
.wp-caption.alignnone, .wp-caption.aligncenter {
	display: block;
	margin: 0 auto 24px auto; /* change to proper margins */
}

.wp-caption.alignleft {
    margin: 0 24px 24px 0; /* change to proper margins */
}

.wp-caption.alignright {
   margin: 0 0 24px 24px; /* change to proper margins */
}

.wp-caption img {
   border: 0 none;
   height: auto;
   margin: 0;
   padding: 0;
   width: auto;
}

p.wp-caption-text {
	color: #9B9B9B;
	font-size: 80%;
	line-height: 18px !important;
	margin: 8px 0 0 0 !important; /* change to proper margins */
	padding: 0;
}

.alignleft p.wp-caption-text {
	text-align: left;
}

.alignright p.wp-caption-text {
	text-align: right;
}

.gallery-caption {}

.wp-post-image {}

.product-image {
	margin-bottom: 24px;
}

.product-image img {
	height: auto;
	max-width: 250px;
}

.archive-grid-post img {
	height: auto;
	margin: 0 auto;
	max-width: 75%;
}

.featured-image img {
	display: block;
	height: auto;
	max-width: 100%;
}


/* ==========================================.
   MEDIA QUERIES */

/* Under 960 px */
/* @media only screen and (max-width: 480px) { */
@media only screen and (max-width: 959px) {

	#menu{ display: none; }
	
	#mobile-menu-trigger{
		display: block;
		z-index: 199999;
		position: fixed;
		right: 15px;
		top: 24px;
		color: #fff;
		height: 48px;
		cursor: pointer;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 12px;
		font-family: Helvetica, sans-serif;		
	}
	#mobile-menu a{
		display: block;
		width: 80%;
		line-height: 150%;
		padding: 20px 10%;
		background: #eee;
	}
	#mobile-menu{ 
		padding-top: 60px;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 12px;
		font-family: Helvetica, sans-serif;
		position: fixed;
		top: 0;
		left: 0; 
		right: 0;
	}
	#mobile-menu-wrapper{
		transition: margin ease 600ms;
		margin-top: -700px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		overflow: scroll;
	}
	#mobile-menu-wrapper.open{
		margin-top: 0;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: scroll;		
	}
	#mobile-menu.open{
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0; 
		right: 0;		
	}

	.column, #sidebar-container {
		width: 90%; /* One column */
		margin: 0 5%;
	}
	
	.widecolumn, #content {
		width: 90%; /* One column */
		margin: 0 5%;
	}
	
	.fullcolumn, #wrap-outer {
		width: 100%; /* Three columns */
	}
	
	#wrap-inner{ padding-top: 60px; }
	
	#menu { width: 100%; float: left; margin:0 10px:10px; padding: 10px 0; border-bottom: 1px solid #efefef; text-align: center; }	
	#bottom-bar #site-header { width: 100%; height: 60px; margin: 0 auto; background: url(images/squares.png) right no-repeat; }		

	.section-header { 
		font-family: "Helvetica Neue", Helvetica, sans-serif; 
		color: #818286;
		font-size: 40px;
		line-height: 72px;
		letter-spacing: -1px;
		font-weight: 300;
	}
	body.archive .section-header { 
		font-family: "Helvetica Neue", Helvetica, sans-serif; 
		color: #818286;
		font-size: 20px;
		line-height: 100%;
		letter-spacing: -1px;
		font-weight: 300;
	}
	body.archive h1.section-header em.archive{
		font-size: 40px;
		display: block;
		line-height: 100%;
	}
	
	/* Break word */
	h2.entry-title, .entry-summary{
		word-break: break-word;
	}

	#footer {
		width: 90%;
		
		float: left;
		clear: both;
		margin: 5%;
		padding-top: 20px;
		padding-bottom: 60px; /* For bottom bar */
		text-align: center;
		border-top: 1px solid #efefef;
		line-height: 
	}
	
	#featured-image img{ width: 100%; height: auto; }

	/* (used in example: <div id="content" class="widecolumn show-icons-loop">) */
	div.show-icons-loop div.post,
	div.show-icons-loop div.page,
	div.show-icons-loop div.calendar,
	div.show-icons-loop div.published_works,
	div.show-icons-loop div.project
		{ padding-left: 40px; margin-bottom: 30px; }
	div.show-icons-loop div.post { background: url(images/icon_large_tag.png) no-repeat 0px 5px; background-size: 20px 20px; }
	div.show-icons-loop div.calendar { background: url(images/icon_large_calendar.png) no-repeat 0px 5px; background-size: 20px 20px; }
	div.show-icons-loop div.published_works { background: url(images/icon_large_book.png) no-repeat 0px 5px; background-size: 20px 20px; }
	div.show-icons-loop div.project { background: url(images/icon_large_project.png) no-repeat 0px 5px; background-size: 20px 20px; }

	h1.entry-title {
		font-size: 28px;
	}
	
	h2.entry-title {
		font-size: 20px;
	}
	
	#post-related{ width: 100%; border-right: 0px; margin-bottom: 20px; }
	#post-social{ float:left; width: 100%; }
	
	.right, .alignright, .nav-next, div#sidebar-container{ float: left; margin: 0 5%; }
	#special-sidebar-meta-box{ margin: 5px 5px 20px 0; }
	
	div.post, div.page, div.hentry, div#comments{ padding-left: 0; }
	
	.calendar-date-column h2{
		font-size: 36px;
	}
	
	article p img, textarea{ max-width: 100%; }
	
	#bottom-bar-wrap	{
		position: fixed;
		top: 0;
		height: 60px;
		width: 100%;
		box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
		z-index: 10000;
	}
	#bottom-bar {
		width: 100%;
		margin-top: 0;
	}	
	
}

/* 960 px and up */
@media only screen and (min-width: 960px) {

	#mobile-menu, #mobile-menu-trigger{ display: none; }

	.column, #sidebar-container {
		width: 310px; /* One column */
	}
	
	.widecolumn, #content {
		width: 600px; /* Two columns */
	}
	
	.fullcolumn, #wrap-outer {
		width: 960px; /* Three columns */
	}
	#menu { width: 940px; float: left; margin-left:10px; padding: 10px 0; border-bottom: 1px solid #efefef; text-align: center; }	
	#bottom-bar #site-header { width: 960px; height: 60px; margin: 0 auto; background: url(images/squares.png) right no-repeat; }	

	.section-header { 
		font-family: "Helvetica Neue", Helvetica, sans-serif; 
		color: #818286;
		font-size: 72px;
		line-height: 72px;
		letter-spacing: -1px;
		font-weight: 300;
	}

	body.archive .section-header { 
		font-family: "Helvetica Neue", Helvetica, sans-serif; 
		color: #818286;
		font-size: 28px;
		line-height: 100%;
		letter-spacing: -1px;
		font-weight: 300;
	}
	
	body.archive h1.section-header em.archive{
		font-size: 72px;
		display: block;
		line-height: 100%;
	}

	#footer {
		width: 100%;
		float: left;
		clear: both;
		margin-top: 40px;
		margin-left: 10px;
		padding-top: 20px;
		padding-bottom: 100px; /* For bottom bar */
		text-align: center;
		border-top: 1px solid #efefef;
		line-height: 
	}

	/* (used in example: <div id="content" class="widecolumn show-icons-loop">) */
	div.show-icons-loop div.post,
	div.show-icons-loop div.page,
	div.show-icons-loop div.calendar,
	div.show-icons-loop div.published_works,
	div.show-icons-loop div.project
		{ padding-left: 85px; margin-bottom: 30px; }
	div.show-icons-loop div.post { background: url(images/icon_large_tag.png) no-repeat 25px 5px; }
	div.show-icons-loop div.calendar { background: url(images/icon_large_calendar.png) no-repeat 25px 5px; }
	div.show-icons-loop div.published_works { background: url(images/icon_large_book.png) no-repeat 25px 5px; }
	div.show-icons-loop div.project { background: url(images/icon_large_project.png) no-repeat 25px 5px; }


}

/* retina screens */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
    
	#logo{
		width: 166px;
		height: 40px;
		background: url(images/logo@2x.png);
		background-size: contain;
		display: inline-block;
		margin: 10px 0 0 10px;
	}
	
}