@import '../variables';
@import '../modules/transparent-navbar';
@import '../vendor/modular-scale/modular-scale';


.generic-background {
    background: -webkit-gradient(linear, left top, left bottom, from($nextcloud-blue), color-stop(100%, #3e9ed8), to(#d8d8d8));
    background: linear-gradient(to bottom, $nextcloud-blue, #3e9ed8 100%, #d8d8d8);
    padding: 0;
    border-radius: 0 !important;
    margin-bottom: 70px;
    height: 300px;
    min-height: 300px;
    max-height: 300px;

    .pattern {
        width:100%;
        height:100%;
        opacity: 0.1;
        background: url('../../img/headers/generic.png') no-repeat;
        background-size: cover;
        background-position: center;
    }
    @media (max-width: $break-big) {
        height: 200px;
        min-height: 200px;
        max-height: 200px;
    }
}

/* General */

footer {
    margin-top: 100px;
}

.numbadge {
    border-radius: 50%;
    width: 53px;
    height: 53px;
    color: white;
    background: #0082C9;
    text-align: center;
    padding-top: 4px;
    font-size: 21px;
    border: 4px solid white;
    i {
        color: white;
    }
}

.devicebadge {
    background: none;
    width: 150px;
    height: 150px;
    font-size: 90px;
    i {
        color: $nextcloud-blue;
    }
}

.numbadge.centre {
    margin-left: auto;
    margin-right: auto;
}

hr {
	margin-top: 130px;
    border-bottom: 1px dotted #0082C9;
}

.narrow, .wide {
    display: none;
    margin-bottom: -28px;
}

.narrow {
    margin-bottom: -27px;
}

.label-blue {
	color: white;
	background-color: #0082C9;
	border-radius: 10px;
	padding: 5px 7px;
}

.download--description {
	h2 {
		margin: 0 auto;
		text-align: center;
		font-size: 40px;
	}
	p {
	    @media (max-width: $break-big) {
			margin: 0 auto;
			text-align: center;
        }
	}
}

.PopupGetStarted {
    height: auto;
    margin: 0 auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    display: none;

	.instructions {
		position: absolute;
		max-width: 95%;
		padding: 15px;
		margin: 130px auto 0 auto;
		background: white !important; /* I seem to have to enforce this, comes from main.min.css*/
		border-radius: 4px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		-webkit-animation-name: FromTop; /* Chrome, Safari, Opera */
		-webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
		animation-name: FromTop;
		animation-duration: 0.5s;
		.overlay-body {
			.downloadbutton {
				text-align: center;
				position: relative;
			}

			.downloadbutton .btn {
				padding: 20px;
				font-size: 22px;
			}
		}
	}

	.close {
		color: #575858;
		font-size: 2.75em;
		opacity: 0.8;
		float: right;
		margin-top: -25px;
		margin-right: 15px;
		z-index: 10;
	}

	.close:hover, .close:focus {
		opacity: 1;
		text-decoration: none;
	}
	ul.nav-tabs {
		position: absolute;
		margin-top: 0px;
		font-size: 15px;
		font-weight: 400;
		border: none;
		line-height: 1.6em;
		@media(max-width: $break-small) {
			margin-top: 40px;
			font-size: 12px;
			margin-left: -15px;
			margin-right: -10px;
		}
		li {
			width: 210px;
			max-width: 32%;
/* 			height: 85px; */
			bottom: 0;
			padding: 5px 0 5px 0;
			text-align: center;
			text-decoration: none;
			margin: 0 0 30px 0;
			border-bottom: 1px solid transparent;

			@media(max-width: $break-small) {
				min-height: 70px;
				padding: 5px 0px 5px 0;
			}
			i {
/* 				font-size: 13px; */
			}
			&:focus,
			&:hover,
			&:active,
			&.active {
				border-bottom: 1px solid #333;
				a {
					margin: 0 auto;
					text-align: center;
					border: none;
					border-radius: none;
					color: #555;
					font-weight: 700;
					i {
						font-weight: 400;
					}
				}
			}
			a {
				margin: 0 auto;
				text-align: center;
				border: none;
				border-radius: none;
				color: #555;
				text-decoration: none;
				&:focus,
				&:hover,
				&:active
				&.active {
					text-decoration: none;
				}
			}
		}
	}
	.thumbnail {
		box-shadow: 0 0 2px 1px #EEE;
	}
	.tab-content {
		margin-top: 40px;
		@media(max-width: $break-small) {
			margin-top: 100px;
		}
	}
}

.PopupGetStarted:target, div.PopupGetStarted:target+a.mask{
    display: block;
    opacity: 1;
}

.mask {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(29, 45, 68, 0.5);
	z-index: 500;
	display: none;
}



/* Add animation (Chrome, Safari, Opera) */
@-webkit-keyframes FromTop {
    from {top:-100px;opacity: 0;}
    to {top:0px;opacity:1;}
}

/* Add animation (Standard syntax) */
@keyframes FromTop {
    from {top:-100px;opacity: 0;}
    to {top:0px;opacity:1;}
}

@media(min-width: 996px) {
    hr.wide {
        display: block;
    }
}
@media(max-width: 996px) {
    hr.narrow {
        display: block;
        margin-top: 50px;
    }
}