/* sidebar_responsive.css
------------------------- */

@media (max-width: 99999px) {
	.sidebar-responsive,
	.sidebar-left-responsive,
	.sidebar-right-responsive,
	.sidebar-button,
	#sidebar-button {
		display: none;
	}
}

@media (max-width: 1200px) {
	.sidebar-button-text {
		padding-left: 1em;
	}

	.sidebar-button-text:hover {
		text-decoration: underline;
	}

	.sidebar-left-responsive,
	.sidebar-right-responsive {
		display: block;
		width: 40%;
		position: relative;
	}

	.sidebar-left-responsive {
		display: block;
		margin-left: 5%;
	}

	.sidebar-right-responsive {
		display: block;
		margin-top: -56em;
		margin-bottom: 2em;
		margin-left: 55%;
	}

	.bgi-sidebar {
		padding: 5px 0 5px 2px;
	}

	.sidebar-button {
		display: list-item;
		background-color: #B7DEED;
		background-image: -moz-linear-gradient(-45deg,  #B7DEED 2%, #070403 26%, #070403 26%, #1D5E80 50%, #070403 67%, #B7DEED 88%, #070403 100%);
		background-image: -webkit-linear-gradient(-45deg,  #B7DEED 2%,#070403 26%,#070403 26%,#1D5E80 50%,#070403 67%,#B7DEED 88%,#070403 100%);
		background-image: linear-gradient(135deg,  #B7DEED 2%,#070403 26%,#070403 26%,#1D5E80 50%,#070403 67%,#B7DEED 88%,#070403 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B7DEED', endColorstr='#070403',GradientType=1 );
		border: 2px solid #0076b1;
		border-radius: 6px;
		color: #ffffff;
		cursor: pointer;
		float: left;
		font-size: 1.2em;
		font-weight: bold;
		margin-left: 45%;
		margin-bottom: 15px;
		margin-top: 2em;
		padding: 4px 8px;
		width: 7.6em;
	}

	.sidebar-button:hover {
		background-color: #B7DEED;
		background-image: -moz-linear-gradient(-55deg,  #B7DEED 2%, #070403 26%, #070403 26%, #1D5E80 50%, #070403 67%, #B7DEED 88%, #070403 100%);
		background-image: -webkit-linear-gradient(-55deg,  #B7DEED 2%,#070403 26%,#070403 26%,#1D5E80 50%,#070403 67%,#B7DEED 88%,#070403 100%);
		background-image: linear-gradient(155deg,  #B7DEED 2%,#070403 26%,#070403 26%,#1D5E80 50%,#070403 67%,#B7DEED 88%,#070403 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B7DEED', endColorstr='#070403',GradientType=1 );
		color: #d7d7d7;
	}
}

@media (max-width: 880px) {
	.sidebar-button {
		margin-left: 44%;
	}
}

@media (max-width: 780px) {
	.sidebar-responsive {
		display: block;
		margin-left: 25%;
		margin-bottom: 1em;
		width: 50%;
	}

	#sidebar-button {
		display: list-item;
		background-color: #B7DEED;
		background-image: -moz-linear-gradient(-45deg,  #B7DEED 2%, #070403 26%, #070403 26%, #1D5E80 50%, #070403 67%, #B7DEED 88%, #070403 100%);
		background-image: -webkit-linear-gradient(-45deg,  #B7DEED 2%,#070403 26%,#070403 26%,#1D5E80 50%,#070403 67%,#B7DEED 88%,#070403 100%);
		background-image: linear-gradient(135deg,  #B7DEED 2%,#070403 26%,#070403 26%,#1D5E80 50%,#070403 67%,#B7DEED 88%,#070403 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B7DEED', endColorstr='#070403',GradientType=1 );
		border: 2px solid #0076b1;
		border-radius: 6px;
		color: #ffffff;
		cursor: pointer;
		float: left;
		font-size: 1.2em;
		font-weight: bold;
		margin-left: 42%;
		margin-bottom: 15px;
		margin-top: 2em;
		padding: 4px 8px;
		width: 7.6em;
	}

	#sidebar-button:hover {
		background-color: #B7DEED;
		background-image: -moz-linear-gradient(-55deg,  #B7DEED 2%, #070403 26%, #070403 26%, #1D5E80 50%, #070403 67%, #B7DEED 88%, #070403 100%);
		background-image: -webkit-linear-gradient(-55deg,  #B7DEED 2%,#070403 26%,#070403 26%,#1D5E80 50%,#070403 67%,#B7DEED 88%,#070403 100%);
		background-image: linear-gradient(155deg,  #B7DEED 2%,#070403 26%,#070403 26%,#1D5E80 50%,#070403 67%,#B7DEED 88%,#070403 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B7DEED', endColorstr='#070403',GradientType=1 );
		color: #d7d7d7;
	}

	.sidebar-button {
		margin-left: 42%;
	}
}

@media (max-width: 754px) {
	#sidebar-button {
		margin-left: 42%;
	}
}

@media (max-width: 754px) {
	.sidebar-right-responsive {
		margin-top: -58em;
	}
}

@media (max-width: 600px) {
	.sidebar-responsive {
		margin-left: 25%;
	}

	.sidebar-button {
		margin-left: 41%;
	}

	#sidebar-button {
		margin-left: 39%;
	}
}

@media (max-width: 480px) {
	.sidebar-button {
		margin-left: 37%;
	}

	#sidebar-button {
		margin-left: 38%;
	}
}

@media (max-width: 420px) {
	.sidebar-button,
	#sidebar-button {
		margin-left: 36%;
	}
}

@media (max-width: 350px) {
	.sidebar-button {
		margin-left: 33%;
	}

	#sidebar-button {
		margin-left: 32%;
	}
}