@charset "UTF-8";
/* CSS Document */

/************ Smartpen Photo/Accessories Gallery ****************/
div#smartpen .col1 .main_content {
    margin-top: 15px;
}

div#smartpen #slider{
    width: auto;
    float: none;
    background: none;
    margin: 15px auto 0;
    position: relative;
}


div.slideContainer{
    position: relative;
    width:260px !important;
}

div#smartpen #slider .mask{
    margin: 0px;
    padding: 0px;
    width: auto;
    overflow: hidden;
    position:relative;
}

div#smartpen #slider .m2 {
    margin: 10px 0px 8px;
}

div#smartpen #slider .mask ul.container {
    list-style-type: none;
    padding: 0px;
    margin:0px;
}

div#smartpen #slider .mask ul.container li {
    margin: 0px 4px 4px 0px;
    padding: 0px;
    width: 117px;
    height: 83px;
    display: inline-block;
    float: left;
}

div#smartpen #slider .mask ul.container li a img,
div#smartpen #slider .mask ul.container li a:link img,
div#smartpen #slider .mask ul.container li a:visited img {
    border: 1px solid #dadada;
    padding: 0px;
    display: block;
    width: 113px;
    outline: none;
}

div#smartpen #slider .mask ul.container li a:hover img {
    border: 1px solid #839394;
}


div#smartpen #slider .mask ul.container li.active a img {
    border: 1px solid #f39324;
}

div#smartpen #swap {
    width: 448px;
    float: left;
  text-align: center;
}

div#smartpen #swap .swapView {
    padding: 0px;
    margin: 0 auto;
    width: 449px;
    height: 315px;
}

#photo_des p {
    display: none;
    font-size: 10px;
    margin-top: 5px;
}

#photo_des p.show {
    display: block;
}

#smartpen_photos div.content div.col1,
#smartpen_photos div.content div.col2 { padding: 0; }

#smartpen_photos div#smartpen .col1 .main_content { margin: 0; }


/************ LS3 2013/10/28 ****************/

.ls3 .main_content_container {
    width: 100%;
    padding: 0;
}

.ls3 div#smartpen #slider {
    float: none;
    width: 100%;
}

.ls3 .arrow_top, .ls3 .arrow_bottom { display: none; }

.ls3 .mask { width: 100%; }

.ls3 div#smartpen #swap .swapView {
    background: none;
    width: 100%;
    height: 500px;
}

.ls3 div#smartpen #swap .swapView img { border: none; }

.ls3 div#smartpen #slider .mask {
    width: 100%;
    height: auto;
}

.ls3 div.slideContainer {
    top: 0px;
    height: auto!important;
    width: 100%!important;
}

.ls3 div#smartpen #slider .mask ul.container li { margin: 0px 3px 15px 0px; }

.ls3 #photo_des { 
	padding: 5px 30px 10px;
	display: none;
}

.ls3 #photo_des p{ font-size: 12px; }

.ls3 div#smartpen #slider .mask ul.container li{ height: 63px; }


/* Responsive updates */

#bg {
    width: 100%;
    box-sizing: border-box;
    max-width: 900px;
}

.topnav ul li a { font-size: 11px; }

.topnav {
    height: auto;
    background: linear-gradient(to top, #000, #044b79);
    border-bottom: 1px solid #023454;
}

.ls3 .top_banner {
    background-color: #000;
    height: auto;
}

div.slideContainer {
    width: auto;
}

img#feature_image {
    width: 100%;
}

div#smartpen #slider .mask ul.container {
    max-width: 500px;
    text-align: center;
    margin: 0 auto;
}

@media(max-width: 900px) {

    .topnav {
        padding-left: 0;
    }

    div#smartpen #swap {
        width: auto;
        float: none;
    }

    div#smartpen #swap .swapView {
        background: none;
        width: auto;
        height: auto;
        text-align: center;
    }

    div#smartpen #swap .swapView img {
        width: 100%;
        max-width: 500px;
        height: 100%;
    }

    div.content p.brief {
        text-align: center;
    }

    .swapView img {
        width: auto;
    }

    div#photo_des {
        text-align: center;
    }

    .smartpen_section .main_content_container {
        width: auto;
    }

    .smartpen_section .main_content_container .main_content {
        float: none;
        width: auto;
    }

    div#smartpen #slider {
        width: auto;
        float: none;
    }

    div#smartpen #slider .mask {
        height: auto;
        margin: 0 auto;
        width: auto;
        max-width: 480px;
    }

    div.slideContainer {
        width: auto!important;
        height: auto!important;
    }

    div#smartpen #slider .mask ul.container li {
        float: none;
        margin: 0 0 5px 0;
    }

}

@media (max-width: 500px) {

    .topnav ul {
        padding: 10px 20px;
    }

    .topnav ul li  {
        flex: 1 1 50%;
        padding: 5px 0;
    }

}