/* @override http://localhost:8000/static/css/screen.css */

/*

    [ERSKINE DESIGN]
     
    @version:1.0
    @author:Erskine Design
    
    CONTENTS ----------
    
        1. BODY
        2. TYPOGRAPHY
        3. LAYOUT
		4. HEADER
		4.1 SECOND HEADER
		5. ]
        6. GRIDPAK APPLICATION
        	6.1. BROWSER
        	6.2. OPTIONS 
        	6.3. GRIDS
        	6.4. TABS
        	6.5. DOWNLOAD FORM
        7. ABOUT 
   
    -------------------
    
    COLOURS -----------
    
        Red:#AC0000
        Black:#000000
                #191919        
        Gray:#E5E5E5    
        		#333333   
        White:#FFFFFF
    
    -------------------
    
*/

// LESS variables
@base_size: 13;
@base_stack: "ff-meta-web-pro", Arial, sans-serif;

// LESS MIXINS
.sub_font(@size, @base: @base_size, @unit:1em) {
	font-size:@size/@base_size*@unit;
}
.mixin-border_radius(@radius) {
	-webkit-border-radius:@radius;
	-moz-border-radius:@radius;
	border-radius:@radius;
	-webkit-background-clip:padding-box;
	-moz-background-clip:padding-box;
	background-clip:padding-box;
}
.mixin-box_shadow(@horizontal, @vertical, @blur, @color, @spread: '', @inset: '') {
    -webkit-box-shadow:@horizontal @vertical @blur @spread @color @inset;
    -moz-box-shadow:@horizontal @vertical @blur @spread @color @inset;
    box-shadow:@horizontal @vertical @blur @spread @color @inset;
}
.mixin-bg_gradient(@start_color, @stop_color) {
    background-color:@start_color;
	background-image:-webkit-linear-gradient(top, @start_color, @stop_color);
	background-image:-moz-linear-gradient(top, @start_color, @stop_color);
	background-image:-ms-linear-gradient(top, @start_color, @stop_color);
	background-image:-o-linear-gradient(top, @start_color, @stop_color);
    background-image:linear-gradient(top, @start_color, @stop_color);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='@start_color', EndColorStr='@stop_color');
}
.mixin-bg_gradient_low {
    .mixin-bg_gradient(rgba(64,64,64,1.0), rgba(18,18,18,1.0));
}
.mixin-bg_gradient_med {
    .mixin-bg_gradient(rgba(102,102,102,1.0), rgba(64,64,64,1.0));
}
.mixin-bg_gradient_high {
    .mixin-bg_gradient(rgba(227,227,227,1.0), rgba(179,179,179,1.0));
}
.mixin-bg_gradient_active {
	.mixin-bg_gradient(rgba(18,18,18,1.0), rgba(36,36,36,1.0));
}



/* @group 1. BODY 
------------------------------------------ */

html, body {
	height:100%;
}

body {
	font:normal 400 13px/18px ff-meta-web-pro, sans-serif;
	color:#E5E5E5;
	background:#2c2c2c;
}

/* @end */

h1 {
	font-size:1.769230769em;/*26/13*/
	font-weight:700;
}

h2, h3, h4, h5 {
	font-weight:600;
	color:#FFF;
}

h2 {
	font-size:2.461538462em;/*35/13*/
	color:#FFF;
	line-height:36px;
	margin:8px 0 0 0;
}

h3 {
	font-size:1.538461538em;/*17/13*/
	margin-bottom:0.461538462em; /*9/13*/
	line-height:1.2em;
}

h4 {
	font-size:1.153846154em;/*15/13*/
	margin:12px 0 9px 0;
}

h5 {
	font-size:1.076923077em;/*15/13*/
}

em {
	font-style:italic;
}

b {
	font-weight:800;
}

a {
	text-decoration:none;
}
a:hover,
a:focus {
    outline:0;
}

p a {
	background:url(/static/images/site/icons/gridpak-sprite.png) repeat-x 30px -5346px;
	font-weight: 600;
	color: #E5E5E5;
}
p a:hover,
p a:focus {
    background-image: none;
    color:#fff;
}

p {
	margin-bottom:0.461538462em;/*6/13*/
}

pre {
	background:#252525;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	padding:18px 18px;
	font-size:0.923076923em; /*12/13*/
	margin:14px 0 16px 0;
	overflow-x:auto;
	-webkit-background-clip:padding-box;
	-moz-background-clip:padding-box;
	background-clip:padding-box;
}

code {
	font-family:monaco;
}

code .white {
	color:#FFF;
}

code .red {
	color:#B42D35;
}

code .grey {
	color:#888;
}

code .number {
	border-right:1px solid #444;
	margin:0 12px 0 0;
	color:#555;
	padding:1px 12px 2px 0;
}

code .syntax {
	font-size:0.8333333339em; /*10/12*/
	font-family:ff-meta-web-pro, sans-serif;
	color:#555;
	float:right;
	padding-top:6px;
	margin-bottom:-12px;
}

.hidden {
    display:none;
}



/* @end */
       

/* @group 3.LAYOUT 
------------------------------------------*/

#content_wrapper {
	clear:both;
	padding:0 30px;	
	margin:0;
}

/* @end */

/* @group 4. HEADER
------------------------------------- */

.site_header {
	background:#FFF;
	padding:15px 30px 35px 30px;
	-webkit-box-shadow:0 3px 20px rgba(0,0,0,0.5); 
    -moz-box-shadow:0 3px 20px rgba(0,0,0,0.5);
    box-shadow:0 3px 20px rgba(0,0,0,0.5); 
    position:fixed;
    width:100%;
    z-index:300;
    -webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	height:70px;
}

.about.mobile .site_header {
	background:#FFF;
	padding:15px 30px 35px 30px;
    box-shadow:none;
    margin-top: 0px;
    width:100%;
    z-index:300;
    -webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	height:70px;
	position:relative;
}

.about.mobile #branding {
	float:none;
	margin: 0 auto;
	width: 101px;
	position: relative;
}

.header_wrapper {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

#branding {
	width:101px;
	color:#333;
	position:absolute;
	padding-top:12px;
}
#branding a {
    color:#333;
}
#branding a:hover,
#branding a:focus {
    color:#000;
}

.header_wrapper p {
	font-size:11px;
	font-weight:normal;
	color:#999;
	line-height:1.2em;
	float:left;
	margin:7px 0 0 140px;
}

.header_wrapper p a {
	background-image:none;
	color:#999;
}

.about .header_wrapper p {
	display:none;
}

.index header#header_sec {
	display:none;
}

#branding sup {
	font-size:9px;
	color:#AC0000;
	position: absolute;
	margin:-8px 0 0 6px; 
	float:right;	
}

nav {
	float:right;
	margin-top:5px;
	min-width:180px;
}

body.index nav a.learn {
	color:#999;
	background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 0 -1029px;
	padding-left:21px;
	margin-top:5px;
	float:left;
}

body.index nav a:hover,
body.index nav a:focus {
	color:#333;
	background-position:0 -889px;
}

body.about nav a {
	position:relative;
	font-family:ff-meta-web-pro, sans-serif;
	padding:7px 46px 7px 12px;
	color:#FFF;
	text-shadow:-1px -1px -1px #720000;
	border:1px solid #780100;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
    border-radius:3px;    
    cursor:pointer;
 	float:left;
	background-color:#E5E5E5;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#CA0C12), to(#8A0704));
	background-image:-webkit-linear-gradient(top, #CA0C12, #8A0704);
	background-image:-moz-linear-gradient(top, #CA0C12, #8A0704);
	background-image:-ms-linear-gradient(top, #CA0C12, #8A0704);
	background-image:-o-linear-gradient(top, #CA0C12, #8A0704);
    background-image:linear-gradient(top, #CA0C12, #8A0704);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#BC0D13', EndColorStr='#8A0704');
    -webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0.22) 1px 1px 0 inset;
	-moz-box-shadow:1px 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0.22) 1px 1px 0 inset;
	box-shadow:1px 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0.22) 1px 1px 0 inset;
	font-size:1.076923077em;/*14/13*/
	-moz-background-clip:padding; 
	-webkit-background-clip:padding-box; 
	background-clip:padding-box;
	line-height:21px;
	margin-top:-4px;
}

body.about nav a:after{
	content:" ";
	-webkit-border-radius:0 3px 3px 0;
	-moz-border-radius:0 3px 3px 0;
    border-radius:0 3px 3px 0;
	position:absolute;
	float:left;
	margin:-7px 0 0 12px;
	border-left:1px solid #780100;
	width:34px;
	height:35px;
	overflow:hidden;
	background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 11px -2688px, -webkit-linear-gradient(top, #910403, #890504);
 	background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 11px -2688px, -moz-linear-gradient(top, #910403, #890504);
	background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 11px -2688px, -ms-linear-gradient(top, #910403, #890504);
	background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 11px -2688px, -o-linear-gradient(top, #910403, #890504);
	background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 11px -2688px, linear-gradient(top, #910403, #890504);
	-webkit-box-shadow:rgba(255,255,255,0.22) 0 1px 0 inset;
	-moz-box-shadow:rgba(255,255,255,0.22) 0 1px 0 inset;
	box-shadow:rgba(255,255,255,0.22) 0 1px 0 inset;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#910403', EndColorStr='#890504'); 
}


body.about nav a:hover,
body.about nav a:focus {
	background-color:#9A0704;
	background-image:none;	
	-moz-background-clip:padding; 
    -webkit-background-clip:padding-box; 
	background-clip:padding-box;
}
	
body.about nav a:active {
	-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0) 1px 1px 0 inset;
	-moz-box-shadow:1px 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0) 1px 1px 0 inset;
	box-shadow:1px 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0) 1px 1px 0 inset;
}
	

ul.social {
	float:left;
	margin:4px 20px 0 0;
}

ul.social li {
	display:inline;
	margin-right:8px;
/*    overflow:hidden;*/
	float:left;
}

.like {
    width:90px;
}
.share {
    width:82px;
}


	@media only screen and (max-width:680px) {

			ul.social {
				display:none;
			}
			
			.header_wrapper p {
				display: none;
			}
			
			body.index nav a {
				float: right;
			}
			
			body.index nav a.learn {
				float: right;
			}
	}
	
	/* @group 4.1 SECOND HEADER
------------------------------------- */
	
	#header_sec { 
		padding:97px 0 0 0;
		text-align:center;
		max-width:1040px;
		margin:0 auto;
		text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);
	}
	
	.about.mobile #header_sec {
		padding:30px 0 0 0;
	}
	
	.about #header_sec { 
		padding-bottom:14px;
		text-align:center;
		max-width:1040px;
		margin:0 auto;
		text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);
	}
	
	.about #header_sec { 
		padding-bottom:14px;
		text-align:center;
		max-width:1040px;
		margin:0 auto;
		text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);
	}
	
	#header_sec p {
		font-size:1.153846154em;
	}
	
	
	
	
/* @end */
	
	
/* @group 5. FOOTER
------------------------------------- */

footer {
	padding:3px 30px;
	display:block;
}

.footer_wrapper {
	background:#222;
	padding:20px;
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	padding:0 7px 10px 28px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.gridpak_info {
	width:216px;
	font-size:0.923076923em;
	float:left;
	line-height:1.4em;
	margin:5px 0 0 10px;
}

.created_by {
	float:right;
	padding:11px 0 4px 60px;
	color:#888;
	background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 2px -3682px;
	margin-top:10px;
	font-size:0.846153846em;
	width:196px;
	line-height:1.153846154em;
}

.about .created_by {
	float:right;
	padding:11px 0 4px 60px;
	color:#888;
	background:none;
	margin-top:10px;
	font-size:0.846153846em;
	width:196px;
	line-height:1.153846154em;
}

.created_by a {
	color:#FFF;
}

.created_by a:hover,
.created_by a:focus {
	/*color:#888;*/
	text-decoration:underline;
}
	
	@media only screen and (max-width:580px) {
        .created_by {
            background-image:none;
            width:196px;
            padding:11px 0 12px 0;
        }
	}
	
	@media only screen and (max-width:480px) {
        .created_by {
            float:none;
            margin:10px auto 0 auto;
            text-align:center;
            background-image:none;
            width:196px;
            padding:6px 0 12px 0;
        }
	
	}

/* @end */


/* @group 6. GRIPDAK APPLICATION 
------------------------------------------*/

#gridpak {
    height:570px;
    clear:both;
    background:url(/static/images/site/icons/ruler.png) no-repeat 0 585px;
    padding:30px 0 90px;
    overflow: visible;
}

	/* @group 6.1. BROWSER
	--------------------------------------*/
	
	#browser {
	    position:relative;
	    width:960px;
	    border:1px solid #000;
	    margin:100px 0 40px 0;
	    top:-1px;
	    height:388px;
	    z-index:0;
	    -webkit-animation:fadeInTwo 0.8s 1;
		-moz-animation:fadeInTwo 0.8s 1;
		-ms-animation:fadeInTwo 0.8s 1;
		-o-animation:fadeInTwo 0.8s 1;
		animation:fadeInTwo 0.8s 1;
	}

	#browser:after {
		content:" ";
		clear:both;
		display:block;
		z-index:3000;
	}
	
	/* @end */
	
	
	/* @group 6.2. OPTIONS DIALOGUE
	--------------------------------------*/

	#grid_options {
	    display:block;
	    position:relative;
	    float:right;
		width:159px;
		right:-202px;
	    padding:16px 2px 18px 39px;
	    margin:55px 0 0 0;
	    clear:both;
	    color:#FFF;
	    background:#242424;
	    z-index:99;
	    -moz-border-radius:0 5px 5px 0;
	    -webkit-border-radius:0 5px 5px 0;
	    border-radius:0 5px 5px 0;
	    border:1px solid #191919;
	}
	
	input {
		font-family:Helvetica, "Helvetica Neue", Arial, sans-serif;
		font-size:1.153846154em;/*15/13*/
	}
	
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
	    -webkit-appearance:none;
	    margin:0; 
	}

	#grid_options label {
		display:block;
		clear:both;
		margin-bottom:1px;
		font-size:0.923076923em;/*12/13*/
	}
	
	#grid_options div {
		margin-bottom:10px;
	}
	
	#grid_options div.submit {
		float:left;
		margin:13px 0 0 -39px;
		width:160px;
		padding:18px 0 0 40px;
		border-top:1px solid rgba(255,255,255,0.1);
		-webkit-box-shadow:0 3px 20px #000;
        -moz-box-shadow:0 3px 20px rgba(0,0,0,0.5);
        box-shadow:0 -1px 0 #000;
	}
	
	#grid_options .dragme {
	    width:22px;
	    background:#1E1E1E url(/static/images/site/icons/gridpak-sprite.png);
		background-position:11px -4102px;
		padding-left:27px;
		background-repeat:no-repeat;
	    -moz-border-radius:30px;
	    -webkit-border-radius:30px;
	    border-radius:30px;
	    height:49px;
	    display:block;
	    position:absolute;
	    left:-34px;
	    top:103px;
	    cursor:col-resize;
	    z-index:10;
	    border:7px solid #242424;
		-webkit-box-shadow:0 -1px 0 rgba(255,255,255,0.20) inset;
		-moz-box-shadow:0 -1px 0 rgba(255,255,255,0.20) inset;
		box-shadow:0 -1px 0 rgba(255,255,255,0.20) inset;
		margin:3px 6px 0 4px;
	}
	
	#grid_options .dragme:hover,
	#grid_options .dragme:focus {
		background-position:11px -5032px;
	}
	
	#grid_options .dragme:active{
		background-position:11px -5032px;
	}
	
	#grid_options input {
		margin-left:19px;
		padding:3px 2px 4px 8px;
		webkit-border-radius:0 3px 3px 0;
		-moz-border-radius:0 3px 3px 0;
		border-radius:0 3px 3px 0;
		border:1px solid #000;
		border-left:none;
		outline:none;
		height:21px;
		width:33px;
	    color:#333;
	   -webkit-transition:all 0.2s ease-out;
	   -moz-transition:all 0.2s ease-out;
	   -ms-transition:all 0.2s ease-out;
	   -o-transition:all 0.2s ease-out;
	    transition:all 0.2s ease-out;
	    background:#FFF -webkit-gradient(linear, left top, left bottom, from(#C6C6C6), to(#FFF));
 		background:#FFF -webkit-linear-gradient(top, #C6C6C6, #FFF);
 		background:#FFF -moz-linear-gradient(top, #C6C6C6, #FFF);
		background:#FFF -ms-linear-gradient(top, #C6C6C6, #FFF);
		background:#FFF -o-linear-gradient(top, #C6C6C6, #FFF);
	    background:#FFF linear-gradient(top, #C6C6C6, #FFF);
	    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#C6C6C6', EndColorStr='#FFF'); 
	    -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.15), rgba(255,255,255,1) 0 1px 0 inset;
		-moz-box-shadow:0 1px 0 rgba(255,255,255,0.15), rgba(255,255,255,1) 0 1px 0 inset;
		box-shadow:0 1px 0 rgba(255,255,255,0.15), rgba(255,255,255,1) 0 1px 0 inset;
		-moz-background-clip:padding; 
		-webkit-background-clip:padding-box; 
		background-clip:padding-box;
	}
	
	#grid_options input:focus {
		background:#FFF;
		color:rgba(0,0,0,0.9);
		-moz-background-clip:padding; 
		-webkit-background-clip:padding-box; 
		background-clip:padding-box;
	}
	
	#grid_options input:active {
		background:#FFF;
		-moz-background-clip:padding; 
		-webkit-background-clip:padding-box; 
	    background-clip:padding-box;
	}
	
	.number {
		width:17px;
	}
	
	.increase {
		height:14px;
		position:absolute;
		border-radius:3px 0 0 0;
		border-left:1px solid #000;
		border-top:1px solid #000;
		background-color:#E5E5E5;
 		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 6px -2325px, -webkit-gradient(linear, left top, left bottom, from(#E5E5E5), to(#B1B1B1));
 		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 6px -2325px, -webkit-linear-gradient(top, #E5E5E5, #B1B1B1);
 		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 6px -2325px, -moz-linear-gradient(top, #E5E5E5, #B1B1B1);
		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 6px -2325px, -ms-linear-gradient(top, #E5E5E5, #B1B1B1);
		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 6px -2325px, -o-linear-gradient(top, #E5E5E5, #B1B1B1);
	    background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 6px -2325px, linear-gradient(top, #E5E5E5, #B1B1B1);
	    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.20), rgba(255,255,255,0.75) 1px 1px 0 inset;
		-moz-box-shadow:0 1px 1px rgba(0,0,0,0.20), rgba(255,255,255,0.75) 1px 1px 0 inset;
		box-shadow:0 1px 1px rgba(0,0,0,0.20), rgba(255,255,255,0.75) 1px 1px 0 inset;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#D4D4D4', EndColorStr='#B1B1B1');
        -moz-background-clip:padding; 
		-webkit-background-clip:padding-box; 
		background-clip:padding-box;
	}
	
	.decrease {
		height:14px;
		position:absolute;
		margin-top:14px;
		border-radius:0 0 0 3px;
		border-left:1px solid #000;
		border-top:1px solid #707070;
		border-bottom:1px solid #000;
		background-color:#E5E5E5;
 		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 6px -2054px, -webkit-gradient(linear, left top, left bottom, from(#E5E5E5), to(#B1B1B1));
 		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 6px -2054px, -webkit-linear-gradient(top, #E5E5E5, #B1B1B1);
 		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 6px -2054px, -moz-linear-gradient(top, #E5E5E5, #B1B1B1);
		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 6px -2054px, -ms-linear-gradient(top, #E5E5E5, #B1B1B1);
		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 6px -2054px, -o-linear-gradient(top, #E5E5E5, #B1B1B1);
	    background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 6px -2054px, linear-gradient(top, #E5E5E5, #B1B1B1);
	    -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.15), rgba(255,255,255,0.7) 1px 0 0 inset;
		-moz-box-shadow:0 1px 0 rgba(255,255,255,0.15), rgba(255,255,255,0.7) 1px 0 0 inset;
		box-shadow:0 1px 0 rgba(255,255,255,0.15), rgba(255,255,255,0.7) 1px 0 0 inset;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#D4D4D4', EndColorStr='#B1B1B1');
        -moz-background-clip:padding; 
		-webkit-background-clip:padding-box; 
		background-clip:padding-box;
	}
	
	.increase:hover,
	.increase:focus {
		background:#bbb url(/static/images/site/icons/gridpak-sprite.png) no-repeat 6px -2195px;
	}
	
	.decrease:hover,
	.decrease:focus {
		background:#bbb url(/static/images/site/icons/gridpak-sprite.png) no-repeat 6px -1914px;
	}
	
	/* Switchers */
	.switcher_container {
		display:block;
		height:auto;
		width:auto;
		float:left;
		margin-left:0.5em;
		border:1px solid #000;
		overflow:hidden;
		.mixin-border_radius(3px);
		-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.1);
		cursor:pointer;
	}
	.switcher_container input {
		display:none;
	}
	#grid_options .switcher_container label {
		display:block;
		float:left;
		color:rgba(255,255,255,0.6);
		clear:none;
		padding:0.49em 0.8em;
		margin:0;
		.mixin-bg_gradient_low;
		-webkit-box-shadow:1px 1px 0 rgba(255,255,255,0.1) inset;
		font-family:"Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
		cursor:pointer;
		text-shadow:-1px -1px 0 rgba(0,0,0,0.5);
	}
	#grid_options .switcher_container label:hover,
	#grid_options .switcher_container label:focus {
		color:rgba(255,255,255,0.9);
	}
	#grid_options .switcher_container label:active {
		.mixin-bg_gradient_active;
	}
	#grid_options .switcher_container label.selected {
		color:rgba(255,255,255,1.0);
		.mixin-bg_gradient_med;
		cursor:default;
	}
	#grid_options .switcher_container label:nth-child(2) {
		border-left:1px solid #000;
	}
	
	.number_input {
		float:left;
		height:30px;
	}
	
	.number:active {
		-webkit-box-shadow:none;
	    -moz-box-shadow:none;
	    box-shadow:none;	
	}

	.number_input {
		float:left;
	}
	
	#save_grid {
		font-family:ff-meta-web-pro, sans-serif !important;
		font-size:1.076923077em;/*14/13*/
		color:#333333;
		text-shadow:1px 1px 0 rgba(255,255,255,0.5);
		text-decoration:none;
		float:left;
		position:relative;
		margin-left:-1px;
		padding:8px 12px 8px 26px;
		border:1px solid #1F1F1F;
		-moz-border-radius:3px;
	    -webkit-border-radius:3px;
	    border-radius:3px;
 		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 4px -5140px, -webkit-gradient(linear, left top, left bottom, from(#E5E5E5), to(#B1B1B1)) #E5E5E5;
 		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 4px -5140px, -webkit-linear-gradient(top, #E5E5E5, #B1B1B1) #E5E5E5;
 		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 4px -5140px, -moz-linear-gradient(top, #E5E5E5, #B1B1B1) #E5E5E5;
		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 4px -5140px, -ms-linear-gradient(top, #E5E5E5, #B1B1B1) #E5E5E5;
		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 4px -5140px, -o-linear-gradient(top, #E5E5E5, #B1B1B1) #E5E5E5;
	    background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 4px -5140px, linear-gradient(top, #E5E5E5, #B1B1B1) #E5E5E5;
	    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#E5E5E5', EndColorStr='#B1B1B1');
	   -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.20), rgba(255,255,255,0.50) 0 1px 0 inset;
	   -moz-box-shadow:0 1px 1px rgba(0,0,0,0.20), rgba(255,255,255,0.50) 0 1px 0 inset;
	    box-shadow:0 1px 1px rgba(0,0,0,0.20), rgba(255,255,255,0.50) 0 1px 0 inset;
		cursor:pointer;
		-moz-background-clip:padding; 
		-webkit-background-clip:padding-box; 
		background-clip:padding-box;
	}
	
	#save_grid:before {
		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 0 -4240px !important;
		height:36px;
		width:30px;
		content:'';
		position:absolute;
		left:-14px;
		top:-1px;
	}
	
	#save_grid:hover,
	#save_grid:focus {
		color:#000000;
		background:#bbb url(/static/images/site/icons/gridpak-sprite.png) no-repeat 4px -3830px;
		-moz-background-clip:padding; 
		-webkit-background-clip:padding-box; 
		background-clip:padding-box;
	}
	
	#save_grid:hover:before,
	#save_grid:focus:before {
		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 0 -4380px !important;
	}
	
	#save_grid:active:before {
		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 0 -4520px !important;
	}
	
	#save_grid:active {
		-webkit-box-shadow:none; /* Saf3-4 */
		-moz-box-shadow:none; /* FF3.5 - 3.6 */
		 box-shadow:none;	
		 -moz-background-clip:padding; 
		 -webkit-background-clip:padding-box; 
		 background-clip:padding-box;
	}
	
	.total_width {
		z-index:4000;
		position:relative;
		float:right;
		margin:369px -203px 0 0;
		background:rgba(0,0,0,0.85);
		font-size:.846153846em;
		padding:2px 5px 0 3px;
		color:#FFF;
	}
	
	.total_width input {
	    font-size:1em;/*10/13*/
		background:none;
		border:none;
		text-align:right;
		width:25px;
		color:#FFF;
		margin: -1px 0 0 0;	
	}
	.total_width input:disabled {
		color:#FFF;

	}
	
	/* @end */


	/* @group 6.3. GRIDS
	--------------------------------------*/
	
	#grid_list {
		width:100%;
		z-index:1;
	}
	
	#grid_list .grid {
		position:absolute;
		display:block;
	    width:100%;
		height:100%;
		top:0;
		left:0;
	    z-index:1;
		font-size:0.923076923em;/*12/13*/
        background-color:none;
	}
	
    #grid_list .cur {
        background-color:#fff;  
        z-index:99;
    }
    
	#grid_list .gridnav {
	    z-index:99;
    }
    
	#grid_list .cols {
		height:100%;
	    display:none;
		overflow:hidden;
		z-index:3000;
	}
	
	#grid_list .cur .cols {
	    display:block;
	    z-index:3000;
	}
	
	#grid_list .col {
		width:10px;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
		border-left:0 solid rgba(255,255,255,1);
		border-right:0 solid rgba(255,255,255,0);
        -moz-background-clip:padding-box;
        -webkit-background-clip:padding-box;
        background-clip:padding-box;
		display:block;
		float:left;
		height:100%;
		background-color:#E78484;
	}
    #grid_list .col:first-child {
        border-left-color:rgba(255,255,255,0);
    }
	#grid_list .col .width {
	   display:none;
	}
	#grid_list .col .visible {
	    width:100%;
	    height:100%;
	    background-color:#FFF;
	    opacity:0.65;
	}
	
	/* @end */
	
	
	
	/* @group 6.4. TABS
	--------------------------------------*/

	#grid_list .tab {
		width:100%;
		text-align:center;
		position:absolute;
		top:0;
		border:1px solid #414141;
		border-right:none;
		height:386px;
		z-index:-1;
		background:url(/static/images/site/icons/pattern.png);
	}
	#grid_list .tab a {
		display:block;
	}

	/* Arrows */
	#grid_list .tab:before {
		content:" ";
		display:block;
		width:100%;
		height:20px;
		bottom:-47px;
		margin:0 -1px;
		position:absolute;
		z-index:-1;
		background:url(/static/images/site/icons/grid_tab_line.png) repeat-x 0 50%;
        border-left:1px solid #C2C2C2;
		border-right:1px solid #C2C2C2;
	}
	
	#grid_list .tab li:first-child:before{
		outline: 10px solid red;
		
	}
	
	
	#grid_list .cur .tab:before {
		background:url(/static/images/site/icons/grid_tab_line_active.png) repeat-x 0 50%;
	}
	
	#grid_list .tab .actions {
		display:inline-block;
		position:relative;
		top:407px;
		border:1px solid #1F1F1F;
		.mixin-border_radius(3px);
		.mixin-bg_gradient_low;
		filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#414141');
	    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.20), rgba(255,255,255,0.2) 1px 1px 0 inset;
		-moz-box-shadow:0 1px 1px rgba(0,0,0,0.20), rgba(255,255,255,0.2) 1px 1px 0 inset;
		box-shadow:0 1px 1px rgba(0,0,0,0.20), rgba(255,255,255,0.2) 1px 1px 0 inset;
		font-family:Helvetica, "Helvetica Neue", Arial, sans-serif;
		text-shadow:-1px -1px 0 rgba(0,0,0,0.3);
		color:rgba(255,255,255,0.6);
		line-height:1em;
	}
    #grid_list li:only-child .tab .actions .remove {
        display:none;
    }
	
	#grid_list .tab .actions:hover,
	#grid_list .tab .actions:focus {
		color:rgba(255,255,255,1);
	}
	
	#grid_list .tab .actions:active {
		color:rgba(255,255,255,0.5);
		.mixin-bg_gradient_active;
	}
	
	#grid_list .cur .tab .actions {
	 	.mixin-bg_gradient_med;
	 	.mixin-box_shadow(0, 1px, 1px, rgba(0,0,0,0.2));
		color:rgba(255,255,255,1);
        text-shadow:-1px -1px 0 rgba(0,0,0,.3);
	}
	
	#grid_list .cur .tab .actions:hover,
	#grid_list .cur .tab .actions:focus {
		
	}
	
	#grid_list .cur .tab .actions span {
		
	}
	#grid_list .tab .actions li {
		position:absolute;
		right:8px;
		top:5px;
	}
	
	#grid_list .tab .actions li:first-child {
		float:left;
		position:static;
	}
	
	#grid_list .tab .actions span {
	    text-decoration:none;
	    float:left;
	    line-height:1em;	    
	}
	
	#grid_list .tab .actions span.link {
		padding:8px 32px 8px 10px;
	}
	#grid_list li:only-child .tab .actions span.link {
		padding-right:10px;
	}

	#grid_list .tab .actions span.remove {
	     width:17px;
	     height:17px;
	     top:0px;
	     overflow:hidden;
	     text-indent:-999em;
	     opacity:0.8;
	     background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 1px -3019px;
	 }
	 
	#grid_list .tab .actions span.remove:hover,
	#grid_list .tab .actions span.remove:focus {
		opacity:1;
	 }
	 
	#grid_list .cur .tab .actions span.remove {

	}
	 
	#grid_list .cur .tab .actions span.remove:hover,
	#grid_list .cur .tab .actions span.remove:focus {

	}

	/* @end */
	
	/* @group 6.5. DOWNLOAD FORM
	--------------------------------------*/
	
	footer form {
		float:left;
		z-index:2000;
		margin:12px 0 3px 0;
		padding:8px 10px;
		background-color:rgba(0,0,0,0.3);
		.mixin-border_radius(3px);
	    color:#FFF;
	}
	
	.added {
		-webkit-animation:glow 2s 1;
		-moz-animation:glow 2s 1;
		-ms-animation:glow 2s 1;
		-o-animation:glow 2s 1;
		animation:glow 2s 1;
	}
	
	p.numberOfGrids {
		display:none;
		
	}
		
	
		@media only screen and (min-width:481px) and (max-width:780px) {
			footer form {
				display:block;
				overflow:hidden;
				width:210px;
			}
			
			.gridpak_info {
				display:none;
			}
			
			p.numberOfGrids {
				display:block;
				float:left;
				margin:-5px 0 0 -10px ;
				font-size:0.769230769em;/*10/13*/
				border-radius:12px;
				background:#323232;
				padding:7px 4px 8px 4px;
				line-height:0;
				text-align:center;
				font-family:Helvetica, "Helvetica Neue", Arial, sans-serif;
				z-index:9999;
				position:relative;
			}			
		}
		
		@media only screen and (max-width:480px) {
			footer form {
				float:none;
				display:block;
				margin:12px auto 0 auto;
				overflow:hidden;
				width:211px;
				padding:8px 8px 8px 12px;
			}
			
			.gridpak_info {
				display:none;
			}	
			
			p.numberOfGrids {
				display:block;
				float:left;
				margin:-5px 0 0 -10px ;
				font-size:0.769230769em;/*10/13*/
				border-radius:12px;
				background:#323232;
				padding:7px 4px 8px 4px;
				line-height:0;
				text-align:center;
				font-family:Helvetica, "Helvetica Neue", Arial, sans-serif;
				z-index:9999;
				position:relative;
			}			
		}

	footer form textarea {
		display:none;
	}
	
	#download {
		position:relative;
		font-family:ff-meta-web-pro, sans-serif;
		padding:7px 45px 7px 12px;
		color:#FFF;
	    text-shadow:-1px -1px -1px #720000;
	    cursor:pointer;
	 	float:left;
	 	.mixin-border_radius(3px);
	 	.mixin-bg_gradient(#BC0D13, #720704);
	    -webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0.22) 1px 1px 0 inset;
		-moz-box-shadow:1px 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0.22) 1px 1px 0 inset;
		box-shadow:1px 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0.22) 1px 1px 0 inset;
		font-size:1.076923077em;/*14/13*/
		border:1px solid #000;
		line-height:21px;
	}
	
	/* Firefox Hack */
	
	@-moz-document url-prefix() { 
		#download {
			padding:6px 42px 6px 12px;
			margin-top:2px;
		}
	}
	
	/* Opera Hack */
	
	@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
	    #download {
			padding:7px 40px 7px 12px;
			margin-top:2px;
		}
 	}
	
	#download:after {
		content:" ";
		-webkit-border-radius:0 3px 3px 0;
		-moz-border-radius:0 3px 3px 0;
	    border-radius:0 3px 3px 0;
		position:absolute;
		float:left;
		margin:-7px 0 0 12px;
		width:32px;
		height:35px;
		overflow:hidden;
		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 10px -3419px, -webkit-gradient(linear, left top, left bottom, from(#720704), to(#5F0100));
 		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 10px -3419px, -webkit-linear-gradient(top, #720704, #5F0100);
 		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 10px -3419px, -moz-linear-gradient(top, #720704, #5F0100);
		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 10px -3419px, -ms-linear-gradient(top, #720704, #5F0100);
		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 10px -3419px, -o-linear-gradient(top, #720704, #5F0100);
	    background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 10px -3419px, linear-gradient(top, #720704, #5F0100);
	    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#720704', EndColorStr='#5F0100'); 
	    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0.15) 0 1px 0 inset;
		-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0.15) 0 1px 0 inset;
	    border-left:1px solid #440301;
	    -moz-background-clip:padding; 
		-webkit-background-clip:padding-box; 
		background-clip:padding-box;
	}
	
	#download:hover,
	#download:focus {
		background-color:#8C0909;
		background-image:none;	
		-moz-background-clip:padding; 
	    -webkit-background-clip:padding-box; 
		background-clip:padding-box;
	}
	
	#download:hover:after,
	#download:focus:after {
		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 10px -3279px, -webkit-gradient(linear, left top, left bottom, from(#720704), to(#5F0100));
 		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 10px -3279px, -webkit-linear-gradient(top, #720704, #5F0100);
 		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 10px -3279px, -moz-linear-gradient(top, #720704, #5F0100);
		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 10px -3279px, -ms-linear-gradient(top, #720704, #5F0100);
		background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 10px -3279px, -o-linear-gradient(top, #720704, #5F0100);
	    background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 10px -3279px, linear-gradient(top, #720704, #5F0100);
	    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#720704', EndColorStr='#5F0100'); 
	     -moz-background-clip:padding; 
		 -webkit-background-clip:padding-box; 
		 background-clip:padding-box;
	}
	
	
	#download:active, #download:active:after  {
		-webkit-box-shadow:none; /* Saf3-4 */
		-moz-box-shadow:none; /* FF3.5 - 3.6 */
		 box-shadow:none;
		-moz-background-clip:padding; 
		-webkit-background-clip:padding-box; 
		 background-clip:padding-box;
	}
	
	/* @end */
	
	

/* @end */



/* @group 7. ABOUT
------------------------------------------*/

.about_wrapper {
	width:100%;
	margin:0 auto;
	position:relative;
	display:block;
	padding-bottom:40px;
	clear:both;
	-webkit-animation:fadeInTwo 1s 1;
	-moz-animation:fadeInTwo 1s 1;
	-ms-animation:fadeInTwo 1s 1;
	-o-animation:fadeInTwo 1s 1;
	animation:fadeInTwo 1s 1;

}

.about footer {
	max-width:800px;
	margin:0 auto 100px auto;
	position:relative;
	display:block;
	padding:0 0 40px 0;
}

.about code {
	font-size:0.923076923em;
}

footer .please_note {
	margin:10px 0;
	float:left;
	width: 100%;
}

footer .please_note h4 {
	width:20%;
	border-left-width:12px;
	padding:4px 12px 0 12px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    float: left;
    border:0px solid rgba(0,0,0,0);
}

footer .please_note p {
	width:42%;
    border:0px solid rgba(0,0,0,0);
    border-left-width:20px;
	font-size:0.923076923em;
	margin-top:14px;
	line-height:16px;
	padding:4px 12px 0 12px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    float: left;
  
}

.about_header_wrapper {
	max-width:800px;
	margin:0 auto;	
	overflow:hidden;
}

.about_header_wrapper .row {
	margin-bottom: 20px;
	overflow: hidden;
}

.video_container {
	margin: 30px 0;
}


.included {
	max-width:800px;
	margin:0 auto;
	padding:7px 0 32px 0;
	overflow:hidden;

}

.included_wrapper {
	background:#242424;
	margin:0 -40px;
	padding:0 40px;
	width: 100%;
	
}

header.included_header {
	max-width:800px;
	margin:30px auto 38px auto;
	display:block;
	text-align:center;	
}

header.included_header h2 {
	font-size:1.846153846em;
	line-height:1.2em;
}

.included_item_wrapper,
.included_item_wrapper_css {
	width: 100%;
	min-height:70px;
	padding:23px 0 0 0;
	clear:both;
	overflow:hidden;
	position:relative;
}

.included_item_wrapper_css {
	background-color: rgba(0,0,0,0.12);
}

.included_item_wrapper_css:hover,
.included_item_wrapper_css:focus {
	background-color: rgba(0,0,0,0.22);
	float: left;
}

.included_item_wrapper_css p.reveal a {
	position:absolute;
	right:26px;
	top:50px;
	width:19px;
	height:19px;
	text-indent:-999em;
	overflow:hidden;
	background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 0 -2410px;
}
.included_item_wrapper_css p.reveal a:hover,
.included_item_wrapper_css p.reveal a:focus {
	background-position:0 -2550px;
}
.included_wrapper .expanded p.reveal a {
	background-position:0 -5245px;
}

.included h3.file_type {
	width: 20%;
	float: left;
	font-size: 1.461538462em;
	border:0px solid rgba(0,0,0,0);         
	border-left-width:12px;
	padding:4px 12px 0 30px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -moz-background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;
    background-clip:padding-box !important;
    background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat;
}


.included h3.file_type.png {
	background-position: 0 -1161px;
}
.included h3.file_type.css {
	background-position:0px -1272px;
}
.included h3.file_type.javascript {
	background-position:0px -1389px;
}
.included h3.file_type small {
	font-size:.684210526em; /* 13 / 17 */
	color:#888;
}
.included p.small_description {
	width: 30%;
	border:0px solid rgba(0,0,0,0);         
	border-left-width:20px;
	padding:0 12px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -moz-background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;
    background-clip:padding-box !important;
    float: left;
    margin-top: 7px;
}

.included ul.images  {
	border-left-width:20px;
	 border:0px solid rgba(0,0,0,0);  
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -moz-background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;
    background-clip:padding-box !important;
    width: 50%;
    float: left;
    padding:0;
    margin-bottom:23px;
}

.included ul.images li {
	display:inline-block;
	width:27%;
	text-align:center;
	padding:74px 0 0 0;
	background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 50% 0;
	margin-right:0%;
	position:relative;
}
.included ul.images li.css {
	background-position:50% 0;
}
.included ul.images li.less {
	background-position:50% -180px;
}
.included ul.images ul li.scss {
	background-position:50% -360px;
}
.included ul.images span {
	display:block;
	overflow:hidden;
	text-indent:-999em;
	position:absolute;
	top:30px;
	right:-6px;
	width:12px;
	height:12px;
	background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 0 -4940px;
}
.included ul.images li.pngs {
	background-position:56% -700px;
	margin-left: -1px;
}

.included ul.images li.js {
	background-position:50% -520px;
}
.included ul.images .row {
	display:none;
}

.included_item_wrapper_css .row {
	display: none;
	margin:12px 12px 23px -12px;
	clear:both;
	float:left;
}

.included_item_wrapper_css .row h3 {
	font-size: 17px;
}

/*-----------------------HERE*/

.included dd.expands {
	background-color:rgba(0,0,0,0.18);
}
.included dd.expands p.expand {
	margin:0;
	padding:0;
	min-height:0;
	float: right;
	right:20px;
	top:54px;
	width:22px;
	height:22px;
	position: absolute;
}
.included dd.expands p.expand a {
	display:block;
	background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 0 -2409px;
	width:22px;
	height:22px;
	text-indent:-999em;
}
.included dd.expands p.expand a:hover,
.included dd.expands p.expand a:focus {
	background-position:0 -2550px;
}
.included dd.expanded p.expand a,
.included dd.expanded p.expand a:hover,
.included dd.expanded p.expand a:focus {
	background-position:0 -5245px;
}
.included dd.expands:hover,
.included dd.expands:focus,
.included dd.expanded {
	background-color:rgba(0,0,0,0.30);
}


.included dd .more h3 {
	-webkit-column-break-before:always;
	-webkit-column-break-after:avoid;
	-moz-column-break-before:always;
	-moz-column-break-after:avoid;
	column-break-before:always;
	column-break-after:avoid;
}

.about footer .call_to a.create {
	font-family:ff-meta-web-pro, sans-serif;
	padding:10px 56px 10px 18px;
	color:#FFF;
	text-shadow:-1px -1px -1px #720000;
	border:1px solid #1F1F1F;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
    border-radius:3px;    
    cursor:pointer;
 	float:left;
	background-color:#E5E5E5;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#BC0D13), to(#720704));
	background-image:-webkit-linear-gradient(top, #BC0D13, #720704);
	background-image:-moz-linear-gradient(top, #BC0D13, #720704);
	background-image:-ms-linear-gradient(top, #BC0D13, #720704);
	background-image:-o-linear-gradient(top, #BC0D13, #720704);
    background-image:linear-gradient(top, #BC0D13, #720704);
    -webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0.22) 1px 1px 0 inset;
	-moz-box-shadow:1px 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0.22) 1px 1px 0 inset;
	box-shadow:1px 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0.22) 1px 1px 0 inset;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#BC0D13', EndColorStr='#720704');
	font-size:1.230769231em;
	-moz-background-clip:padding-box; 
	-webkit-background-clip:padding-box; 
	background-clip:padding-box;
	line-height:21px;
	margin-top:28px;
}

.about footer .call_to a.create:after{
	content:" ";
	-webkit-border-radius:0 3px 3px 0;
	-moz-border-radius:0 3px 3px 0;
    border-radius:0 3px 3px 0;
	position:absolute;
	float:left;
	margin:-10px 0 0 16px;
	width:39px;
	height:41px;
	background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 11px -2767px, -webkit-gradient(linear, left top, left bottom, from(#720704), to(#5F0100));
 	background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 11px -2767px, -webkit-linear-gradient(top, #720704, #5F0100);
 	background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 11px -2767px, -moz-linear-gradient(top, #720704, #5F0100);
	background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 11px -2767px, -ms-linear-gradient(top, #720704, #5F0100);
	background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 11px -2767px, -o-linear-gradient(top, #720704, #5F0100);
	background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 11px -2767px, linear-gradient(top, #720704, #5F0100);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#720704', EndColorStr='#5F0100'); 
	-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0.22) 0 1px 0 inset;
	-moz-box-shadow:1px 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0.22) 0 1px 0 inset;
	box-shadow:1px 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0.22) 0 1px 0 inset;
	-moz-background-clip:padding; 
	-webkit-background-clip:padding-box; 
	background-clip:padding-box;
	border-left:1px solid #440301;
}


.about footer .call_to a.create:hover,
.about footer .call_to a.create:focus {
	background-color:#8C0909;
	background-image:none;	
	-moz-background-clip:padding; 
    -webkit-background-clip:padding-box; 
	background-clip:padding-box;
}

	
.about footer .call_to a.create:active {
	-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0) 1px 1px 0 inset;
	-moz-box-shadow:1px 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0) 1px 1px 0 inset;
	box-shadow:1px 1px 1px rgba(0,0,0,0.15), rgba(255,255,255,0) 1px 1px 0 inset;
}

.about .created_by {
	margin:17px 0 0 0;
	padding:0;
	float:left;
}

.call_to {
	position:absolute;
	right:0;
	width:220px;
	margin-top: -1px;
}

.about.mobile footer .call_to {
	float:left;
	margin:0;
	position: relative;
	margin-left: 10px;
}

.sorry_message {
	background: #e5e5e5;
	width: 100%;
	color: #656565;	
	line-height: 1.2em;
	padding: 15px 30px 13px 30px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	border-bottom: 1px solid #ccc;
}

.sorry_message p {
	padding-left: 25px;
	background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 0 -5550px;
	font-weight: 600;
	color: #888;
	font-size: .846153846em;
	margin: 0 auto;
	float: none;
	max-width: 640px;
}

.sorry_message p b {
	color: #666;
}

@media screen and (min-width:0px) and (max-width:745px) { 
		

		footer .please_note h4 {
			width:33%;
		}
		
		footer .please_note p {
			width:61%;
			font-size:0.923076923em;
			margin-top:14px;
			line-height:16px;
		}
		
		.call_to {
			position:relative !important;
			width:294px !important;
			margin-left:30.344545%;
			padding:0 20px 40px 0;
			border:0px solid rgba(0,0,0,0);
		    -webkit-box-sizing:border-box;
		    -moz-box-sizing:border-box;
		    box-sizing:border-box;
		    -moz-background-clip:padding-box !important;
		    -webkit-background-clip:padding-box !important;
		    background-clip:padding-box !important;
		}
		
		.call_to a.create {
			margin-right:50px;
		}
		
		h3.file_type small {
			display: none;
		}
		
		h3.file_type {
			font-size: 1.307692308em !important;
			width: 25% !important;
		}
		
		.please_note h4 {
			width: 25% !important;
		}
		
		p.small_description, .please_note p {
			width: 60% !important;
		}
		
		ul.images  {
			display: none;
		}
		
		.included_item_wrapper_css p.reveal a {
			margin-top: -13px;
			background:url(/static/images/site/icons/gridpak-sprite.png) no-repeat 0 -2410px;
		}
		
		.description .item {
			margin-bottom: 20px;
		}
		
		.description .row{
			margin-bottom: 0px;
		}
		
 
} 

@media screen and (min-width:0px) and (max-width:474px) {
		
		.call_to {
			position:relative !important;
			width:100% !important;
			float:none !important;
			padding:0 0 40px 0;
			border:0px solid rgba(0,0,0,0);
		    -webkit-box-sizing:border-box;
		    -moz-box-sizing:border-box;
		    box-sizing:border-box;
		    -moz-background-clip:padding-box !important;
		    -webkit-background-clip:padding-box !important;
		    background-clip:padding-box !important;
		    margin:0 auto;
		    overflow:auto;
		    
		}
		
		.call_to a.create {
			margin:40px auto 0 auto !important;
			float:none !important;
			display:block;
			width:138px;
		}
		
		
		.call_to .created_by  {
			text-align:center;
			margin:20px auto !important;
			float:none !important;
			width:179px;
			display:block;
		}
		
		.description .item {
			margin-bottom: 20px;
		}
		
		.description .row{
			margin-bottom: 0px;
		}
		
		/*.about nav a,
		header p,
		nav ul,
		#gridpak,
		.footer_wrapper form {
		    display:none;
		}
		
		header{
		    padding-right:0;
		}
		
		header nav{
		    float:right;
		    margin-right:-50px;
		}
		
		.index header:after{
		    background:url("/static/images/site/mobile-no-no.png") no-repeat center center;
		    content:" ";
		    display:block;
		    height:150px;
		    width:100%;
		    float:left;
		    margin-top:60px;
		}
		
		
	    .header_wrapper p{
	        font-size:10px;
	        margin-top:3px;
	        text-align:right;
	    }*/
}


 
 
        /* 1. 4 Column Grid 0px - 499px 
        ----------------------------------------------------------------------------- */

    	@media screen and (min-width:0px) and (max-width:499px) {
            .row {
                margin-left:-20px;
                padding:0;
            }
            .span_1, .span_2, .span_3, .span_4,
            .about .row .item {
	        	padding:0 12px;
	        	border:0px solid rgba(0,0,0,0);         
	        	border-left-width:20px;
	        	padding:0 12px;
                -webkit-box-sizing:border-box;
			    -moz-box-sizing:border-box;
			    box-sizing:border-box;
			    -moz-background-clip:padding-box !important;
			    -webkit-background-clip:padding-box !important;
			    background-clip:padding-box !important;
            }
            .span_1 {
                width:25.0%;
            }
            .span_2 {
                width:50.0%;
            }
            .span_3 {
                width:75.0%;
            }
            .about .row .item {
				width:100%;
			}
			.about .more {

			}
            
        } /* // min_width:0px */ 


        /* 2. Grid 0px - 600px 
        ----------------------------------------------------------------------------- */

    	@media screen and (min-width:0px) and (max-width:720px) {
			.included dt small {
				display:none;
			}
			.included dd > p {
				width:56%;
				margin-left:35%;
			}
			.included dd > ul {
				display:none;
			}
			.included dd.expands p.expand a {
				top:33px;
			}
		}

        /* 3. 8 Column Grid 800px - Infinity 
        ----------------------------------------------------------------------------- */

    	@media screen and (min-width:500px) {
	        .row {
				padding:0;
	            margin-left:-20px;
	        }
	        .span_1, .span_2, .span_3, .span_4, .span_5, .span_6, .span_7, .span_8, .left_column, 
	        .about .row .item {
	        	padding:0 12px;
	        	border:0px solid rgba(0,0,0,0);
	            border-left-width:20px;
			    float:left;
			    -webkit-box-sizing:border-box;
			    -moz-box-sizing:border-box;
			    box-sizing:border-box;
			    -moz-background-clip:padding-box !important;
			    -webkit-background-clip:padding-box !important;
			    background-clip:padding-box !important;
	        }
	        .span_1 {
	            width:12.5%;
	        }
	        .span_2 {
	            width:25.0%;
	        }
	        .span_3 {
	            width:37.5%;
	        }
	        .span_4,
	        .about .row .item {
	            width:50.0%;
	        }
	        .span_5 {
	            width:62.5%;
	        }
	        .span_6 {
	            width:75.0%;
	        }
	        .span_7 {
	            width:87.5%;
	        }      
        
        }
	
/* @end */

/* @group 8. ANIMATIONS
------------------------------------------*/

	/* @group 8.1 fadeIn
	------------------------------------------*/
	
	@-webkit-keyframes fadeIn {
		0% {opacity:0;}	
		100% {opacity:0.1;}
	}
	
	@-moz-keyframes fadeIn {
		0% {opacity:0;}	
		100% {opacity:0.1;}
	}
	
	@-ms-keyframes fadeIn {
		0% {opacity:0;}	
		100% {opacity:0.1;}
	}
	
	@-o-keyframes fadeIn {
		0% {opacity:0;}	
		100% {opacity:0.1;}
	}
	
	@keyframes fadeIn {
		0% {opacity:0;}	
		20% {opacity:0;}
		100% {opacity:0.1;}
	}
	
	@-webkit-keyframes fadeInTwo {
		0% {opacity:0;}	
		100% {opacity:1;}
	}
	
	@-moz-keyframes fadeInTwo {
		0% {opacity:0;}	
		100% {opacity:1;}
	}
	
	@-ms-keyframes fadeInTwo {
		0% {opacity:0;}	
		100% {opacity:1;}
	}
	
	@-o-keyframes fadeInTwo {
		0% {opacity:0;}	
		100% {opacity:1;}
	}
	
	@keyframes fadeInTwo {
		0% {opacity:0;}	
		100% {opacity:1;}
	}
	
	/* @end */
	
	
		
	/* @group 8.2 glow
	------------------------------------------*/

	@-webkit-keyframes glow {
		0% {-webkit-box-shadow:0 0 0 rgba(255,255,255,0);-moz-box-shadow:0 0 0 rgba(255,255,255,0);box-shadow:0 0 0 rgba(255,255,255,0);}	
		35% {-webkit-box-shadow:0 0 8px rgba(255,255,255,0.2);-moz-box-shadow:0 0 8px rgba(255,255,255,0.2);box-shadow:0 0 8px rgba(255,255,255,0.2);}
		100% {-webkit-box-shadow:0 0 0 rgba(255,255,255,0);-moz-box-shadow:0 0 0 rgba(255,255,255,0);box-shadow:0 0 0 rgba(255,255,255,0);}
		
	}
	
	@-moz-keyframes glow {
		0% {-webkit-box-shadow:0 0 0 rgba(255,255,255,0);-moz-box-shadow:0 0 0 rgba(255,255,255,0);box-shadow:0 0 0 rgba(255,255,255,0);}	
		35% {-webkit-box-shadow:0 0 8px rgba(255,255,255,0.2);-moz-box-shadow:0 0 8px rgba(255,255,255,0.2);box-shadow:0 0 8px rgba(255,255,255,0.2);}
		100% {-webkit-box-shadow:0 0 0 rgba(255,255,255,0);-moz-box-shadow:0 0 0 rgba(255,255,255,0);box-shadow:0 0 0 rgba(255,255,255,0);}
	}
	
	@-ms-keyframes glow {
		0% {-webkit-box-shadow:0 0 0 rgba(255,255,255,0);-moz-box-shadow:0 0 0 rgba(255,255,255,0);box-shadow:0 0 0 rgba(255,255,255,0);}	
		35% {-webkit-box-shadow:0 0 8px rgba(255,255,255,0.2);-moz-box-shadow:0 0 8px rgba(255,255,255,0.2);box-shadow:0 0 8px rgba(255,255,255,0.2);}
		100% {-webkit-box-shadow:0 0 0 rgba(255,255,255,0);-moz-box-shadow:0 0 0 rgba(255,255,255,0);box-shadow:0 0 0 rgba(255,255,255,0);}
	}
	
	@-o-keyframes glow {
		0% {-webkit-box-shadow:0 0 0 rgba(255,255,255,0);-moz-box-shadow:0 0 0 rgba(255,255,255,0);box-shadow:0 0 0 rgba(255,255,255,0);}	
		35% {-webkit-box-shadow:0 0 8px rgba(255,255,255,0.2);-moz-box-shadow:0 0 8px rgba(255,255,255,0.2);box-shadow:0 0 8px rgba(255,255,255,0.2);}
		100% {-webkit-box-shadow:0 0 0 rgba(255,255,255,0);-moz-box-shadow:0 0 0 rgba(255,255,255,0);box-shadow:0 0 0 rgba(255,255,255,0);}
	}
	
	@keyframes glow {
		0% {-webkit-box-shadow:0 0 0 rgba(255,255,255,0);-moz-box-shadow:0 0 0 rgba(255,255,255,0);box-shadow:0 0 0 rgba(255,255,255,0);}	
		35% {-webkit-box-shadow:0 0 8px rgba(255,255,255,0.2);-moz-box-shadow:0 0 8px rgba(255,255,255,0.2);box-shadow:0 0 8px rgba(255,255,255,0.2);}
		100% {-webkit-box-shadow:0 0 0 rgba(255,255,255,0);-moz-box-shadow:0 0 0 rgba(255,255,255,0);box-shadow:0 0 0 rgba(255,255,255,0);}
	}

	/* @end */
	


@-webkit-keyframes fadeInDown {
	0% {
		opacity:0;
		-webkit-transform:translateY(-20px);
	}

	100% {
		opacity:1;
		-webkit-transform:translateY(0);
	}
}

@-moz-keyframes fadeInDown {
	0% {
		opacity:0;
		-moz-transform:translateY(-20px);
	}

	100% {
		opacity:1;
		-moz-transform:translateY(0);
	}
}


@-ms-keyframes fadeInDown {
	0% {
		opacity:0;
		-ms-transform:translateY(-20px);
	}

	100% {
		opacity:1;
		-ms-transform:translateY(0);
	}
}

@-o-keyframes fadeInDown {
	0% {
		opacity:0;
		-ms-transform:translateY(-20px);
	}

	100% {
		opacity:1;
		-ms-transform:translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity:0;
		transform:translateY(-20px);
	}

	100% {
		opacity:1;
		transform:translateY(0);
	}
}


.tooltip span {
	display:none; 
	
}

/* .tooltip:hover span:before {*/
/*     content:' ';  */
/*     position:absolute;  */
/*     width:0;  */
/*     height:0;  */
/*     border:8px solid;   */
/* }*/

.tooltip:hover span,
.tooltip:focus span{
	/* display:inline; */
	position:absolute; 
	webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px; 
	border:1px solid #EEDE7D;
	-webkit-box-shadow:1px 1px 4px rgba(0,0,0,0.5), rgba(255,255,255,0.22) 1px 1px 0 inset;
	-moz-box-shadow:1px 1px 4px rgba(0,0,0,0.5), rgba(255,255,255,0.22) 1px 1px 0 inset;
	box-shadow:1px 1px 4px rgba(0,0,0,0.5), rgba(255,255,255,0.22) 1px 1px 0 inset;
	padding:7px 9px;
	min-width:40px;
	max-width:120px; 
	background:#1a94e2 -webkit-gradient(linear, left top, left bottom, from(#FFFAD9), to(#FFF4AA));
 	background:#1a94e2 -webkit-linear-gradient(top, #FFFAD9, #FFF4AA);
 	background:#1a94e2 -moz-linear-gradient(top, #FFFAD9, #FFF4AA);
	background:#1a94e2 -ms-linear-gradient(top, #FFFAD9, #FFF4AA);
	background:#1a94e2 -o-linear-gradient(top, #FFFAD9, #FFF4AA);
	background:#1a94e2 linear-gradient(top, #FFFAD9, #FFF4AA);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFAD9', EndColorStr='#FFF4AA'); 
	font-size:0.8em;
	line-height:1.3em;
	text-align:center;
	font-family:Helvetica, "Helvetica Neue", Arial, sans-serif;
	color:#555;
	text-shadow:-1px -1px 0 rgba(255, 255, 255, 0.3);
	-webkit-animation:fadeInDown 0.4s 0;
	-moz-animation:fadeInDown 0.4s 0;
	-ms-animation:fadeInDown 0.4s 0;
	-o-animation:fadeInDown 0.4s 0;
	animation:fadeInDown 0.4s 0;
}


.tooltip.large:hover span,
.tooltip.large:focus span {
	right:0;
	bottom:-98px;
}

.tooltip.large:hover span:before,
.tooltip.large:focus span:before {
	top:-15px;
	left:58px;
	border-color:transparent transparent #FFFAD9 transparent;  
}

.tooltip.small:hover span,
.tooltip.small:focus span {
	left:-5px;
	top:-40px;
}

.tooltip.small:hover span:before,
.tooltip.small:focus span:before {
	top:27px;
	left:23px;
	border-color:#FFF4AA transparent transparent transparent;  
}


/* @end */


.errors {
    clear:both;
    margin-top:10px;
    width:72.6%;
	webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px; 
	border:1px solid #EEDE7D;
	-webkit-box-shadow:1px 1px 4px rgba(0,0,0,0.5), rgba(255,255,255,0.22) 1px 1px 0 inset;
	-moz-box-shadow:1px 1px 4px rgba(0,0,0,0.5), rgba(255,255,255,0.22) 1px 1px 0 inset;
	box-shadow:1px 1px 4px rgba(0,0,0,0.5), rgba(255,255,255,0.22) 1px 1px 0 inset;
	padding:7px 9px;
	background:#1a94e2 -webkit-gradient(linear, left top, left bottom, from(#FFFAD9), to(#FFF4AA));
 	background:#1a94e2 -webkit-linear-gradient(top, #FFFAD9, #FFF4AA);
 	background:#1a94e2 -moz-linear-gradient(top, #FFFAD9, #FFF4AA);
	background:#1a94e2 -ms-linear-gradient(top, #FFFAD9, #FFF4AA);
	background:#1a94e2 -o-linear-gradient(top, #FFFAD9, #FFF4AA);
	background:#1a94e2 linear-gradient(top, #FFFAD9, #FFF4AA);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFAD9', EndColorStr='#FFF4AA'); 
	font-size:0.8em;
	line-height:1.3em;
	font-family:Helvetica, "Helvetica Neue", Arial, sans-serif;
	color:#555;
	text-shadow:-1px -1px 0 rgba(255, 255, 255, 0.3);
	-webkit-animation:fadeInDown 0.4s 0;
	-moz-animation:fadeInDown 0.4s 0;
	-ms-animation:fadeInDown 0.4s 0;
	-o-animation:fadeInDown 0.4s 0;
	animation:fadeInDown 0.4s 0;
}
