/*
Name: OCMX Control Panel 3.0
Design Studio: Obox Design http://www.obox-design.com/
Version: 1.0.0

*-----------------------------*
WARNING! DO NOT EDIT THIS FILE!
*-----------------------------*

*/


/*-------------------------------------------------------------------------------------------*/
/*- SETUP STD CLASSES -----------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
#obox-wrapper{margin-right: 20px;}
.obox-content{clear: both; max-width: 940px; line-height: 1.4em;}

.obox-content img{max-width: 100%;}

.obox-theme-name{padding-left: 50px; background: url(images/welcome/obox-logo-sml.png) left no-repeat; line-height: 40px;}
h2.nav-tab-wrapper, h3.nav-tab-wrapper{padding: 10px 10px 0px; margin: 10px 0px 30px; background: #f3f3f3; border-radius: 5px 5px 0px 0px;}
h2 .nav-tab{background: #fff;}


/*-------------------------------------------------------------------------------------------*/
/*- COMMON ELEMENTS -------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/

	.section{clear: both; padding: 0px 0px 30px; margin: 0px 0px 30px; border-bottom: 3px solid #ddd;}

	/*-------------------------------*/
	/*- GRIDS -----------------------*/
	.grid, .action-list{overflow: hidden;}
	.columns-4 .column{float: left; width: 23%; margin-right: 2%;}
	.columns-4 .column:nth-child(4n+4){margin-right: 0%;}
	.columns-4 .column:nth-child(4n+5){clear: left;}

	.columns-3 .column{float: left; width: 31%; margin-right: 2%;}
	.columns-3 .column:nth-child(3n+3){margin-right: 0%;}
	.columns-3 .column:nth-child(3n+4){clear: left;}

	.columns-2 .column{float: left; width: 49%; margin-right: 2%;}
	.columns-2 .column:nth-child(2n+2){margin-right: 0%;}
	.columns-2 .column:nth-child(2n+3){clear: left;}
	
	.columns-1 .column{float: none; width: 100%; margin: 0%;}
	
	
	.settings-title{margin: 0px 0px 10px; padding: 0px 0px 0px; color: #222; font-size: 30px; font-weight: 300; line-height: 1.3em;}
	.settings-intro{margin: 0px 0px 0px; padding: 0px; max-width: 700px; color: #777; font-size: 16px; line-height: 1.5em;}

	.obox-help-buttons{float: right; height: 50px; padding: 0px 0px 30px;}
	.obox-help-buttons a{float: left; display: block; width: 50px; height: 50px; margin-left: 10px; background: url(images/welcome/sprite.png) no-repeat; overflow: hidden; position: relative; z-index: 1; color: #595959;}
		.obox-help-buttons .demo-content{background-position: -330px 0px;}
		.obox-help-buttons .documentation{background-position: -390px 0px;}
		.obox-help-buttons .support-forums{background-position: -450px 0px;}
		
		.obox-help-buttons .demo-content:hover{background-position: -330px -60px;}
		.obox-help-buttons .documentation:hover{background-position: -390px -60px;}
		.obox-help-buttons .support-forums:hover{background-position: -450px -60px;}
		
	.obox-help-buttons a span{display: none; position: absolute; width: 120px; text-align: center; padding: 5px; bottom: -35px; left: -35px; background: #fff; border: 1px solid #ccc; border-radius: 3px; box-shadow: -2px 2px 0px rgba(0, 0, 0, 0.1); z-index: 2;
								-webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out;}
	.obox-help-buttons a:hover{overflow: visible;}
	.obox-help-buttons a:hover span{display: block;}
	.obox-help-buttons a:first-child span{left: 0px;}
	.obox-help-buttons a:last-child span{left: -82px;}
	
	
	.instruction-title{margin: 0px 0px 10px; padding: 0px 0px 0px; color: #222; font-size: 25px; font-weight: 300; line-height: 1.3em;}
	.instruction-intro{margin: 0px 0px 20px; padding: 0px; color: #777; font-size: 14px; line-height: 1.5em;}
	.instruction-list{padding: 0px; margin: 0px 0px 20px 15px;}
	.instruction-list li{padding: 0px 0px 0px 13px; background: url(images/welcome/bullet.png) no-repeat left;}
	
	
	/*-------------------------------*/
	/*- INSTRUCTION ELEMENTS --------*/
	.to-do{display: block; padding: 10px 10px 10px 35px; margin-bottom: 10px; border: 1px solid #ccc; background: url(images/welcome/sprite.png) -475px -137px no-repeat; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: 14px;}
	.to-do:hover{background-color: #1F7299; background-position: 10px -137px; border-color: transparent; color: #fff;}
	.to-do:active{position: relative; top: 1px;}
	
	
	.next-step{display: block; padding: 10px; margin-bottom: 10px; border: 1px dashed #ccc; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: 14px; color: #333;}
	.next-step:hover{background-color: #1F7299; border-color: transparent; color: #fff;}
	.next-step:active{position: relative; top: 1px;}
	p .next-step{display: inline-block;}
	.step2{float: right;}
	
	.help-video{border: 1px solid #ccc; border-radius: 5px; max-width: 500px; max-height: 400px;}
	.help-video h4{padding: 10px 10px 10px 35px; margin: 0px; background: url(images/welcome/sprite.png) -474px -322px no-repeat;}
	.help-video .video-container{padding: 10px; border-top: 1px solid #ccc; }
	.help-video .video-container img{display: block;}
	.help-video .video-container iframe{width: 100%; min-height: 278px;}
	
	#wpfooter{position: static !important;}
/*-------------------------------------------------------------------------------------------*/
/*- RESPONSIVE CSS --------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
	
@media only screen and (max-width: 768px), screen and (max-device-width: 480px), screen and (max-width: 600px) {
	h2.nav-tab-wrapper, h3.nav-tab-wrapper{padding: 10px; border-radius: 5px; border: none;}
	h2 .nav-tab{margin: 0px 0px 0px 0px; font-size: 12px; font-weight: bold; border-radius: 3px; border: 1px solid #ccc;}
	h2 .nav-tab:hover{border: 1px solid #999;}

	.action-list .column{clear: none; float: left; width: 49%; margin-right: 2%;}
	.action-list .column:nth-child(2n+2){margin-right: 0%;}
	.action-list .column:nth-child(2n+3){clear: left;}
	.action-list .column:nth-child(2n+2){margin-right: 0%;}
	.help-video .video-container iframe{height: auto; min-height:inherit;}
}