html{width: 100%; height: 100%;}
body{
width: 100%;
height: auto;
min-height: 100%;
padding: 0px;
margin: 0px;
font-family: "Helvetica Neue", Helvetica, "Segoe UI",Arial;
font-size: 10pt;
/*-webkit-font-smoothing: antialiased; */
overflow-x: hidden;
}
/*
Sections
. Body
. Viewport
. Header
. Pages
. Dialog
. Basecontrol
. flag, flag drawer, linker
. Text, Textarea
. Switch, Checkbox
. Checkboxgroup, radiogroup
. selectobox, multiselectbox
. list - horizontal, vertical
. title, subtitle, imagecontainer, overlay
. xlist
. catalog
. actionablelist
. statlist
. imagelist
. imageboard
. tasklist
. photo
. attachment
. buttons
. Generic and helpers
*/
/* Body con and pages */
.juci_body_bg{
display: block;
position: absolute;
position: fixed;
top: 0px;
bottom: 0px;
height: 100%;
width: 100%;
z-index: -1;
}
.juci_body_container{width: 100%;z-index: 1;}
.juci_body_container.hasFooter{bottom: 45px;}
.juci_body_container > .juci_body_viewport{
width: 100%;
}
/* TODO - Check for better solution to the scrollbar appearance at the end of the transition*/
.juci_body_container{
overflow-x: hidden;
}
.juci_dialog_container{
display: table;
top: 0px;
bottom: 0px;
position: absolute;
position: fixed;
width: 100%;
z-index: 100;
box-shadow: inset 0px 0px 320px 0px;
-webkit-box-shadow: inset 0px 0px 320px 0px;
visibility: hidden;
-webkit-transition-property: visibility, box-shadow, -webkit-box-shadow;
-webkit-transition-duration: 250ms;
-ms-transition: -ms-transform,opacity;
-ms-transition-duration: 250ms;
-moz-transition: -moz-transform,opacity;
-moz-transition-duration: 250ms;
transition: transform,opacity;
transition-duration: 250ms;
-webkit-transition-timing-function: cubic-bezier(0,0,0,1);
-moz-transition-timing-function: cubic-bezier(0,0,0,1);
-ms-transition-timing-function: cubic-bezier(0,0,0,1);
transition-timing-function: cubic-bezier(0,0,0,1);
height: 100%;
}
.juci_dialog_viewport{
height: 100%;
display: table-cell;
width: 100%;
vertical-align: middle;
}
/* Hide pages or dialog templates during loading */
div[data-juci=panel], div[data-juci=dialog]{
display: none;
}
.juci_panel{
overflow: visible;
}
.juci_panel, .juci_dialog{
/*-webkit-transform: translate(100%, 0px);
-ms-transform: translate(100%, 0px);
-moz-transform: translate(100%, 0px);
transform: translate(100%, 0px);*/
-webkit-transition-property: -webkit-transform,opacity;
-webkit-transition-delay: 20ms;
-webkit-transition-duration: 50ms;
-ms-transition: -ms-transform,opacity;
-ms-transition-delay: 20ms;
-ms-transition-duration: 50ms;
-moz-transition: -moz-transform,opacity;
-moz-transition-delay: 20ms;
-moz-transition-duration: 50ms;
transition: transform,opacity;
transition-delay: 20ms;
transition-duration: 50ms;
-webkit-transition-timing-function: cubic-bezier(0,0,0,1);
-moz-transition-timing-function: cubic-bezier(0,0,0,1);
-ms-transition-timing-function: cubic-bezier(0,0,0,1);
transition-timing-function: cubic-bezier(0,0,0,1);
overflow: initial;
}
.juci_panel{
position: absolute;
width: 100%;
top: 50px;
}
.juci_panel[data-first-panel]{
-webkit-transform: none;
-ms-transform: none;
-moz-transform: none;
transform: none;
}
.juci_dialog{
opacity: 0;
min-height: 180px;
width: 85%;
vertical-align: middle;
-webkit-transform: scale(0.5, 0.5);
-webkit-transform: scale3d(0.5, 0.5, 1);
-moz-transform: scale(0.5, 0.5);
-moz-transform: scale3d(0.5, 0.5, 1);
-ms-transform: scale(0.5, 0.5);
-ms-transform: scale3d(0.5, 0.5, 1);
transform: scale(0.5, 0.5);
transform: scale3d(0.5, 0.5, 1);
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
-ms-transition-duration: 300ms;
transition-duration: 300ms;
-webkit-transition-timing-function: cubic-bezier(0.75, 0.1, 0.5, 1.7);
-moz-transition-timing-function: cubic-bezier(0.75, 0.1, 0.5, 1.7);
-ms-transition-timing-function: cubic-bezier(0.75, 0.1, 0.5, 1.7);
transition-timing-function: cubic-bezier(0.75, 0.1, 0.5, 1.7);
margin: auto;
border-radius: 13px;
-webkit-border-radius: 13px;
border: 1px solid;
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 500px;
}
.juci_no_transform{
transform : none,
-webkit-transform: none,
-ms-transform: none,
-moz-transform: none,
-o-transform: none
}
.juci_panel_title{
width: 100%;
display: table;
table-layout: fixed;
height: 50px;
padding-top: 0px;
text-align: center;
font-weight: bold;
font-size: 12pt;
z-index: 2;
border-bottom: 1px solid;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.juci_panel_title .title{
display: table-cell;
margin: 0px;
max-width: 100%;
right: 65px;
vertical-align: middle;
}
.juci_panel_title label{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
max-width: 100%;
}
.juci_panel_title .titleImage{
display: none;
height: 35px;
width: 35px;
vertical-align: middle;
margin-right: 5px;
}
.juci_panel_title.iconShown .titleImage{
display: inline-block;
}
.juci_panel_title.iconShown label{
max-width: 65%;
}
.juci_panel_title.imageShown .titleImage{
display: block;
height: 45px;
margin: auto;
width: auto;
}
.juci_panel_title.imageShown label{
display: none;
}
@-moz-document url-prefix(){
.juci_panel_title label {
margin-left:36px;
}
}
@media only screen
and (max-width : 260px) {
.juci_panel_title label {
max-width: 90px;
}
.juci_panel_title.iconShown label{
max-width: 65px;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
html{-webkit-text-size-adjust: none; /* Never autoresize text */}
}
.juci_panel_title .abtnholder{
display: table-cell;
height: 45px;
width: 60px;
vertical-align: middle;
padding: 0px 2px;
}
.juci_panel_title #__rightBtn{
width: 70px;
}
.juci_panel_title .actionbutton{
height: auto;
font-weight: normal;
font-size: 11pt;
display: inline-block;
max-width: 45px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 10px 5px 10px 5px;
border-radius: 2px;
-webkit-border-radius: 2px;
border-width: 1px;
min-height: 0px;
min-width: 0px;
line-height: 11pt;
}
.juci_unselectable{
-webkit-touch-callout: none;
-webkit-user-select: none; /* To prevent user from selecting text */
-ms-user-select: none; /* Not implemented by browser, but future proofing */
-o-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none; /* To prevent user from dragging items in desktop */
-webkit-user-modify: none;
-webkit-highlight: none;
-ms-text-size-adjust: none;
}
Direction and floats
To use localization, all elements using floats must have the property juci-float set
.juci_direction_left{
direction: ltr;
}
.juci_direction_left *[juci-float="left"]{
float:right !important;
}
.juci_direction_left *[juci-float="right"]{
float:left !important;
}
.juci_direction_right{
direction:rtl;
}
.juci_direction_right *[juci-float="left"]{
float:right !important;
}
.juci_direction_right *[juci-float="right"]{
float:left !important;
}
Controls can be used stand alone and in a juci_form Based on size of device, label should be placed on left or top. Override by adding juci_label_onlytop, juci_label_onlyleft All controls to have following structure
Generic control styling - Ctrl label and box styled based on device size
.juci_basecontrol{
width: 96%;
margin: 10px auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 100px;
min-height: 54px;
margin: 25px auto;
border: 2px solid;
border-radius: 12px;
-webkit-border-radius: 12px;
}
.juci_ctrl_label{
display: table;
table-layout: fixed;
height: 18px;
font-size: 11pt;
font-size: 11pt;
margin: 4px 2px 2px 5px;
width: 96%;
padding: 1px 2px 0px 2px;
max-width: 92%;
text-align: left;
}
.juci_label_text{
display: table-cell;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100%;
}
.juci_label_flagctr{
display: table-cell;
width: 0px;
}
.juci_ctrl_box{
display: block;
width: 96%;
margin: 2px auto;
font-size: 14pt;
height: 34px;
font-size: 13pt;
margin: 0px auto 0px auto;
width: 100%;
padding: 0px 2px 0 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.juci_display .juci_ctrl_box{
padding: 6px 2px 4px 6px;
height: 25px;
display: table;
table-layout: fixed;
}
.juci_display_container{
display: table-cell;
width: 100%;
vertical-align: middle;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-decoration: inherit;
line-height: inherit;
}
.juci_display_padder_right, .juci_display_padder_left{
display: table-cell;
width: 18px;
}
.juci_text,.juci_password,.juci_number, .juci_jtel, .juci_textarea{
}
.juci_text[disabled] .juci_linker{
display: none;
}
.juci_text_delete{
width: 45px;
font-size: 8px;
border:none;
padding: 12px 0px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
text-align: center;
}
.juci_forgotpassword{
border: none;
}
.juci_forgotpassword_password{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-right: 2px solid;
}
input.juci_ctrl_box, textarea.juci_ctrl_box, .juci_searchbox input{
height: 30px;
padding: 2px 2px 4px 7px;
-webkit-appearance: none;
border: none;
background: none;
width: 100%;
}
textarea.juci_ctrl_box{
height:120px;
resize: vertical;
}
.juci_selectbox_box, .juci_datepicker_box, .juci_timepicker_box{
padding: 0px 4px 0px 7px;
line-height: 30px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.juci_range_ctrl{
height: auto;
width: 100%;
padding: 0px;
margin: 0px;
}
.juci_range_ctrl .juci_datepicker, .juci_range_ctrl .juci_timepicker{
width: 100%;
border: none;
background: none;
margin: 10px 0px 0px 0px;
box-shadow: none;
}
.juci_selectbox.multiple .juci_selectbox_box{
min-height: 30px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.juci_checkboxgroup, .juci_radiogroup{
min-height: 50px;
}
.juci_checkboxgroup >.juci_ctrl_box, .juci_radiogroup >.juci_ctrl_box,{
padding: 0px; /* ul adds margin and padding*/
}
.juci_ctrl_box.juci_options{
width: 100%;
height: auto;
-webkit-border-radius: 8px;
border-radius: 8px;
margin: 0px auto;
padding: 0px;
}
.juci_ctrl_label + .juci_options{
border-radius: 0px;
-webkit-border-radius: 0px;
margin-top: 8px;
}
.juci_selectbox_options_panel .juci_checkboxgroup .juci_ctrl_label,
.juci_selectbox_options_panel .juci_radiogroup .juci_ctrl_label{
display: none;
}
[data-juci=optiontemplate]{
display: none;
}
.juci_options_placeholder{
width: 80%;
margin: 15px auto;
text-align: center;
font-size: 12pt;
}
.juci_option{
display: block;
width: 100%;
min-height: 36px;
border-bottom: 1px solid;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.juci_option:first-child{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.juci_ctrl_label + .juci_options > .juci_option:first-child{
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.juci_option:last-child{
border-bottom: none;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.juci_option_label{
display: block;
vertical-align: top;
max-width: 94%;
margin: 0px 3% 0px 1%;
font-size: 12pt;
white-space: nowrap;
padding: 15px 2px;
text-overflow: ellipsis;
overflow: hidden;
}
.juci_check_box{
display: table-cell;
width: 20px;
}
.juci_switch{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.juci_switch_bar{
width: 100px;
height: 32px;
border-radius: 7px;
-webkit-border-radius: 7px;
display: table-cell;
vertical-align: middle;
}
.juci_switch_label{
display: table-cell;
width: 95%;
overflow: inherit;
font-size: 12pt;
vertical-align: middle;
white-space: inherit;
}
.juci_switch_scroller{
width: 150px;
height: 34px;
}
.juci_switch_scroller > *{
line-height: 30px;
width: 50px;
padding: 0px 2px;
display: inline-block;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
vertical-align: middle;
height: 32px;
font-weight: bold;
font-size: 11pt;
border: 1px solid;
}
.juci_switch_box{
display: table;
margin: 8px auto;
padding: 0px 4px;
table-layout: fixed;
width: 98%;
}
.juci_switch_on{
border-bottom-left-radius: 7px;
border-top-left-radius: 7px;
}
.juci_switch_thumb{
height: 34px;
border-radius: 1px;
-webkit-border-radius: 1px;
}
.juci_switch_off{
border-bottom-right-radius: 7px;
border-top-right-radius: 7px;
}
.juci_button{
min-width: 50px;
min-height: 50px;
border-radius: 7px;
-webkit-border-radius: 7px;
text-align: center;
font-size: 14pt;
border: 2px solid;
cursor: pointer;
line-height: 14pt;
white-space: pre-wrap;
word-wrap: break-word;
}
.juci_togglebar{
text-align: center;
margin: 10px;
font-size: 0;
white-space: nowrap;
vertical-align: middle;
display: inline-block;
}
.juci_togglebar .juci_button{
margin: 0px;
border-radius: 0px;
-webkit-border-radius: 0px;
border-width: 1px;
margin-left: -1px;
}
.juci_togglebar .juci_button:first-child{
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
}
.juci_togglebar .juci_button:last-child{
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
}
.juci_vertical_bbar{
min-height: 45px;
width: 75%;
margin: 10px auto;
max-width: 400px;
text-align: center;
}
.juci_horizontal_bbar{
min-height: 45px;
width: 98%;
margin: 10px auto;
text-align: center;
display: table;
}
.juci_horizontal_bbar > .juci_button{
display: table-cell;
width: 47%;
margin: 2px 1%;
max-width: 200px;
vertical-align: middle;
}
.juci_vertical_bbar > .juci_button{
display: block;
margin: 5% 0px;
width: 100%;
}
.juci_vertical_list{
margin: 20px auto;
width: 98%;
}
.juci_image .juci_ctrl_box{
height: auto;
padding: 0px 2px 6px 6px;
}
.juci_actionablelist, .juci_imagelist, .juci_imageboard{
border: none;
background: none;
}
.juci_xlist_pane{
border-radius: 9px;
-webkit-border-radius: 9px;
border: 2px solid;
width: 97%;
margin: auto;
overflow: initial;
}
.juci_xlist_item{
border-bottom: 1px solid;
min-height: 30px;
padding: 8px 2px;
}
.juci_title, .juci_subtitle{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 98%;
text-decoration: inherit;
line-height: inherit;
}
.juci_fixed_table{
display: table;
table-layout: fixed;
}
.juci_title{
font-size: 13.5pt;
margin: 5px auto 5px auto;
}
.juci_subtitle{
font-size: 10pt;
margin: 3px auto;
padding-left: 2px;
}
.juci_title + .juci_subtitle{
}
.juci_xlist_item:first-child{
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.juci_xlist_item:last-child{
border-bottom: none;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.juci_actionable_container{
position: relative;
height: 0px;
}
.juci_actionable_button{
float: right;
height: 25px;
margin-right: 8px;
margin-top: -35px;
font-size: 11pt;
padding: 2px 6px;
line-height: 25px;
border-radius: 5px;
-webkit-border-radius: 13px;
max-width: 30%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
min-height: 0px;
min-width: 0px;
}
.juci_imagelist_container{}
.juci_imagelist_container .juci_imagelist_imageContainer{
vertical-align: middle !important;
width: 64px !important;
}
.juci_imagelist_image{
height: 57px;
margin: 5px auto;
text-align: center;
border: 1px solid;
width: 57px;
border-radius: 7px;
-webkit-border-radius: 7px;
display: table;
}
.juci_imagelist_image .juci_img_middler{
display: table-cell;
vertical-align: middle;
width: 100%;
}
.juci_imagelist_image img{
width: 100%;
border-radius: 5px;
-webkit-border-radius: 5px;
display: block;
height: 56px;
}
.juci_flag{
border-radius: 10px;
-webkit-border-radius: 10px;
font-size: 8pt;
margin-top: 2px;
font-family: Verdana, Tahoma;
line-height: 8pt;
}
.juci_flag > *{
padding: 7px 6px;
max-width: 60px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
min-width: 15px;
}
.juci_statlist_titlesContainer{}
.juci_statlist_titlesContainer .juci_display_padder_right{width: 0px}
.juci_statlist_container .juci_statlist_statContainer{
width: 60px !important;
}
.juci_statlist_titlesContainer,.juci_statlist_container .juci_statlist_statContainer{
vertical-align: middle !important;
}
.juci_statlist_stat{
min-width: 30px;
max-width: 60px;
font-size: 14pt;
line-height: 14pt;
width: 40px;
text-align: center;
padding: 10px 5px;
border: 2px solid;
text-overflow: ellipsis;
overflow: hidden;
margin-right: 6px;
border-radius: 14px;
-webkit-border-radius: 14px;
border: none;
font-family: Verdana, Tahoma;
}
.juci_imageboard_item{
width: 98%;
margin: auto;
border: none;
}
.juci_imageboard_titlesContainer{
width: 90%;
margin: 15px auto;
}
.juci_imageboard_listPane{
-moz-column-count: 1;
-moz-column-gap: 12px;
-moz-column-fill: auto;
-webkit-column-count: 1;
-webkit-column-gap: 12px;
-webkit-column-fill: auto;
column-count: 1;
column-gap: 12px;
column-fill: auto;
box-shadow: none;
border: none;
}
.juci_imageboard_container{
width: 100%;
border: 1px solid;
border-radius: 0px;
-webkit-border-radius: 0px;
padding: 0px;
margin-bottom: 5%;
display: inline-block;
-webkit-column-break-inside: avoid;
vertical-align: top;
}
.juci_imageboard_image_container{}
.juci_imageboard_image{
width: 90%;
margin: 15px auto;
border: 1px solid;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.juci_imageboard_image img{
width: 90%;
margin: 5%;
border-radius:0px;
-webkit-border-radius: 13px;
min-height: 30px;
}
.juci_catalog{
width: 100%;
}
.juci_catalog_listPane{
width: 99%;
margin: 20px auto;
}
.juci_catalog_item{
display: inline-block;
width: 90px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 2% 2%;
padding: 0px;
text-align: center;
border-radius: 7px;
-webkit-border-radius: 7px;
border: none;
border-top: 2px solid;
}
.juci_catalog_image{
height: 44px;
width: 44px;
margin: 8px auto;
}
.juci_catalog_image img{
height: 44px;
}
.juci_catalog_title{
font-size: 10pt;
margin: 10px auto;
}
.juci_catalog_title div{
max-width: 92%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin: auto;
}
.juci_searchbox{
border: 2px solid transparent;
background: white;
border-radius: 15px;
-webkit-border-radius: 15px;
display: table;
min-height: 30px;
border-bottom: none;
}
.juci_searchbox .juci_ctrl_box > *{
vertical-align: middle;
}
.juci_searchbox .juci_ctrl_box{
margin: 0px auto;
padding: 0px;
}
.juci_searchbox .juci_ctrl_box img{
height: 24px;
width: 24px;
margin: 0px;
}
.juci_searcher{
width: 98%;
margin: auto;
}
.juci_searcher input{
font-size: 14pt;
padding: 0px 4px 0px 4px;
height: 23px;
}
.juci_searchbox .juci_searchbox_close, .juci_searchbox .juci_searchbox_glass{
max-width: 26px;
padding-top: 4px;
}
.juci_searchbox .juci_searchbox_close{
padding-right: 7px;
}
.juci_searchbox .juci_searchbox_glass{
padding-left: 4px;
}
.juci_searchbox .juci_text .juci_ctrl_box{
border: none;
height: 22px;
min-height: 22px;
}
.juci_searchbox .juci_text{
}
.juci_timer{
max-width: 400px;
margin: 10px auto;
}
.juci_time_block, .juci_timer_box{
max-width: 400px;
margin: 10px auto;
display: table;
text-align: center;
padding: 5px 0px;
border-radius: 5px;
-webkit-border-radius: 5px;
}
.juci_time_block > div{
display: table-row;
}
.juci_time_block > div > div{
display: table-cell;
vertical-align: middle;
}
.juci_time_label{
font-size: 14pt;
margin-left: 3px;
margin-bottom: 5px;
width: 90%;
}
.juci_time_button_bar{
}
.juci_time_button{
margin: 14px 15px;
border: 2px solid;
border-radius: 5px;
-webkit-border-radius: 5px;
width: 55px;
font-size: 26pt;
cursor: pointer;
padding-bottom: 4px;
}
.juci_time_button_bar:first-child .juci_time_button{
margin-bottom: 0px;
}
.juci_time_button_bar:last-child .juci_time_button{
margin-top: 0px;
}
.juci_time_value_bar{
}
.juci_time_value{
width: 50px;
height: 28px;
}
.juci_computed_time{
display: block;
width: 90%;
margin: 5px auto;
text-align: right;
max-width: 400px;
font-size: 16pt;
}
.juci_time_hour, .juci_time_minute{
width: 45px;
height: 30px;
text-align: center;
font-size: 16pt;
padding: 5px 1px 6px 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-webkit-appearance: none;
border: 1px solid;
}
.juci_time_meridian{
font-size: 17pt;
line-height: 40px;
padding-bottom: 0px;
}
.juci_photo{
height: auto;
}
.juci_photo .juci_ctrl_box{
height: auto;
margin: 0px auto 6px auto;
padding: 0px 0px 1px 0px;
width: 94%;
}
.juci_photo .juci_ctrl_label{
vertical-align: top;
}
.juci_photo > .juci_ctrl_box .juci_photo_box{
width: 100%;
border-radius: 7px;
-webkit-border-radius: 7px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 450px;
border: none;
}
.juci_photo_overlay{
position: absolute;
width: 99%;
top: 0px;
bottom: 0px;
border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid;
}
.juci_photo_overlay_container{
width: 100%;
text-align: center;
font-size: 18pt;
display: table;
height: 100%;
}
.juci_photo_empty .juci_photo_placeholder_text{
display: table-cell;
vertical-align: middle;
}
.touch .juci_photo_overlay{
border-style: dashed;
}
.juci_photo_clear{
position: relative;
text-align: right;
left: 10px;
top: -10px;
height: 0px;
z-index: 2;
}
.juci_photo_clear img{
padding: 5px 5px 22px 22px;
}
.juci_photo_clear.touch > img{}
.juci_photo_container{
width: 100%;
margin: 5px auto 10px;
max-width: 450px;
position: relative;
}
.juci_attachment{
width: 96%;
margin: 25px auto;
}
.juci_xlist_placeholder{
width: 80%;
margin: 8px auto;
text-align: center;
}
.juci_attachment .juci_horizontal_bbar{
max-width: 450px;
}
.juci_attachment .juci_ctrl_box {
height: auto;
margin: 0px auto;
padding: 0px;
}
.juci_attachment_listPane{
display: table; /* ul adds margin and padding*/
border: none;
table-layout: fixed;
width: 90%;
}
.juci_attachment_item{
display: table-row;
width: 100%;
height: 60px;
border: none;
}
.juci_attachment_item:last-child > div{
border-top: none;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.juci_attachment_thumb{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 45px;
}
.juci_attachment_thumb > img{
height: 35px;
width: 32px;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid;
}
.juci_attachment_name{
display: table-cell;
width: 100%;
margin: 16px 0px 0px 10px;
vertical-align: middle;
}
.juci_attachment_delete{
display: table-cell;
vertical-align: middle;
width: 30px !important;
-webkit-box-sizing: border-box;
box-sizing: border-box;
float: none !important;
background-position: center !important
}
.juci_calendar{
height: 100%;
margin: 0px auto;
border: none;
padding: 0px;
width: 96%;
}
.juci_calendar .juci_ctrl_box{
margin: 0px;
padding: 0px;
width: 100%;
border: 1px solid;
border-bottom: none;
border-right: none;
border-top: none;
height: auto;
}
.juci_year_month{}
.juci_year, .juci_month{
display: table-row;
width: 100%;
margin: 0px auto;
}
.juci_calendar_middle, .juci_calendar_nav{
display: table-cell;
border-bottom: 1px solid;
height: 48px;
text-align: center;
vertical-align: middle;
font-size: 14pt;
}
.juci_calendar_middle{
border: 1px solid;
border-top: none;
}
.juci_calendar_nav{
width: 13%;
}
.juci_calendar_nav.right{
border-right: 1px solid;
}
.juci_year_month, .juci_calendar_box{
display: table;
width: 100%;
}
.juci_week, .juci_days{
display: table-row;
width: 100%;
height: 48px;
}
.juci_days{
height: 33px;
}
.juci_day, .juci_date{
display: table-cell;
width: 13%;
text-align: center;
vertical-align: middle;
border-right: 1px solid;
border-bottom: 1px solid;
font-weight: bold;
font-size: 11pt;
}
.juci_date.today {
font-size: 15pt;
}
.juci_date.selected{
font-size: 15pt;
}
.juci_float_right,.juci_float_left, .juci_float_left_right{
display: table;
width: 100%;
margin-left: auto;
margin-right: auto;
table-layout: fixed;
}
.juci_float_right > *, .juci_float_left > *, .juci_float_left_right > *{
display: table-cell;
}
.juci_float_right > *:last-child, .juci_float_left > *:first-child{
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 50px;
vertical-align: top;
}
.juci_float_right > *:first-child, .juci_float_left > *:last-child{
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
.juci_float_left_right > *:first-child, .juci_float_left_right > *:last-child{
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 30px;
vertical-align: middle;
}
.juci_flag_drawer{
position: relative;
right: 0px;
height: 0px;
width: 100%;
text-align: right;
overflow: visible;
}
[disabled] .juci_flag_drawer{
opacity: 0.4;
}
.juci_flag_drawer > *{
display: inline-block;
margin-left: 0px;
margin-right: 4px;
margin-top: 3px;
}
.juci_flag_visible > .juci_ctrl_label .juci_label_flagctr{
width: 80px;
}
.juci_delete_visible > .juci_ctrl_label .juci_label_flagctr{
width: 80px;
}
.juci_flag_visible.juci_delete_visible > .juci_ctrl_label .juci_label_flagctr{
width: 150px;
}
.juci_vertical_list .juci_flag_visible > .juci_flag_drawer+*{
display: table;
table-layout: fixed;
}
.juci_vertical_list .juci_flag_visible > .juci_flag_drawer+* > .juci_display_padder_right{
width: 80px;
}
.juci_vertical_list .juci_delete_visible > .juci_flag_drawer+*{
display: table;
}
.juci_vertical_list .juci_delete_visible > .juci_flag_drawer+* > .juci_display_padder_right{
width: 80px;
}
.juci_vertical_list .juci_flag_visible.juci_delete_visible > .juci_flag_drawer+*{
display: table;
}
.juci_vertical_list .juci_flag_visible.juci_delete_visible > .juci_flag_drawer+* > .juci_display_padder_right{
width: 150px;
}
.juci_vertical_list .juci_flag_drawer > *{
margin-top: 5px;
}
.juci_catalog_item .juci_flag_drawer{
position: relative;
display: inline-block;
margin: 0px auto;
height: 0px;
width: 100%;
top: -12px;
}
.juci_catalog_item .juci_flag{
width: 100%;
max-width: 100%;
margin: -3px auto 0px auto;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.juci_catalog_item .juci_flag > *{
width: 100%;
max-width: 85%;
}
.juci_linker{
width: 18px;
height: 19px;
vertical-align: top;
}
.juci_linker.juci_pencil{
height: 22px;
}
.juci_delete{
width: 35px;
height: 25px;
vertical-align: bottom;
text-align: center;
}
.juci_delete_icon{
width: 100%;
height: 35px;
}
.juci_catalog_item .juci_delete{
margin-left: 10px;
text-align: right;
width: 100%;
margin-top: -12px;
}
.juci_catalog_item .juci_delete .juci_delete_icon{
background-position: right;
}
.juci_delete img{
width: 20px;
height: 20px;
}
.juci_delete.touch img{
-webkit-box-shadow: 0px 0px 7px 3px #d23030;
box-shadow: 0px 0px 7px 3px #d23030;
}
.juci_ctrl_separator{
width: 80%;
border: 1px solid;
margin: 0px auto 15px auto;
}
.juci_forgot_password_container{
vertical-align: middle !important;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-left: none;
min-width: 0px;
width: 50px !important;
}
.juci_forgot_password{
width: 50px;
border-radius: 17px;
-webkit-border-radius: 17px;
font-size: 12px;
border:none;
vertical-align: top;
padding: 5px 0px;
font-size: 16pt;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
text-align: center;
}
.juci_login{
border: none;
max-width: 500px;
margin: auto;
}
.juci_infopanel{
padding: 3% 5%;
line-height: 22px;
word-wrap: break-word;
text-align: justify;
max-width: 500px;
font-size: 11pt;
}
.juci_infopanel .juci_vertical_bbar{
margin: 10px auto 0px auto;
}
.juci_circlepanel{
-webkit-border-radius: 100%;
border-radius: 100%;
overflow: hidden;
padding: 3% 10%;
width: 240px;
height: 240px;
position: relative;
}
.juci_circlepanel .juci_vertical_bbar{
max-width: 50%;
max-width: 50%;
position: absolute;
bottom: 6%;
left: 25%;
}
.juci_forgotpassword_password .juci_flag_drawer{
position: relative;
height: 0px;
margin: 0px;
float: right;
top: 0px;
right: 2px;
}
.juci_actionbar_viewport{}
.juci_actionbar{
max-height: 45px;
min-height: 45px;
height: 45px;
width: 100%;
border-radius: 0px;
-webkit-border-radius: 0px;
border: none;
border-top: 1px solid;
bottom: 0px;
position: absolute;
margin: 0px;
}
.juci_actionbar_bar{
height: 44px;
margin: auto;
white-space: nowrap;
overflow-x: visible;
}
.juci_actionbar_button{
border: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 38px;
vertical-align: middle;
padding: 0px 10px;
margin: 3px 10px;
}
.juci_actionbar_button img{
max-width: 40px;
}
.juci_actionbar_button.touch{
border-radius: 40px;
-webkit-border-radius: 40px;
}
.juci_panel_name {
text-align: center;
font-size: 14pt;
margin: 12px auto;
}
.juci_not_rounded{
-webkit-border-radius: 0px;
border-radius: 0px;
}
.juci_bottom_rounded{
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.juci_top_rounded{
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.juci_left_rounded{
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.juci_right_rounded{
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.juci_group{
display: table;
width: 98%;
table-layout: fixed;
margin: 5% auto;
}
.juci_group > *{
vertical-align: middle;
}
.juci_H1, .juci_H2{
display: inline-block;
width: 47%;
margin: 0px
}
.juci_H1{
margin-right:3%;
}
.juci_H2{
margin-left:3%;
}
.juci_T1, .juci_T2, .juci_T3{
display: inline-block;
width: 30%;
margin: 0px 1.66%
}
.juci_T1{
margin-right: 3.33%;
margin-left: 0px;
}
.juci_T3{
margin-right: 0px;
margin-left: 3.33%;
}
.juci_T12, .juci_T23{
display: inline-block;
width: 63%;
margin: 0px;
}
.juci_T12{
margin-right: 3.33%;
margin-left: 0px;
}
.juci_T23{
margin-right: 0px;
margin-left: 3.33%
}
.juci_Q1, .juci_Q2, .juci_Q3, .juci_Q4{
display: inline-block;
width: 23%;
margin: 0px 1%;
}
.juci_Q1{
margin-right: 2%;
margin-left: 0px;
}
.juci_Q4{
margin-right: 0px;
margin-left: 2%;
}
.juci_Q12, .juci_Q23, .juci_Q34{
display: inline-block;
width: 48%;
margin: 0px 1%;
}
.juci_Q12{
margin-right: 2%;
margin-left: 0px;
}
.juci_Q34{
margin-right: 0px;
margin-left: 2%;
}
.juci_Q123, .juci_Q234{
display: inline-block;
width: 73%;
margin: 0px;
}
.juci_Q123{
margin-right: 2%;
margin-left: 0px;
}
.juci_Q234{
margin-right: 0px;
margin-left: 2%;
}
.juci_thinbar{
width: 100%;
border: none;
padding: 2px 5px;
font-size: 8pt;
border-bottom: 1px solid;
font-weight: bold;
min-height: 0px;
margin: 0px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
::-webkit-input-placeholder, ::-moz-placeholder, ::-ms-input-placeholder, ::-o-input-placeholder{}
.juci_groupbox{
padding: 0px 5px 5px 5px;
}
body:after{
content: url("../img/larrow-hover.png") url("../img/arrow-hover.png") url('../img/delete-L-touch.png') url("../img/tick.png") url("../img/tick-touch.png") url('../img/delete-L.png') url('../img/search-touch.png');
display: none;
}
.juci_image_container{
position: relative;
}
.juci_image_overlay{
position: absolute;
width: 100%;
top: 0px;
bottom: 0px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
.juci_imageboard .juci_image_overlay{
-webkit-border-radius: 0px;
border-radius: 0px;
}
.juci_no_ellipsis{
white-space: initial;
overflow: initial;
text-overflow: initial;
word-wrap: break-word;
}
.juci_alert_dialog{}
.juci_dialog_content{
margin: 10px auto;
width: 80%;
height: 50px;
overflow: auto;
}
.juci_dialog_text{
font-size: 13pt;
text-align: left;
}
.juci_dialog .juci_panel_name{
text-align: left;
width: 80%;
}
.juci_dialog .juci_vertical_bbar{
max-width: 190px;
}
.juci_dialog_button{}
.juci_dialog_indicator{
width: 20px;
height: 20px;
}
Smartphones (portrait and landscape) Small ones
Smartphones (portrait and landscape)
Styles
Smartphones (landscape)
tablets (portrait and landscape)
Styles
@media only screen
and (max-width : 240px){
.juci_calendar_middle, .juci_calendar_nav{
height: 30px;
}
.juci_week{
height: 30px;
}.juci_days{
height: 20px
}
.juci_flag{
max-width: 30px;
}
.juci_flag_visible > .juci_ctrl_label .juci_label_flagctr{
width: 45px;
}
}
@media only screen
and (min-width : 240px)
and (max-width : 480px) {
.juci_T1.juci_basecontrol, .juci_T2.juci_basecontrol,.juci_T3.juci_basecontrol,
.juci_T12.juci_basecontrol, .juci_T23.juci_basecontrol,
.juci_Q1.juci_basecontrol, .juci_Q2.juci_basecontrol,.juci_Q3.juci_basecontrol,.juci_Q4.juci_basecontrol,
.juci_Q12.juci_basecontrol, .juci_Q23.juci_basecontrol,.juci_Q34.juci_basecontrol,
.juci_Q123.juci_basecontrol, .juci_Q234.juci_basecontrol{
display: block;
width: 98%;
margin: 20px auto;
}
}
@media only screen
and (min-width: 310px)
and (max-width: 480px){
.juci_imageboard_listPane{
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.juci_circlepanel{
width: 310px;
height: 310px;
}
}
@media only screen
and (min-width : 600px)
and (max-width : 1024px) {
.juci_circlepanel{
width: 500px;
height: 500px;
}
}
@media only screen
and (min-width : 600px)
and (max-width : 720px){
.juci_calendar_middle, .juci_calendar_nav{
height: 82px;
font-size: 17pt;
}
.juci_week{
height: 70px;
font-size: 15pt;
}.juci_days{
height: 88px;
font-size: 17pt;
}
.juci_imageboard_listPane{
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen
and (min-width : 721px)
and (max-width : 960px){
.juci_calendar_middle, .juci_calendar_nav{
height: 88px;
font-size: 18pt;
}
.juci_week{
height: 78px;
font-size: 16pt;
}.juci_days{
height: 96px;
font-size: 18pt;
}
.juci_imageboard_listPane{
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.juci_circlepanel{
width: 500px;
height: 500px;
}
}
@media only screen
and (min-width : 961px){
.juci_calendar_middle, .juci_calendar_nav{
height: 96px;
font-size: 19pt;
}
.juci_week{
height: 85px;
font-size: 17pt;
}.juci_days{
height: 110px;
font-size: 19pt;
}
.juci_imageboard_listPane{
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
.juci_circlepanel{
width: 500px;
height: 500px;
}
}
.juci_xlist_search{
width: 98%;
margin: 15px auto;
}
:root body.__m_windowsphone{min-height: 510px \0/IE9;} /* IE9 */
:root .__m_windowsphone .juci_actionbar{bottom: -30px \0/IE9;} /* IE9 */
@media only screen and (orientation: landscape){
:root body.__m_windowsphone{min-height: 100px \0/IE9;} /* IE9 */
:root .__m_windowsphone .juci_actionbar{bottom: 0px \0/IE9;} /* IE9 */
}
:root .__m_windows8 .juci_actionbar{}
.__m_blackberry .juci_togglebar .juci_button{
margin-left: -5px;
}