@import url("/css/new_base_layouts.css");
@import url("/css/content_leftnav.css");

/************************* howto **************************/

div.bg_2-1 div.content div.col1{
    width: 900px;
    min-height: 450px;
    height: auto;
    padding: 25px 0;
}

div#howto .col1 .main_content{
    width: 730px;
    float: left;
    display:none;
}

div.bg_2-1 div.content div.col2 {
    background: none;
}

div.howto_content div.leftSide {
    position: relative; 
    width: 448px;
}

div.content h3 {
	font-size: 14px;
	line-height: 19px;
	font-weight: 100;
	border-bottom: 1px solid #ddd;
	padding-bottom: 23px;
}

.product_logo {
	text-align: center;
	padding-bottom: 10px;
}

/************** main_content *************/

div.content .howto_content {
    position: relative;
}

div.content .howto_content .faq_media_area {
    height: auto;
    width: 347px;
    float: left;
}

ul.faq_section{
    list-style-type: none;
    padding: 0px;
    margin: 0px 15px 0px 0px;
    float: left;
    width: 366px;
    min-height: 300px;
}

ul.faq_section li{
    margin-bottom: 20px;
}

ul.faq_section li .faq_title{
    background: top left no-repeat url(/images/howto/close_btn.gif);
    padding-left: 20px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    color:#359AAA;
    line-height: 15px;
}

ul.faq_section li .faq_answer, ul.faq_section li .faq_vid {
    display: none;
}

ul.faq_section li .faq_answer {
    margin-left:20px;
}


ul.faq_section .faq_answer ul{
    list-style-type: disc;
}

ul.faq_section .faq_answer li{
    margin:0 !important;
}

ul.faq_section li.show .faq_title{
    background: top left no-repeat url(/images/howto/open_btn.gif);
}

ul.faq_section li.show .faq_answer, ul.faq_section li.show .faq_vid {
    display: block;
}

div.faq_vid {
    position: absolute;
    top: 0px;
    right: 0px;
}

div.faq_vid .vid_sec {
    font-size:0px;
    line-height:0px;
    position: relative;

}

div.faq_vid .vid_sec .play_btn {
    width: 152px;
    height: 152px;
    z-index: 1000;
    background: 0px 0px no-repeat url(/images/smartpen/platform/video_play_btn.png);

    position: absolute;

    top: 52px;
    left: 92px;

}


div.faq_vid .vid_sec .play_btn:hover {
    background: 0px -152px no-repeat url(/images/smartpen/platform/video_play_btn.png);
}


div.faq_vid .vid_more {
    text-align: center;
    width: 336px;
    margin-top:10px;
    margin-bottom:10px;
}

div.faq_vid .vid_more .des{
    margin:0 10px;
    text-align:center;
}

.show{
    display: block !important;
}

#btmImgContainer img{
    display:none;
}
/*********************** Video Slider *************************/

.arrow_top a:link, .arrow_top a:visited, .arrow_top a:active, .arrow_bottom a:link, .arrow_bottom a:visited, .arrow_bottom a:active{
	text-align: center;
	display:block;
	padding-bottom:0px;
}

.arrow_top a:hover, .arrow_bottom a:hover{
	border-bottom: 0px;
}

.arrow_top{
	border-bottom: 1px solid #cecfcf;
	padding-bottom:5px;
}

.arrow_bottom{
	border-top: 1px solid #cecfcf;
	padding-top:5px;
}

#slider .mask{
    margin: 0px;
    padding: 0px;
    width: 260px;
    height: 490px;
    overflow: hidden;
    position:relative;
}

#slider .m2{
    margin: 10px 0px 5px 0px;
}

#slider .mask ul.container{
    text-align: center;
    list-style-type: none;
    padding: 0px;
    margin:0px;
}

#slider .mask ul.container li{
    margin: 0px 4px 15px 0px;
    padding: 0px;
    width:179px;
    height: 150px;
    display: inline-block;
    text-align: left;
}
#slider .mask ul.container li a img {

}

#slider .mask ul.container li a, #slider .mask ul.container li a:link, #slider .mask ul.container li a:visited{
    padding: 0px;
    display:block;
    width:170px;
    height: 116px;
    outline: none;
    border: 1px solid #DADADA
}

#slider .mask ul.container li a:hover{
    border: 1px solid #839394;
}
#slider .mask ul.container li .thumbnail {
    width: 181px;
    height: 127px;
}

#slider .mask ul.container li.active .thumbnail{
    background: bottom right no-repeat url(/images/howto/connect/thumbnail_drop_shadow.png);
}

#slider .mask ul.container li.active a{
    border: 1px solid #F39324
}

#slider .mask ul.container li p
{
    margin: 0px;
}

/*********************** Bottom Module ***************************/

div.bottomModule{
    margin-top: 30px;
    margin-right:1px;
    border-top:1px solid #ddd;
    width:754px;
    float:right;
    line-height:18px;
    margin-right: 25px;
}

div.bottomModule div{
    float: left;
    border-right: 1px solid #ddd;
    margin-top: 15px;
    padding-right: 10px;
    padding-left: 10px;
    width:210px;
    min-height: 80px;
    height: auto;
    min-height: 110px!important;
}

div.bottomModule div.last{
    border-right: none;
}
div.bottomModule div.first {
    display:none;
    width: 272px;
}
div.bottomModule div.first img { 
	margin-right: 10px;
	float: right; 
}
div.bottomModule div.first .text {
	float: left;
	width: 180px;
	border: none;
	margin: 0;;
}

/* Video End */
.platform_video .video_sec a{
	border: none;
	padding: 0px;
}

.platform_video .video_sec a:hover{
	padding: 0px;
}

.platform_video .video_sec .vid_playback{
}

.platform_video .video_sec .vid_end{
	padding: 0px;
	margin: 0px;
	position: relative;
}

.platform_video .video_sec .vid_end p{
	text-align:center;
	width: 440px;
	position: absolute;
	top:70px;
	font-size: 18px;
	line-height: 35px;
}


.platform_video .video_sec .vid_end img {
	position: absolute;
	top: 0px;
	left: 0px;
}


.platform_video .video_sec .vid_end a{
	color: #FFFFFF;
	display: block;
}

.platform_video .video_sec .vid_end a:hover{
	color: #c1f4ff;
}

.platform_video .video_sec .vid_end a.replay_btn{
	background: center right no-repeat url(/images/smartpen/platform/video_replay_btn.png);
	display:inline-block;
	line-height:55px;
	padding-right:55px;
	/*width:148px;*/
}

/* Responsive CSS */

@media (max-width: 900px) {
	#bg { width: 100%;box-sizing: border-box; }
	
	.col1 div.leftnav { 
		margin: 0;
		width: 100%!important; 
	}
	
	.product_logo { float: left; }
	
	.leftnav #collapseLsNav .container-fluid { 
		    margin: 0!important;
			padding-top: 0!important; 
	}
	
	ul#subnav li a, ul#subnav li a:visited, ul#subnav li a:link, ul#subnav li a:active { 
		padding: 0 5px;
		width: auto!important;
	}

  div.content h2.bigTitle,
  div.content h3 { margin: 15px 5% 0; }

  div#howto .col1 .main_content {
		width: 80%!important;
    	float: left;
	}
	
	div.content.topLevelWidth { width: auto!important; }
	
	div.bg_2-1 div.content div.col1 { 
		width: 100%!important;
		padding: 15px 0; 
	}
	
	ul.faq_section { width: 90%!important;margin-left: 5%; }
	
	div.faq_vid {
		position: relative;
    	top: inherit;
    	right: inherit;
    	text-align: center;
	}
	
	div.faq_vid .vid_sec img {
		width: 100%!important;
    	margin-left: 20px;
	}
	
	div.bottomModule {
		width: 90%;
    	margin: 30px 5% 0;
	}
	
	div.bottomModule div, div.bottomModule div.last, div.bottomModule div.first { width: 30%; }
	div.bottomModule div.first img { display: none; }
}

@media (max-width: 499px) {
	.smartpen_section .main_content_container .main_content, .inner_content_box two_cols {
    	float: none;
    	margin-left: 0;
    }
    
    div#howto .col1 .main_content {
		width: 100%!important;
    	float: none;
	}
	
	div.content h2.bigTitle { margin-top: 15px; }
    
	.col1 div.leftnav { 
		float: none;
		width: 100%!important; 
	}
	
	ul#subnav {
		width: 100%!important;
    	line-height: 25px;
	}
	
	ul#subnav li a, ul#subnav li a:visited, ul#subnav li a:link, ul#subnav li a:active { 
		padding-left: 0;
		width: 100%!important; 
	}
	
	div.bottomModule div, div.bottomModule div.first {
    	float: none!important;
        border-bottom: 1px solid #ddd;
        width: 100%!important;
        border-right: none;
        padding: 0;
        min-height: initial!important;
    }
    div.bottomModule div.last { border: none; }
	
}