body { 
margin:0; padding:0;
}
#design-container .logo {  
width:274px; height:60px; 
position:fixed;
bottom:16px; left:0;
background:#fff;
padding:5px; margin:0; 
}
#design-container .logo a img { 
border:none; 
}


#design-container #design { 
width:100%; overflow:hidden;
text-align:center;
margin-bottom:77px;
text-indent:-9999px; 
}


#design-container .thumbnails { 
width:100%; height:70px; 
position:fixed;
bottom:16px; left:0;
background:#fff url(/clients/images/overlay_medium.png);
overflow:auto;
overflow-y:hidden;
border-top:1px solid silver;
}


#design-container .thumbnails a { 
border:2px solid; display:inline-block;
outline:none;
}

#design-container .thumbnails a.active { 
border:2px solid black;
}
#design-container .thumbnails a img { 
border:none;
}


#design-container #filename.open { 
background:url(/clients/images/overlay_medium.png);
position:fixed;
bottom:100px;right:-1px;
height:14px;
font-size:10px;
font-family:'Lucida Grande', Arial, Helvetica, sans-serif;
padding:4px 10px 4px 15px;
border:1px solid silver;
width:auto; max-width:500px; 
cursor:pointer;
}
#design-container #filename.open .closed, #design-container #filename.closed .open { 
display:none;
}
#design-container #filename.open .open { 
margin:-4px 0 -4px -16px; float:left; 
display:block; height:22px; width:10px; overflow:hidden;
background:url(/clients/images/ds_filename.gif);
}


#design-container #filename.closed { 
background:#d9d9d9 url(/clients/images/ds_filename.gif) -1px bottom no-repeat;
position:fixed;
bottom:100px;right:-1px;
height:22px; width:10px;
font-size:10px;
font-family:'Lucida Grande', Arial, Helvetica, sans-serif;
padding:0;
border:1px solid silver;
border-left:1px solid #8f8f8f;
text-indent:-9999px;
padding-right:0px;
}

#design-container #filename-filename { 
display:block;
}





#design-container #comments.open { 
background:#d9d9d9;
position:fixed;
bottom:140px;right:-1px;
height:400px;
font-size:10px;
font-family:'Lucida Grande', Arial, Helvetica, sans-serif;
padding:0px 0px 0px 10px;
border:1px solid silver;
border-left:1px solid #8f8f8f;
width:auto; max-width:500px; 
cursor:pointer;
border-left:none;
}
#design-container #comments.open .closed, #design-container #comments.closed .open { 
display:none;
}
#design-container #comments.open .open { 
margin:0px 0 0px -10px; float:left; 
display:block; height:22px; width:10px; overflow:hidden;
background:url(/clients/images/ds_filename.gif) -1px 0 no-repeat;
}


#design-container #comments.closed { 
background:#d9d9d9 url(/clients/images/ds_filename.gif) -1px -22px no-repeat;
position:fixed;
bottom:140px;right:-1px;
height:400px; width:0px;
font-size:10px;
font-family:'Lucida Grande', Arial, Helvetica, sans-serif;
padding:0 0 0 10px;
border:1px solid silver;
border-left:1px solid #8f8f8f;
text-indent:-9999px;
padding-right:0px;
}

#design-container #commentIframe { 
display:block;
}






.jcarousel-skin-std .jcarousel-container-horizontal {
margin-left:284px;
margin-top:5px;
padding: 3px 40px;
}


.jcarousel-skin-std .jcarousel-clip-horizontal {
height: 60px;
}

.jcarousel-skin-std .jcarousel-item {
width: 52px;
height: 52px;
}

.jcarousel-skin-std .jcarousel-item-horizontal {
margin-right: 15px;
}

.jcarousel-skin-std .jcarousel-next-horizontal {
position: absolute;
top: 0px;
right: 0px;
width: 30px;
height: 60px;
cursor: pointer;
background: transparent url(/clients/images/arrow_right.png) no-repeat 0 0;
}
.jcarousel-skin-std .jcarousel-next-horizontal:hover { 
background-position:0 -60px;
}

.jcarousel-skin-std .jcarousel-next-disabled-horizontal,
.jcarousel-skin-std .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-std .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}

.jcarousel-skin-std .jcarousel-prev-horizontal {
position: absolute;
top: 0px;
left: 0px;
width: 30px;
height: 60px;
cursor: pointer;
background: transparent url(/clients/images/arrow_left.png) no-repeat 0 0;
}
.jcarousel-skin-std .jcarousel-prev-horizontal:hover { 
background-position:0 -60px;
}

.jcarousel-skin-std .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-std .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-std .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}


.hide2, .hide2{ 
position:absolute; left:186px; top:6px;
display:block; width:14px; height:14px;
background:url(/clients/images/close.gif) top left no-repeat;
text-indent:-9999px; overflow:hidden;
z-index:10000;
}
.hide2:hover { 
background:url(/clients/images/close.gif) bottom left no-repeat;
}



@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  div#design {
    background-size: contain !important;
  }
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
  div#design {
    background-size: contain !important;
  }
}