/*
	Iridium by TEMPLATED
    templated.co @templatedco
    Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/

/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/

html, body {
	/*max-width: 100% !important;*/
	/*overflow-x: hidden !important;*/
}

    html, body {
        height: 100%;
        width: 100%;
        margin: 0;
    }
	body
	{
		background: #141414;
	}

    .paypalbutton{
        display: none;
    }

	body,input,textarea,select
	{
		font-family: 'Arimo', sans-serif;
		font-size: 11pt;
		line-height: 1.75em;
		color: #4c4c4c;
	}

	th {
		font-weight: bold;
	}

    .logout{
        top: 10px;
        right: 30px;
        position: absolute;
    }

	.username{
		top: 10px;
		right: 10px;
		display: none;
		position: absolute;
		text-transform: uppercase;
		color: rgb(236, 236, 236);
		padding-top: 10px;

	}
	.available{
		padding: 20px;
		padding-left: 0;
		font-size: 20px;
		font-weight: 200;
		display: block;
	}
	.notavailable{
		padding: 20px;
		padding-left: 0;
		padding-top: 0;
		color: red;
		font-size: 20px;
		font-weight: 200;
		display: inline-block;
	}
    .text{
        color: rgb(236, 236, 236);
    }

	h1,h2,h3,h4,h5,h6
	{
		/*text-transform: uppercase;*/
		font-weight: bold;
	}
	
		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
		{
			color: inherit;
			text-decoration: none;
		}


	#title
	{
		font-size: 400%;
		color: #EEEEEE	;
	}

	/* Change this to whatever font weight/color pairing is most suitable */
	strong, b
	{
		font-weight: bold;
		color: #000000;
	}
	
	em, i
	{
		font-style: italic;
	}

	/* Don't forget to set this to something that matches the design */
	a
	{
		text-decoration: underline;
		color: #272727;
	}

	a:hover
	{
		text-decoration: none;
	}
	
	sub
	{
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}
	
	sup
	{
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}
	
	hr
	{
		border: 0;
		border-top: solid 1px #ddd;
	}
	
	blockquote
	{
		border-left: solid 0.5em #ddd;
		padding: 1em 0 1em 2em;
		font-style: italic;
	}


	p, ul, ol, dl, table
	{
		margin-bottom: 1em;
	}

        p {
            padding-top: 10px;
        }
	
		header h2
		{
		}
	
		header .byline
		{

			display: block;
			margin: 0.5em 0 0 0;
			padding: 0 0 0.5em 0;

		}
		
	footer
	{
		width: 100%;
        height: 100px;
        position: absolute;
        bottom: 184px;
        left: 0;
	}

	br.clear
	{
		clear: both;
	}

	/* Sections/Articles */
	
		section,
		article
		{
			margin-bottom: 3em;
		}
		
		section > :last-child,
		article > :last-child
		{
			margin-bottom: 0;
		}

		section:last-child,
		article:last-child
		{
			margin-bottom: 0;
		}

		.row > section,
		.row > article
		{
			margin-bottom: 0;
		}

	/* Images */

		.image
		{
			display: inline-block;
		}
		
			.image img
			{
				display: block;
				width: 100%;
			}

			.image.featured
			{
				display: block;
				width: 100%;
				margin: 0 0 2em 0;
			}
			
			.image.full
			{
				display: block;
				width: 100%;
				margin: 0 0 2em 0;
			}
			
			.image.left
			{
				float: left;
				margin: 0 2em 2em 0;
			}
			
			.image.centered
			{
				display: block;
				margin: 0 0 2em 0;
			}

				.image.centered img
				{
					margin: 0 auto;
					width: auto;
				}

	/* Lists */

		ul.default
		{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		
			ul.default li
			{
				padding: 0.60em 0em;
				border-top: 1px solid;
				border-color: rgba(255,255,255,.1);
			}
			
			ul.default li:first-child
			{
				padding-top: 0;
				border-top: none;
			}
			
			ul.default a
			{
				text-decoration: none;
				color: rgba(255,255,255,.5);
			}
			
			ul.default a:hover
			{
				text-decoration: underline;
			}
			
		ul.style {
		}
		
		ul.style li {
			margin: 0;
			padding: 2em 0em 1.5em 0em;
			border-top: 1px solid #ECECEC;
		}
		
		ul.style li:first-child
		{
			padding-top: 0;
			border-top: none;
		}
		
		ul.style img {
			float: left;
			margin-right: 20px;
		}
		
		ul.style p {
		}
		
		ul.style .posted {
			padding: 0em 0em 1em 0em;
			letter-spacing: 1px;
			text-transform: uppercase;
			font-size: 8pt;
			color: #A2A2A2;
		}
		
		ul.style .first {
			padding-top: 0px;
			border-top: none;
		}


		.email_scroll {
			max-width: 190px;
			overflow: scroll;
		}

	/* Buttons */
		
		.button
		{
			position: relative;
			display: inline-block;
			margin-top: 2em;
			padding: 0.90em 1.5em;
			background: #e95d3c;
			border-radius: 40px;
			text-decoration: none;
			text-transform: uppercase;
			font-size: 1.1em;
			color: #FFF;
			-moz-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
			-webkit-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
			-o-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
			-ms-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
			transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
			cursor: pointer;
		}

		.button:hover
		{
			background: #de3d27;
			color: #FFF !important;
		}



		.selectable{

			cursor: pointer;
			margin: 5px;
			padding: 5px;
			background-color: whitesmoke;

			-webkit-user-select: none; /* Chrome/Safari */
			-moz-user-select: none; /* Firefox */
			-ms-user-select: none; /* IE10+ */

		}

		.leftarrow{
			background-image:    url(../images/arrowleft.png);
			background-size:     5%;                      /* <------ */
			background-repeat:   no-repeat;
			/*background-color: red;*/
			background-position:  right;
			background-origin: content-box;
		}
		.rightarrow{
			background-image:    url(../images/arrowright.png);
			background-size:     5%;                      /* <------ */
			background-repeat:   no-repeat;
			/*background-color: red;*/
			background-position:  right;
			background-origin: content-box;
		}
		.multiselect{


		}

        .radio_center{
          margin: 0 0 0 0;
          margin-top: 15px !important;
        }



/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

    #import_container{
        position: absolute;

		bottom: 0px;
		right: 0px;

		padding-bottom: 15px;
		padding-right: 10px;


    }


	#forgot_pass{

		cursor: pointer;

	}

	#forgot_pass_container{
		display: inline-block;
		margin-left: 35%;
		width: 30%;

		text-align: center;

		padding: 20px;
	}

    .boxcontainer{
        width: 90%;
        box-shadow: 1px 1px 3px 1px rgba(136, 136, 136, 0.54);
        padding: 30px;
        margin-left: 5%;
        background-color: white;
        margin-top: -184px;

		font-family: Roboto, sans-serif;
        /*min-width: 1250px;*/


    }

    .tabletitle{
        margin-top: -5px;
        margin-bottom: 30px;
		font-size: 40px;
		font-weight: 300;
		display: inline-block;

    }

	.paymentstabletitle{
		margin-top: 40px;
	}

	.tablesubtitle{
		font-size: 20px;
		margin-bottom: 60px;
	}

    ._flatselect{


        display: block;
        float: left;
        height: 30px;
        margin: 7px 0 0 0;
        padding: 0 10px;
        margin-right: 10px;
        border-radius:1px;
        -webkit-appearance: none; /* Safari and Chrome */
        -moz-appearance:none; /* Firefox */
        border-color: rgb(180, 180, 180);

    }

	.goback{
		position: absolute;
		display: inline-block;
		text-transform: uppercase;
		padding: 10px;
		padding-right: 30px;
		padding-left: 30px;
		background-color: #db1940;
		color: white;
		margin-left: -40px;
		margin-top: -50px;


		border-radius: 1px;
		cursor: pointer;

		-webkit-user-select: none; /* Chrome/Safari */
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* IE10+ */

		box-shadow: 1px 1px 3px 1px rgba(136, 136, 136, 0.54);
	}

	.options{
		width: 100%;

		margin-bottom: 30px;

	}
	.option{
		display:inline-block;
		/*background-color: white;*/
		width: 25%;
		height: 300px;
		margin-left: 4%;
		margin-right: 4%;
		box-shadow: 1px 1px 3px 1px rgba(136, 136, 136, 0.3);
		/*background-color: #246fbc;*/

	}

	.option_details{
		/*margin-top: -150px;*/
		background-color: transparent;
		/*z-index: 10;*/
	}

	.solid{
		width: 100%;
		height: 150px;
		background-color: #2464b2;
		position: relative;
		z-index: 10;
	}

	.option_title{

		padding-top: 10px;
		padding-left: 20px;
		/*height: 50px;*/
		display: inline-block;

		/*text-align: right;*/
		font-size: 60px;
		color: white;

	}

	.per_text{
		color: white;
		margin-left: 5px;
		margin-top: 0px;
		display: inline-block;
	}

	.option_subtitle{

		width: auto;
		padding: 5px;
		color: white;
		font-size: 16px;
		text-align: center;
		margin-top: 10px;
		font-weight: 500;

	}

	.option_text{
		padding-left: 17%;
		padding-right: 17%;
		padding-top: 10%;
		padding-bottom: 10%;
		font-size: 15px;
		color: black;
		height: 150px;
	}

	.one_sharlock{

		width: 140px;
		height: 140px;
		position: absolute;
		/*top: 0px;*/
		margin-left: -30px;
		margin-top: -35px;

		background-image:    url(../images/one_sharlock.png);
		background-size:     cover;                      /* <------ */
		background-repeat:   no-repeat;
		background-position: center center;
	}
	.two_sharlock{
		width: 130px;
		height: 130px;
		position: absolute;
		/*top: 0px;*/
		margin-left: -20px;
		margin-top: -30px;

		background-image:    url(../images/two_sharlock.png);
		background-size:     cover;                      /* <------ */
		background-repeat:   no-repeat;
		/*background-color: red;*/
		background-position: center center;
	}
	.three_sharlock{
		width: 130px;
		height: 130px;
		position: absolute;
		/*top: 0px;*/
		margin-left: -30px;
		margin-top: -40px;

		background-image:    url(../images/three_sharlock.png);
		background-size:     cover;                      /* <------ */
		background-repeat:   no-repeat;
		background-position: center center;
	}

	.buy_button{
		width: 80%;
		height: 50px;
		/*position: absolute;*/
		/*margin-top: 55px;*/
		margin-left: 10%;
		margin-top: -30px;

		text-align: center;
		font-size: 20px;
		padding-top: 10px;
		color: white;


		background-color: #db1940;


		border-radius: 1px;
		cursor: pointer;

		-webkit-user-select: none; /* Chrome/Safari */
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* IE10+ */

		box-shadow: 1px 1px 3px 1px rgba(136, 136, 136, 0.54);

	}

	.buy_button:active{
		box-shadow: 1px 1px 2px 0px rgba(136, 136, 136, 0.54);
	}



	.success{
		display: none;
		font-family: 'Arimo', sans-serif;
		position: fixed;
		width: 60%;
		top: 25%;
		left: 20%;
		background-color: white;
		box-shadow: 1px 1px 2px 0px rgba(136, 136, 136, 0.54);
		z-index: 10000;

	}

	.success_solid{
		width: 100%;
		height: auto;
		background-color: #2464b2;
		z-index: 10;
		padding-bottom: 30px;
	}
	.success_title{
		text-align: center;
		font-size: 60px;
		padding: 20px;

		font-weight: 100;
		color: white;

	}

	.success_icon{
		left: 50%;
		margin-left: -50px;
	}
	.success_subtitle{
		text-align: center;

		font-size: 25px;
		padding: 25px;
		font-weight: 200;
		padding-bottom: 0;
	}

	.success_text{
		text-align: center;
		font-size: 15px;
		padding: 45px;
		padding-top: 30px;
		font-weight: 100;
	}

	.done_button{
		font-weight: 100;
		width: 40%;
		height: 50px;
		position: absolute;
		/*margin-top: 55px;*/
		margin-left: 30%;
		margin-top: -30px;

		text-align: center;
		font-size: 20px;
		padding-top: 10px;
		color: white;


		background-color: #db1940;


		border-radius: 1px;
		cursor: pointer;

		-webkit-user-select: none; /* Chrome/Safari */
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* IE10+ */

		box-shadow: 1px 1px 3px 1px rgba(136, 136, 136, 0.54);
	}

	.done_button:active{
		box-shadow: 1px 1px 2px 0px rgba(136, 136, 136, 0.54);
	}

	.wait{
		position: fixed;
		text-align: center;
		width: 30%;
		top: 20%;
		left: 35%;
		display: none;

		padding: 40px;

		background-color: white;
		box-shadow: 1px 3px 3px 1px rgba(136, 136, 136, 0.54);

	}
	.wait_text{
		color: black;
		font-weight: 300;
		font-size: 20px;
	}

	.cancel_button{
		font-weight: 300;
		width: 80%;
		height: 50px;
		position: absolute;
		/*margin-top: 55px;*/
		margin-left: 0%;
		margin-top: 15px;

		text-align: center;
		font-size: 20px;
		padding-top: 10px;
		color: white;


		background-color: #db1940;


		border-radius: 1px;
		cursor: pointer;

		-webkit-user-select: none; /* Chrome/Safari */
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* IE10+ */

		box-shadow: 1px 3px 3px 1px rgba(136, 136, 136, 0.54);
	}
	.cancel_button:active{
		box-shadow: 1px 1px 2px 0px rgba(136, 136, 136, 0.54);
	}

	#total_users{
		text-align: center;
		font-size: 40px;
		display: inline-block;
	}
	#total_price{
		text-align: center;
		font-size: 40px;
		display: inline-block;
	}
	#total_big{
		text-align: center;
		font-size: 40px;
		display: inline-block;
	}
	.subtext{
		display: inline-block;
		margin-left: 5px;
		margin-right: 10%;
	}

	.resume{
		text-align: center;
	}
	#header
	{
		position: relative;
		background: #2a2f27 url(../images/banner.jpg) no-repeat;
		background-size: cover;
	}

	#logo
	{
	}
	
	#nav
	{
	}

		#nav ul
		{
			margin: 0;
		}



	.multiselect
	{
		width:100%;
		display: block;

		margin-bottom: 20px;
		margin-top: 15px;
	}
	.add_remove_buttons_div
	{
		max-width: 100px;
		display: inline;
	}

/*********************************************************************************/
/* Banner                                                                        */
/*********************************************************************************/

	#banner
	{
		position: relative;
		background: #333;
		color: #fff;
	}

	#sharlock_picker
    {
    	position: fixed;
    	display: table;
       	visibility: hidden;
       	background: #ffffff;

		left: 25%;
		top: 25%;

		width: 50%;

		padding: 20px;

		box-shadow: 1px 3px 3px 3px rgba(136, 136, 136, 0.54);

		min-width: 400px;

    }

    .shadow{
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px#888;
        box-shadow: 0 0 5px #888;
    }

    ._experimentalheader{
        background-color: #1d5996;
        width: 100%;

        height: 250px;


    }
	._experimentallogofull{
		background-color: #1d5996;
		width: 25%;


		height: auto;
		margin-left: 37.5%;
		margin-top: 50px;

	}
    ._experimentallogo{
        height: 45px;
        margin-top: 35px;
        margin-left: 80px;
    }

    #sharlock_config
	{
		position: fixed;
		display: table;
		visibility: hidden;
		background: #ffffff;

		left: 10%;
		top: 25%;

		width: 80%;

		padding: 20px;

		box-shadow: 1px 3px 3px 3px rgba(136, 136, 136, 0.54);

		min-width: 705px;

	}
	#user_import_preview{
		position: fixed;
		display: table;
		visibility: hidden;
		background: #ffffff;
		overflow: hidden;

		left: 10%;
		top: 15%;

		width: 80%;
		height: 80%;



		box-shadow: 1px 3px 3px 3px rgba(136, 136, 136, 0.54);

		min-width: 705px;

		padding: 20px;


	}
	#table_title_container{
		padding: 20px;
		padding-bottom: 0;
		/*background-color: darkgray;*/
	}
	#preview_title{
		font-size: 40px;
		font-weight: 300;
		display: inline-block;
		margin: 0;
		padding: 0;
	}
	#amount_users_container{
		float: right;
		display: inline;
		/*background-color: gray;*/
	}
	#amount_users{
		display: inline;
		margin-right: 5px;
		font-size: 20px;
	}
	#amount_users_number{
		display: inline;
		font-size: 40px;
	}
	#user_import_preview_scroll_container{

		position: relative;
		width: 100%;
		height: 80%;
	}
	#user_import_preview_scroll{
		position: absolute;
		max-height: 100%;
		overflow: scroll;
		width: 100%;
		padding: 20px;
		overflow: -moz-scrollbars-vertical;
	}
	#table_preview{
		position: relative;
		max-height: 100%;

	}
	#buttons_preview{
		position: absolute;
		bottom: 20px;
	}
	#default_container{
		position: absolute;
		right: 40px;
		bottom: 20px;
	}
	.default_group{
		/*margin-right: 40px;*/
		float: right;
		margin-right: 30px;
	}
	#default_note{

	}
	#note_container{
		position: relative;
		display: inline-block;
		margin-right: 20px;
	}
	#onoff_container{
		position: relative;
		display: inline;
		height: auto;
		width: auto;
	}
	#id_group_container{
		position: relative;
		display: inline;
		height: auto;
		width: auto;

	}
    #week_picker
        {
        	position: fixed;
        	display: table;
           	visibility: hidden;
           	background: #ffffff;

    		left: 25%;
    		top: 50%;

    		width: 50%;

    		padding: 20px;

    		box-shadow: 0px 2px 10px #555555;
    		border-style: solid;
            border-width: 1px;
            border-radius: 2px;

        }

/*********************************************************************************/
/* Main                                                                          */
/*********************************************************************************/

	#main
	{
		position: relative;
		background: #fff;
	}

/*********************************************************************************/
/* Featured                                                                      */
/*********************************************************************************/
	
	#featured
	{
		position: relative;
		background: #f2f2f2;
	}
	
	#featured h2
	{
		display: block;
		margin-bottom: 2em;
		font-size: 1.4em;
	}
	
/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/
	
	#footer
	{

		background: white;
		width: 100%;
        height: 100px;
        position: absolute;
        bottom: -184px;
        left: 0;
	}
	
	#footer h2
	{
		display: block;
		color: #FFF;
	}
	
/*********************************************************************************/
/* Copyright                                                                     */
/*********************************************************************************/
	
	#copyright
	{
		position: relative;
		padding: 3em 0em;
		letter-spacing: 1px;
		text-align: center;
		color: rgba(255,255,255,.2);
	}
	
	#copyright .container
	{
	}
	
	#copyright a
	{
		text-decoration: none;
		color: rgba(255,255,255,.3);
	}

	@media only screen and (min-width:2000px){
	    .boxcontainer{
                width: 60%;
                margin-left: 20%;
                margin-top: -184px;
            }
	}
	@media only screen and (min-width:1600px){
		._experimentallogofull{
			width: 15%;
			margin-left: 42.5%;
			margin-top: 70px;
		}
	}
	@media only screen and (max-width:500px){
    	    ._experimentallogofull{
                width: 70%;
                height: auto;
                margin-top: 65px;
                margin-left: 15%;
            }
    	}