$light-gray: #ccc;
$very-light-gray: #f5f5f5;

@import 'mixins/breakpoint';

#jpo-welcome-panel {
	*, *:before, *:after { box-sizing: border-box; }

    background-repeat: no-repeat;
    background-position: center bottom;
    -webkit-background-size: 520px auto;
    position: fixed;
    top: 0;
    left: 160px;
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    background-color: #fff;
    padding: 100px;
    z-index: 999;

    @media (max-width: 960px) {
        left: 36px;
    }

    @media (max-width: 782px) {
        left: 0px;
    }

	margin-bottom: 20px;
	.submit {
		border-radius: 6px;
	}

	#dopsid0 .submit {
		padding: 10px !important;
		margin-top: 25px !important; // these !impt. tags are here to overwrite other inline styles. css needs to be rethought
		margin-bottom: 25px !important;
	}
}

.welcome-panel {
	overflow: visible !important; // for tooltips
}

.getting-started {
	padding-bottom: 10px;

	h4 {
		margin: 0;
		font-size: 20px;
	}
}

#welcome__site-title {

	input{
		width: 100%;
	}
}

.welcome__content_box {
	background: white;
	margin: 10px;
	border: 1px solid #eee;	

	h3 {
		padding: 5px 5px 10px 10px;
		border-bottom: 1px solid #eee;
	}
}

.welcome__section {
	h3 {
		em {
			font-weight: bold;
		}
	}

	h4 {
		border-bottom: 1px #ddd solid;
	}
}

#welcome__stats a.skip, #welcome__traffic a.skip {
	margin-left: 0;
}

.welcome__helper {
	padding-top: 15px;
	border-top: 1px solid #ddd;
}

#welcome__design .theme-browser {
	margin-top: 10px;
	padding-left: 10px;
	min-width: 180px;

	.theme.active {
		box-shadow: 0px 0px 8px 0px rgba(53, 146, 182,1);
		border: 1px solid rgba(53, 146, 182,1);
	}

	.theme-name { padding-right: 0px; }

	@include minbreakpoint(tablet) {
		.theme {
			width: 30%;
		}
	}

	@include breakpoint(phablet) {
		.theme {
			display: block;
			float: none;
		}
	}

	* { box-sizing: content-box; }
	h3 {
		line-height: 1.4em; 
		text-align: left !important; 
	}
}

#welcome__design .wp-pointer-content h3:before {
	content: '\f100';
}