@import "_grid.less";
@import "_colors.less";
@import "_button.less";
@import "_variables.less";

@import url(http://fonts.googleapis.com/css?family=Raleway:400,100,200,300);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);

@main: #D55C2B;

*{
	box-sizing:border-box;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

body{
	font-family: 'Raleway';
	margin:80px 0 0 0;
	padding:0;
	background-color: #eaeaea;
}

ul{
	margin:0;
	padding:0;
	list-style: none;

	li{
		padding: @gutter/2 0;

		&:before{
			content: '\f1db';
			opacity: .4;
			margin-right: 10px;
			font-family: 'FontAwesome';
		}
	}
}

.nav{
	display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
	-webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
	position: fixed;
	z-index: 10;
	background-color: white;
	height: 80px;
	width: 100%;
	top:0;
	left: :0;
	padding:0 20px;
	box-shadow: 0 2px 5px -2px rgba(0,0,0,0.4);

	h1{
		color:#222;
		width:auto;
		display: inline;

		span{
			color: fade(#222,50%);
			font-size: .6em;
		}
	}

	p{
		color:#A9A9A9;
	}
}

button{
	span{
		    font-size: .7em;
   		 display: block;
    	font-style: italic;
	}
}

#browsers{
	i{
		text-align: center;
		font-size: 40px;
		color:#959595;
	}

	p{
		width: 100%;
		text-align: center;
		font-weight: 500;
		color: #959595;
		font-size: 20px;
	}
}

h1,h2{
	width: 100%;
}

h2{
	span{
		color: @blue;
		font-size: .7em;
		font-style: italic;

		&:before{
			content: '\f121';
			margin-right: 5px;
			font-family: 'FontAwesome';
		}
	}

	a{
		font-size: .8em;
    	float: right;
    	text-decoration: none;
    	color: @grey;

    	&:after{
    		content: '\f148';
    		margin-left: 10px;
    		font-family: 'FontAwesome';
    	}
	}
}

.center{
	text-align: center;

	.line{
		  display: inline-block;
		  height: 1px;
		  width: 30px;
		  background-color: #BBB;
		  vertical-align: super;
		  margin: 0 10px;
	}
}

.hint{
    margin-right: 10px;
    background-color: #FFE800;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

pre{
    margin: 0;
    width: 100%;
    white-space: normal;
}

code{
    padding: 20px!important;
    width: 100%;
}

#mainDemo{
	width: 100%;
	height: 500px;
}

a{
	color:@blue;
}