/* 
CPO Framework Stylesheet
Developed by CPO
*/

/* Page Icons */
.icon_settings { background:url(../images/icon_settings.gif) no-repeat; }
#toplevel_page_cpotheme_settings .wp-menu-image img { opacity:1; }

/* FONTS */
.fontawesome { font-family: 'fontawesome'; }

/* --------------------------------------------------------------
1. THEME SETTINGS PAGE
-------------------------------------------------------------- */

/* HEADER */
.cpotheme-header { display:block; overflow:hidden; padding:20px 0 0; margin:20px 0; }
.cpotheme-header .header-title { font-family:'Open Sans', Georgia, Times; font-size:30px; margin:0 0 15px; }
.cpotheme-header .header-version { float:right; clear:right; font-size:14px; margin:0 0 10px; }
.cpotheme-header .header-social { float:right; clear:right; margin:0 0 10px; }
.cpotheme-header .header-social-item { float:left; }
.cpotheme-header .header-version-name { float:left; text-align:right; width:120px; }
.cpotheme-header .header-version-number { float:right; font-weight:bold; width:70px; text-align:right; }

/* Navigation */
#settingsmenu { overflow:hidden; margin:20px 0px; }
#settingsmenu ul { display:block; float:left; overflow:hidden; background:url(../images/bg_tab.gif) repeat-x #d7d7d7; margin:0; border:1px solid #888; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
#settingsmenu li { display:block; float:left; text-align:center; margin:0; padding:0; color:#21759B; padding:10px 15px; text-shadow:0px 1px 0px #fff; border-left:1px solid #f5f5f5; border-right:1px solid #aaa; cursor:pointer; }
#settingsmenu li:last-child { border-right:0; }
#settingsmenu li:hover { background:#f2f2f2; color:#D54E21; }
#settingsmenu li.active { background:url(../images/bg_tab_active.gif) repeat-x #6D6D6D; color:#fff; text-shadow:0px -1px 0px #222; border:1px solid #777; border-width:0px 1px; cursor:default; }
#settingsmenu li.logo { background:url(../images/icon_nav.gif) no-repeat center; width:30px; cursor:default; }
#settingsmenu .submenu { float:right; margin:10px 0px; }

/* Layout */
.cposettings_block { overflow:hidden; padding:5px 0px; margin:0px 0px 0px; }
.cposettings_block .item { overflow:hidden; padding:15px 0 15px 15px; }
.cposettings_block .field_title { float:left; width:160px; }
.cposettings_block .field_contents { float:left; width:340px; margin:0px 30px; }
.cposettings_block .field_desc { margin-left:560px; color:#666; font-size:11px; font-weight:normal; }
/* Image Lists */
.cposettings_block .form_image_list_item {display:inline-block; text-align:center; margin:0 12px 12px 0; line-height:0; }
.cposettings_block .form_image_list_item img { padding:3px; border-radius:2px; background:#fff; box-shadow:0 1px 2px 1px rgba(0,0,0,0.5); -moz-transition:0.4s all; -webkit-transition:0.4s all; transition:0.4s all; }
.cposettings_block .form_image_list_item .selected { background:#1e8cbe; }
.cposettings_block .form_image_list_item input[type=radio] {display: none;}

/* Form Fields */
.cposettings_block input[type=text], .cposettings_block input[type=upload] { border-color:#ccc; background:#f9f9f9; margin:1px; padding:3px; border-radius:3px; border-style:solid; border-width:1px; width:100%; border-color:#ccc; background:#f9f9f9; }
.cposettings_block input[type=upload] { width:70%; }
.cposettings_block textarea { width:100%; height:100px; background:#f9f9f9; max-width:100%; min-width:100%; max-height:350px; min-height:100px; border-color:#ccc; }
.cposettings_block select { width:100%; }
.cposettings_block option:disabled { background:#ddd; font-weight:bold; padding:5px 0; }
.cposettings_block input.color { width:70px; }
.colorselector { display:inline; background:url(../images/icon_colorpicker.gif) no-repeat right; margin-left:10px; padding:2px 30px 2px 20px; width:20px; height:25px; border:2px solid #222; border-width:2px; cursor:pointer; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }

/* Separator */
.cposettings_separator { padding:0px 0px 10px; font-size:16px; font-weight:bold; font:italic 24px/20px Georgia,"Times New Roman","Bitstream Charter",Times,serif; border-bottom:1px solid #CCC; }
.cposettings_separator .desc { clear:both; font-size:12px; font-weight:normal; color:#999; }
.cposettings_divider { clear:both; }

/* Buttons */
.cposettings_block .upload_button { width:25%; margin:0; float:right; background:#fff; cursor:pointer; border:1px solid #aaa; border-radius:3px; }
.upload_preview { display:block; line-height:0; max-width:100%; margin:10px 0 0; border:3px solid #ddd; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
.cposettings_buttons { float:right; overflow:hidden; background:none; width:700px; padding:50px 0px 0px; text-align:right; }
input.cposettings_submit { float:right; padding:5px 15px; }
input.cposettings_submit:hover { }

.font_preview { display:block; padding:20px 15px; font-size:20px; background:#f9f9f9; border:1px solid #ddd; margin:5px 0 0; box-shadow:inset 0 1px 2px 0 rgba(0,0,0,0.3); border-radius:3px; }



/* --------------------------------------------------------------
2. THEME METABOXES
-------------------------------------------------------------- */

/* Metaboxes */
.cpometabox { overflow:hidden; margin:20px 10px;}
.cpometabox .name { float:left; width:150px; padding:5px 0px; font-family:Century Gothic, Verdana, Arial; font-weight:bold; }
.cpometabox .field { margin-left:180px; max-width:500px; min-width:200px; }
.cpometabox .desc { float:left; margin:6px 0px 0px 180px; clear:both; color:#666; font-size:11px; font-weight:normal; }

.cpometabox input[type=text] { width:95%; }
.cpometabox input[type=upload] { width:70%; }
.cpometabox input.color { width:70px; }
.cpometabox textarea { width:95%; height:100px; max-height:350px; min-height:100px; resize:vertical; }
.cpometabox select { width:95%; }

.cpometabox .upload_button { width:25%; margin:0; float:right; background:#fff; cursor:pointer; border:1px solid #aaa; border-radius:3px; }


/* --------------------------------------------------------------
3. OTHER WIDGETS
-------------------------------------------------------------- */

.cpometabox input.dateselector { width:100px; }
.ui-datepicker { background:#eee; border:1px solid #bbb; width:17em; padding:.2em .2em 0; display:none; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top:2px; width:1.8em; height:1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top:1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display:block; position:absolute; left:50%; margin-left:-8px; top:50%; margin-top:-8px;  }
.ui-datepicker .ui-datepicker-title { margin:0 2.3em; line-height:1.8em; text-align:center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width:100%;}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width:49%;}
.ui-datepicker table {width:100%; font-size:.9em; border-collapse:collapse; margin:0 0 .4em; }
.ui-datepicker th { padding:.7em .3em; text-align:center; font-weight:bold; border:0;  }
.ui-datepicker td { border:0; padding:1px; }
.ui-datepicker td span, .ui-datepicker td a { display:block; padding:.2em; text-align:right; text-decoration:none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image:none; margin:.7em 0 0 0; padding:0 .2em; border-left:0; border-right:0; border-bottom:0; }
.ui-datepicker .ui-datepicker-buttonpane button { float:right; margin:.5em .2em .4em; cursor:pointer; padding:.2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; }

/* RTL support */
.ui-datepicker-rtl { direction:rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right:2px; left:auto; }
.ui-datepicker-rtl .ui-datepicker-next { left:2px; right:auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover { right:1px; left:auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover { left:1px; right:auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float:left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }