/*
*
                                                        
            _           
| o _|__|__|_._ _._ _ _ 
|_|(_| ||_ | | (_| | (/_
    _|                  
*
* Simple grid for Front End Development. 
* Protype HTML pages fast. Small learning curve.
*
* Written by Connor Harper
*
* Version: 0.9
*/

/*-------------------------------------------------
* TABLE OF CONTENTS

1. Reset
2. Grid
	2A. Columns
3. Menu
4. Footer
5. Typography

-------------------------------------------------*/

/* 

DISCLAIMER:

This file contains all default, "out of the box" settings. 
You can modify this as you see fit for your layout ...

However it's reccomended/easier you use the sass build for advanced modifications.
More info is available at https://github.com/cresharper/lightframe 

*/

/*-------------------------------------------------
1. Reset
-------------------------------------------------*/

body, html {margin: 0; padding: 0;}

/*-------------------------------------------------
2. Grid
-------------------------------------------------*/

.col { float: left; padding-bottom: 4rem; }
.wrapper { padding: 20px; }
.page-wrapper{ width: 100%; position: absolute; }
.row { margin-right: -15px; margin-left: -15px; }

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    clear: both;
}

.row-flex { display: flex; -webkit-flex-flow: row wrap; }

.container-flex { display: flex; -webkit-flex-flow: row wrap; }

.content { padding: 20px; }

@media (min-width: 1200px) {

	.container {
    	width: 1100px;
	}

}

/*-------------------------------------------------
2A. Columns
-------------------------------------------------*/

.col-full { float: left; padding-bottom: 4rem; width: 100%; }
.col-half { float: left; padding-bottom: 4rem; width: 50%;}
.col-third { float: left; padding-bottom: 4rem; width: 33.33333333%; }
.col-quarter { float: left; padding-bottom: 4rem; width: 25%; }
.col-75 { float: left; padding-bottom: 4rem; width: 75%; }
.col-80 { float: left; padding-bottom: 4rem; width: 80%; }
.col-20 { float: left; padding-bottom: 4rem; width: 20%; }


/*

For the flex column to work, 
divide the width of your container by
the amount of items you have in a row
and state the value in pixels.

The sass files do this for you in:
width: $container-width / (amount in a row); rule on line 71 in ../dev/scss/_lightframe.scss

The default value for the container is 1100px

*/
.col-flex { 
	display: flex; 
	margin: auto; 
	padding-bottom: 4rem; 
	width: 300px; 
}


/*Responsive queries*/

/*Desktop*/
@media (min-width: 1200px) {
	.container {
		width: 1100px;
	}
}

/*Mobile*/
@media (max-width: 767px) {
	.col-half {
		width: 100%;
	}

	.col-third {
		width: 100%;
	}

	.col-quarter {
		width: 50%;
	}

	.col-75 {
		width: 100%;
	}
}

/*Small Mobile*/
@media (max-width: 480px) {
	.col-quarter {
		width: 100%;
	}
}



/*-------------------------------------------------
3. Menu
-------------------------------------------------*/

.lf-menu { top: 0; left: 0; width: 100%; background-color: #222; }
.lf-menu__logo { display: inline; }

.lf-menu__items li {
	display: inline-block;
	list-style-type: none;
	padding: 10px;
	margin-left: 30px;
}

.lf-menu__items	a {
	text-decoration: none;
	color: #fff;
}

.lf-menu__items--right { float: right; }
.lf-menu__items--left { float: left; }
.lf-menu__items--underlogo { float: none; }
.lf-menu__items--stacked {display: block; list-style-type: none;}

@media (max-width: 980px) {

	.lf-menu__items--right, .lf-menu__items--left { float: none; }
}


/*-------------------------------------------------
4. Footer
-------------------------------------------------*/


.lf-footer {
	position: relative;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 200px;
	background-color: #222;
}

/*-------------------------------------------------
5. Typography
-------------------------------------------------*/

h1, h2, h3, h4, h5, h6, { margin-bottom: 1rem;}
a { text-decoration: none; }
p {margin: 0; text-align: left;}
hr {margin-bottom: 1rem; margin-top: 0.25rem;}