/*
Theme Name: Brooklin
Theme URI:
Author: Alexander Hellgren / Brooklin Kommunikation
Author URI: http://brooklin.se/
Description:
License: Proprietary
License URI: 
Tags: non-blog

*/

/**
 * 	TABLE OF CONTENTS
 * 
 * 1.0 Defaults
 * 
 * 2.0 Site structure
 * 
 * 3.0 Core elements
 * 
 * 4.0 Wordpress tags
 *
 * 5.0 Additional elements
 */

/* ´
 * 1.0 Defaults
 * ------------------
 * Resetting elements etc.
 * 
 */

*, *:after, *:before {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
html {
	min-height: 100%;
	height:100%;
	padding:0;
	margin:0;
}
body {
	min-height:100%;
	height:100%;
	margin: 0;
	padding:0;
	/*Fix for IE */
	font-size:16px;

	/*Text-egenskaper*/
	font-family:'Source Sans Pro', sans-serif;
	font-size:1em;
	color:#333;
}

/* Images */
.entry-content img,
.comment-content img,
.widget img {
max-width: 100%; /* Fluid images for posts, comments, and widgets */
}

img[class*="align"],
img[class*="wp-image-"] {
height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}

img.size-full {
width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}


/*
 * 2.0 Site structure
 * Positioning of header etc.
 *
 * Using positioning with 4px - 8px - 12px - 16px - 24px - 48px etc.
 */
 
 /* Template module dictating the standard width */

.site-module {
 	max-width:1000px;
 	margin:0 auto;
	min-width:320px;
	padding:0 1em;

 }
 
 /* A 100% width module centering its content & allowing for full width effects */
.site-module-wide {
	width:100%;
	margin:0;
	padding:0;
	min-width:320px;
}

#site-header {
	text-align:left;
	padding:1.5em 0 0;
}

/*Header specifics */
/*
#header-logotype-float-left {
	float:left;
}
#header-logotype-container {
	display:table;
	min-height:60px;

}
#header-logotype {
	display:table-cell;
	vertical-align:middle;
}
*/

#header-logotype {
	float:left;
}

#header-logotype img {
	height:100%;
	max-height:30px;
	
}
#site-header h1 {
	margin:0;
	padding:0;
	display:inline;
}	
/* Navigation */
/*
.menu-float-right {
	float:right;
}

.menu-main-menu-container {
	display:table;
	min-height:60px;
}
*/
.nav-menu {
	/*display:table-cell;
	vertical-align:middle;*/
	float:right;
	padding:1em 0;
	margin:0;
	list-style-type:none;
}



.nav-menu li {
	display: inline-block;
	font-family:'Lato', sans-serif;
	font-size:1.1em;
	font-weight:200;
	font-style:normal;
	text-align:justify;
	margin-left:1.4em;
	text-transform:uppercase;
}

.nav-menu li a {
	text-decoration:none;
	color:#333;
	display:block;
}

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



/* Site-main är nu bara en tom wrapper som styr utseende osv */
#site-main {
	width:100%;
	/*padding:0px 8px 24px 8px;*/
	padding:0 1em 1em;
	
}

#site-container {
	min-height:100%;
	padding:0;
	margin:0 0 -70px 0;
}

#site-container:after{
  content: "";
  display: block;
}
footer, #site-container:after 
{
  /* .push must be the same height as footer */
  height: 70px; 
}

/* 2016-05-16 Procrastinating and making the footer transparent */
footer {
    left: 0;
    bottom: 0;
    padding:2em 0 0 0;
    margin:0;
    width: 100%;
   /*background-color:#222;*/
   height:70px;
}

#footer-main {
	text-align:center;
}

#footer-main p, #footer-main a {
	color:#222;
	margin:0;
	font-size:1em;
}

/*
*
* 3.0 Core elements
*/

p {
	margin:0;
	padding:0;
	line-height:150%;

}

a {
	text-decoration:none;
	color:#444;
}
a:hover {
	text-decoration:none;
	color:#aaa;
}

h1, h2, h3, h4 {
	font-family:'Bitter', serif;
	font-weight:400;
	color:#333;
}

h1 {
	font-size:2.5em;
	margin:0;
	padding:0 0 24px 0;
}

h2 {
	font-size:3em;
	padding:0;
	margin:1em 0 1em;
	text-align:center;
	border-bottom:1px solid #ddd;
}

h2 header-left {
	text-align:left;
}
h3 {
	font-size:2em;
	padding:0;
	margin:0 0 1em;
}

h3 a {
	color:#333;
}

/* Separator */
/* Adds a border at the bottom of the element. Use alone w/ a module class or add to existing element. */
.site-separator {
	border-bottom:1px #DDD solid;
}

/* hr provides the same as above, although is to be used when semantically correct. */
hr {
	display:block;
	width:100%;
	border-bottom:1px #DDD solid;
	padding:0;
	margin:0 auto;
}

/*
 *
 * 4.0 Wordpress tags
 *
 *
 */
.entry-content p {
	margin-bottom:1em;
	font-size:1.1em;
}

/* Lite vanliga wordpress-taggar. */
.entry-details {
	font-size:1em;
	margin-bottom:1em;
}

/* Image centering etc.*/
.aligncenter {
	display:block;
	margin-left: auto;
	margin-right:auto;
}

/* Comment section */
.comment-section {
	margin:2em 0;
}

label[for=comment]
{
	display:block;
}
textarea #comment {
	display:block;
	width:100%;
	border:#aaa;
}
.form-allowed-tags
{
	display:none;
}


/*
 *
 * 5.0 Additional elements 
 *
*/


/*Clear-fix */
.clearfix {
	clear:both;
	overflow:auto;
}
.clearfix:after {
	clear:both;
	content: "";
	display:block;
}

/* Center vertically (CSS3) */
.vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}


/*General grid system. 2014-03 */

.grid {
	margin: 0;
	padding:0;
	margin-left:-12px;
}
.grid:after {
	content:"";
	display:table;
	clear:both;
}


/* Columns */

/*All columns*/

[class*="col-"] {
	float:left;
	padding-left:12px;
}

.col-1 {
	width:100%;
}
.col-2-3 {
	width:66.66%;
}

.col-1-3 {
	width:33.33%;
}

.col-1-2 {
	width:50%;
}

.col-1-4 {
	width:25%;
}

.col-3-4 {
	width:75%;
}

.col-1-8 {
	width:12.5%;
}

.col-7-8 {
	width:87.5%;
}

.profile {
	width:100%;	
	margin:0 0 24px 0;
	padding:0;
}

.profile-portrait {
	float:left;
	margin-right:12px;
}

.profile-portrait img {
	margin:0;
	padding:0;
	display:block;
}

.profile-caption {
	background-color:#666;
	color:#FFF;
	font-family:'Source Sans Pro', sans-serif;
	font-size:1.2em;
	font-weight:400;
	padding:6px;
	display:block;
}

.banner-text {
	font-family:'Bitter', serif;
	font-size:3em;
	text-align:center;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

/* Media queries for different screen sizes */

/* Supplement style for mobile version of Brooklin theme. Brooklin Kommunikation 2014 */

@media all and (max-width: 800px){
	
	#header-logotype, .nav-menu ul, .nav-menu, #header-logotype-container, .menu-main-menu-container {
		display:block;
		margin:0 auto;	
		float:none;
		text-align:center;
	}
	
	/*
	 * Slightly alter the padding of the menu.
	 */
	
	#site-header {
		padding:1em 0 0;
	}
	.nav-menu li {
		margin:0.5em;
	}
	/*
	.nav-menu ul {
		display:table;
		table-layout:fixed;
	}
	
	.nav-menu ul li {
		display:table-cell;
		text-align:center;
		padding:0.5em;
	}*/

	/* Changing the header size */
	h2 {
		font-size:2.5em;
	}
	

}

@media all and (max-width: 500px){
	
	.nav-menu li {
		font-size:1em;	
	}
	
	/* Changing the header size */
	h2 {
		font-size:2em;
	}
	
	h3 {
		font-size:1.5em;
	}
}