/*
* CrickIT template style sheet
* @version 2.0 2017-04-19
* Changes to match the new html 5 template
* @version: 1.2 2016-11-19
* added support for featured image featured-img, featured-img-wrapper
* @version: 1.1 2016-11-12
* Code cleanup and support for new functions
* @comment: A structured RWD-ready template to help you get started
*           This template is based on the index.html template
*           and the modules currently available
*           change or remove as you please
*           This assumes use of normalize.css which is incldued by default in this file
*			Read detailed documentation at
*			http://necolas.github.io/normalize.css/
*/

/* import normalize css */
@import url("css/normalize.min.css");

/* font imports if any */

/* standard html tags */
html, body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
}

h1 {
	font-size: 18px;
}

h2 {
	font-size: 16px;
}

h3 {
	font-size: 14px;
}

h4 {
	font-size: 12px;
	font-weight: bold;
}

h5 {
	font-size: 12px;
	font-weight: bold;
	font-style: italic;
}

/*
* @name: page
* @type: div
* @comment: main wrapper for page content
*           max-width: to allow width resize
*           margin: 0 auto; to center page content on page
*/

#page {
	max-width: 1024px;
	margin: 0 auto;
}

/*
* @name: header
* @type: id
* @tag: div
* @comment: header section and child of #page
*/

#header {
	float: left;
	width: 98%;
	margin: 0 1%;
	height: auto;
	border-bottom: 1px solid #ccc;
}

/*
* header img rather than creating a logo class
* however if you're going to have more than one image in header
* you might want to start creating classes
*/
#header img {
	width: 98%;
	margin: 0 1%;
	max-width: 320px;
}

/*
* @name: menu
* @type: id
* @tag: div
* @comment: Menu with drop down children and rules for selected.
* #menu is child of #header
* in this example #menu items is centered on media width less than 640
* and right aligned above
*/

#menu {
		clear: both;
	height: auto;
	margin: 6px auto;
	overflow: visible;
	text-align: center;
}

#menu ul {
	list-style: none outside none;
	margin: 0 auto;
	padding: 0;
}

#menu li {
		position: relative;
	display: inline-block;
	bottom: 3px;
}

#menu li.selected a, #menu a:hover {
		border-bottom: 2px solid #ff6634;
}

#menu li ul {
		padding-top: 15px;
		top: 1.7em;
	position: absolute;
	display: none;
	background: rgba(255, 255, 255, .7);
}

#menu li:hover ul, #menu li.over ul {
	display: block;
}

#menu a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #222;
	text-decoration: none;
	margin: 0 16px;
}

/*
* @name: content
* @type: id
* @tag: div
* @comment: main wrapper for content and child of #page
*/

#content {
	width: 98%;
	float: left;
	min-height: 480px;
	margin: 0 1%;
}

/*
* @name: article
* @type: class
* @tag: div
* @comment: wrapper for each article created by the content widget
*/

.article {
		width: 98%;
		float: left;
		margin: 6px 1%;
		border-bottom: 1px solid #ccc;
}

/*
* @name: footer
* @type: div
* @comment: wrapper for footer and child of #page
*/

#footer {
	border-top: 1px solid #ccc;
	clear: both;
	width: 98%;
	text-align: right;
	margin: 0 1%;
}

#footer p {
		margin: 12px 1%;
}


/* Modules */
/* News */
/*
* @name: news
* @type: id
* @tag: div
* @comment: wrapper to contain the news module
*/

#news {
		width: 98%;
	float: left;
	min-height: 480px;
	margin: 0 1%;
}

/*
* @name: news
* @type: class
* @tag: div
* @comment: automatically created for each article assigned to #news
*/

.news {
		width: 98%;
		margin: 0 1%;
}

/* featured-img-wrapper is a container for feature-img and available only if feature-img is set in article */
.featured-img-wrapper {
	display: block;
}

/* featured-img is available within news set in article */
.featured-img {
	width: 100%;
	height: auto;
}

/* Contact */
/*
* @name: contact-form
* @type: id
* @tag: div
* @comment: automatically created by the module contact
*           use to position form on page
*           no values set in this configuration
*/

/*
* @tag: form
* @comment: child of #contact-form
*           no values set in this configuration
*/

/*
* @tag: fieldset
* @comment: child of #contact-form form
*/

#contact-form fieldset {
		border: none;
		width: 99%;
		max-width: 360px;
		margin: 0;
		padding: 0;
}

/*
* @tag: label
* @comment: child of #contact-form form fieldset
*           no values set in this configuration
*           two fields are currently created (Namn and E-post)
*/

/*
* @tag: input[type=text]
* @comment: child of #contact-form form fieldset
*           two fields are currently created (Namn and E-post)
*           a minimum of settings applied will look different in all browsers
*/
#contact-form input[type=text] {
		width: 100%;
}

/*
* @tag: textarea
* @comment: child of #contact-form form fieldset
*           a minimum of settings applied will look different in all browsers
*/
#contact-form textarea {
		display: inline-block;
		width: 100%;
}

/*
* @tag: input[type=submit]
* @comment: child of #contact-form form fieldset
*           a minimum of settings applied will look different in all browsers
*/
#contact-form input[type=submit] {
		float: right;
}

/* Gallery */
/*
* @name: gallery-wrapper
* @type: id
* @tag: div
* @comment: automatically created by the module gallery
*           use to position and size gallery on page
*/
.gallery-wrapper {
		width: 100%;
		border: 1px solid #888;
}

.lb-caption {
		color: #fff;
}

/*
* @tag: a
* @comment: child of #gallery-wrapper
*           not used in this configuration
*/

/*
* @tag: img
* @comment: child of #gallery-wrapper a
*           use width to set number of images in row
*           this will generate 4 thumbnails per row
*/
#gallery-wrapper img {
		width: 22%;
		margin-right: 2%;
		height: auto;
}

.fb-item {
		clear: both;
		margin-bottom: 12px;
}

.fb-thumb {
		float: left;
		margin: 0 6px 6px 0;
}

.fb-video {
		display: block;
		margin-bottom: 6px;
}

.fb-img {
		margin-bottom: 6px;
}

/* alignment */
/* align-left, align-right, scale, logo are available in the text editor */
.align-left, .align-right {
		display: block;
		width: 98%;
		height: auto;
		margin: 2em auto;
}

/* short hand for scaling images */
.scale {
		display: block;
		width: 100%;
		height: auto;
}

/* short hand for global logo behaviour */
.logo {
		width: 98%;
	margin: 0 1%;
	max-width: 320px;
}

/* put media rules below */
@media (min-width: 640px) {
		.align-left {
				width: 45%;
				height: auto;
				float: left;
				margin: 0 6px 6px 0;
		}

		.align-right {
				width: 45%;
				height: auto;
				float: right;
				margin: 0 0 6px 6px;
		}

		#menu {
				text-align: right;
		}

		#content  {
				float: left;
				width: 64%;
				margin: 0 1%;
				min-height: 480px;
		}

		#news {
				float: left;
				width: 30%;
				margin: 0 1%;
				min-height: 480px;
		}
}


/*
* print rule,
* as for now this will give you some extra points in html validation
* html validation is part of SEO
*/
@media print {
	/* your print styles go here */
	#header, #footer, #menu { display: none; }
	body { font: 12pt Arial, sans-serif; }
	h1 { font-size: 26pt; }
	h2 { font-size: 14pt; color: #000; }
}