/*open sans comes in 300 600 and 800 font weights*/
/*START jquery popup dialog classes*/
.jjDialog .ui-corner-all {border-radius:0px;}
.jjDialog.ui-dialog { overflow: hidden; padding: 0px; }
.jjDialog.ui-widget-content.ui-dialog {border: none;}
.jjDialog.ui-widget textarea.jjDialogTextArea.jjMedSm600 { font-size: 17px; font-weight: 600; font-family: "Open Sans", Arial; }
/*To format the text area in a jquery dialog:*/
/**/
.jjDialog.ui-dialog > .ui-widget-header
{
background:#f66e00; /*//#ff8a2b;*/
border:none;
color: #fff;
font-weight: bold;
font-size:18px;
font-family: "Open Sans", Arial;
}
/*END jquery popup dialog classes*/
/*START fonts */
.jjTitle600 { font-size:24px; font-weight:600; font-family: "Open Sans", Arial;}
.jjBig800 { font-size:20px; font-weight:800; font-family: "Open Sans", Arial;}
.jjBig600 { font-size:20px; font-weight:600; font-family: "Open Sans", Arial;}
.jjMed800 { font-size: 18px; font-weight: 800; font-family: "Open Sans", Arial; }
.jjMed600 { font-size: 18px; font-weight: 600; font-family: "Open Sans", Arial; }
.jjMed300 { font-size: 18px; font-weight: 300; font-family: "Open Sans", Arial; }
.jjMedMSm800 { font-size: 17px; font-weight: 800; font-family: "Open Sans", Arial; }
.jjMedMSm600 { font-size: 17px; font-weight: 600; font-family: "Open Sans", Arial; }
.jjMedMSm300 { font-size: 17px; font-weight: 300; font-family: "Open Sans", Arial; }
.jjMedSm800 { font-size: 16px; font-weight: 800; font-family: "Open Sans", Arial; }
.jjMedSm600 { font-size: 16px; font-weight: 600; font-family: "Open Sans", Arial; }
.jjMedSm300 { font-size: 16px; font-weight: 300; font-family: "Open Sans", Arial; }
.jjSmall800 { font-size:14px; font-weight:800; font-family:"Open Sans", Arial;}
.jjSmall600 { font-size:14px; font-weight:600; font-family: "Open Sans", Arial; }
.jjSmall300 { font-size:14px; font-weight:300; font-family: "Open Sans", Arial;}
.jjTiny300 { font-size:13px; font-weight:300; font-family: "Open Sans", Arial;}
.jjRed { color:#ff3333}
.jjFontFam { font-family: "Open Sans", Arial;}
/*END fonts */
/*START text boxs, select lists*/
input[type="text"][class~="jjMed600"], select[class~="jjMed600"]
{
font-size: 18px;
padding:5px;
min-width:65px;
font-family: "Open Sans", Arial;
font-weight:600;
}
input[type="text"][class~="jjMed300"], select[class~="jjMed300"]
{
font-size: 18px;
padding:5px;
min-width:65px;
font-family: "Open Sans", Arial;
font-weight:300;
}
input[type="text"][class~="jjMedSm300"], select[class~="jjMedSm300"]
{
font-size: 16px;
padding:5px;
min-width:65px;
font-family: "Open Sans", Arial;
font-weight:300;
}
input[type="text"][class~="jjSmall300"], select[class~="jjSmall300"]
{
font-size: 14px;
padding:5px;
min-width:65px;
font-family: "Open Sans", Arial;
font-weight:300;
}
input[type="text"][class~="boxTiny300"], select[class~="jjTiny300"]
{
font-size: 13px;
padding:2px;
/*min-width:65px;*/
font-family: "Open Sans", Arial;
font-weight:300;
}
/*END text boxs, select lists*/
/*START Boxes with title bar*/
.jjBoxTitle
{
background-color: #dbdbdb;
padding:8px;
}
.jjBoxTitleTraining
{
background-color: #f66e00;
padding:8px;
}
.jjBoxTitleBig
{
background-color: #dbdbdb;
padding:10px;
}
.jjBoxBody
{
background-color: #f5f5f5;
border-radius: 3px;
box-shadow: 1px 1px 1px #999;
margin:0px;
padding:0px 0px 10px 0px;
overflow:hidden;
}
/*END Boxes with title bar*/
/*START boxes*/
.jjBorder
{
background-color:transparent;
border-radius: 3px;
box-shadow: 1px 1px 1px #999;
}
.jjBorder2
{
border-left:solid 1px #dbdbdb;
border-radius: 4px;
box-shadow: 1px 1px 3px #999;
}
.jjBorderBottom
{
border-radius: 3px;
box-shadow: 0px 1px 1px #999;
}
.jjCenterBox
{
/*background-color: #f5f5f5;*/
background-color: #eaeaea;
border-radius: 3px;
margin:1px;
padding:10px;
overflow:hidden;
display:table;
}
.jjCenterItem
{
display:table-cell;
vertical-align:middle;
text-align:center;
}
.jjBoxDark
{
background-color: #dbdbdb;
margin:0px 1px 10px 0px;
border-radius: 3px;
box-shadow: 1px 1px 1px #999;
padding:10px 20px;
overflow:hidden;
}
.jjBox
{
background-color: #f5f5f5;
border-radius: 3px;
box-shadow: 1px 1px 1px #999;
margin:1px;
padding:10px 20px;
overflow:hidden;
}
.jjBoxFlat
{
background-color: #f5f5f5;
border-radius: 3px;
margin:1px;
}
.jjBoxFlatDark
{
background-color: #eaeaea;
padding:10px;
margin:10px;
text-align:center;
}
.jjBoxDarkSmall
{
background-color: #dbdbdb;
margin:0px 1px 10px 0px;
border-radius: 3px;
box-shadow: 1px 1px 1px #999;
padding:10px;
overflow:hidden;
}
.jjBoxSmall
{
background-color: #f5f5f5;
border-radius: 3px;
box-shadow: 1px 1px 1px #999;
margin:1px;
padding:5px;
overflow:hidden;
}
.jjBoxTable
{
border-collapse:separate;
border-spacing:0 8px;
}
table.jjBoxTable td
{
padding: 5px;
vertical-align:top;
}
table.jjBoxTable tr
{
background-color: #f5f5f5;
border-radius: 3px;
box-shadow: 1px 1px 1px #999;
}
table.jjBoxTable thead td, table.jjBoxTable thead th
{
background-color: #dbdbdb;
vertical-align:middle;
}
.jjTable
{
border-collapse:collapse;
}
.jjBoxOj
{
color:#fff;
text-shadow: 1px 1px 1px #e93d00;
border:none;
border-radius: 4px;
background-position: 0% 0%;
background-repeat: repeat;
background-attachment: scroll;
background:#f66e00;
text-shadow:1px 1px 1px #e93d00;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f66e00), to(#e36100));
background-image: -moz-linear-gradient(top, #f66e00, #e36100);
background-image: -ms-linear-gradient(top, #f66e00, #e36100);
background-image: -o-linear-gradient(top, #f66e00, #e36100);
background-image: gradient(linear, left top, left bottom, #f66e00, #e36100);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f66e00', endColorstr='#e36100')"; /*ie8*/
background:#f66e00;
box-shadow: 1px 1px 1px #999;
}
.jjNoteBox
{
background: #000 none repeat scroll 0 0;
box-shadow: 0 3px 5px #000;
border-radius: 4px;
min-width: 250px;
opacity: 0.7;
color:#fff;
text-align:center;
margin:0px auto;
}
.jjNoteBoxRed
{
/*background: #e93d00 none repeat scroll 0 0;*/
background: #ff0000 none repeat scroll 0 0;
box-shadow: 0 3px 5px #000;
border-radius: 4px;
min-width: 250px;
opacity: 0.7;
color:#fff;
text-align:center;
margin:0px auto;
padding:10px;
}
.jjBoxBig
{
padding: 10px 16px;
}
.jjBoxMed
{
padding: 10px 10px;
}
strong, b {
font-weight: bold;
}
/*END boxes*/
/*START buttons*/
.jjButton {
color: #fff !important;
font-family: "Open Sans",Arial, Arial;
text-shadow: 1px 1px 1px #e93d00;
border:none;
border-radius: 4px;
background-position: 0% 0%;
background-repeat: repeat;
background-attachment: scroll;
}
.jjButton:hover { cursor: pointer; }
.jjButton.big {
font-size: 16px;
font-weight: 600;
padding: 10px 16px;
font-family: "Open Sans", Arial;
}
.jjButton.small {
font-size: 16px;
font-weight: 600;
padding: 5px 13px;
font-family: "Open Sans", Arial;
}
.jjButton.verysmall {
font-size: 16px;
font-weight: 600;
padding: 5px 5px;
font-family: "Open Sans", Arial;
}
.jjButton_oj
{
background:#f66e00;
text-shadow:1px 1px 1px #e93d00;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f66e00), to(#e36100));
background-image: -moz-linear-gradient(top, #f66e00, #e36100);
background-image: -ms-linear-gradient(top, #f66e00, #e36100);
background-image: -o-linear-gradient(top, #f66e00, #e36100);
background-image: gradient(linear, left top, left bottom, #f66e00, #e36100);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f66e00', endColorstr='#e36100')"; /*ie8*/
}
.jjButton_oj:hover {background:#f66e00;}
.jjButton_gray
{
background:#676767;
text-shadow:1px 1px 1px #5b5b5b;
background-image: -webkit-gradient(linear, left top, left bottom, from(#5b5b5b), to(#555));
background-image: -moz-linear-gradient(top, #5b5b5b, #555);
background-image: -ms-linear-gradient(top, #5b5b5b, #555);
background-image: -o-linear-gradient(top, #5b5b5b, #e36100);
background-image: gradient(linear, left top, left bottom, #5b5b5b, #555);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5b5b5b', endColorstr='#555')"; /*ie8*/
}
.jjButton_gray:hover {background:#676767;}
a.jjButton:hover {text-decoration:none; }
/*END buttons*/
/*
box-shadow: 1px 0px 30px #999 opacity
h-shadow v-shadow blur spread color
if h-shadow = 0, no right shadow
if v-shadow = 0, no bottom shadow
if blur = 0, sharp lines on shadow, the higher the softer the shadow
if spread = adds height and width to the shadow. Makes it bigger
if opacity = 1, no "see through", if it is 0.5 is it lighter and more see through.
grays:
#676767 103 very dark
#909090 144
#a3a3a3 163
#cecece 206
#dbdbdb; 219 jjBoxDark
#eaeaea 234 jjCenterBox
#f3f3f3 243
#f5f5f5 245 jjBoxBody light
#f7f7f7 247
#fafafa 250
Large orange button
jjButton jjButton_oj small
*/