/* 
Structural CSS is the same or similar for all codecraft admin panels 
Nothing goes in here that isn't part of the default unmodified package
*/

html,body { height: 100%; }

html {
    min-width: 1060px;
}

body {
    padding: 0px;
    margin: 0px;
    font-family: arial, verdana, helvetica;
    font-size: 80%;
}

a, a:visited {
    text-decoration: none;
    color: inherit; 
}

a:hover {
    text-decoration: underline;
    color: red;
}

fieldset {
    margin-bottom: 10px;
    background: #eeeeee; 
    border: 1px solid;        
    border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 0px 10px 10px 10px;
}

#cms-ui-tablegroup-wrapper h1  {
    font-size: 1.2em;
}

#cms-ui-login-box h1, #cms-ui-login-warning-inner h1 {
    font-size: 1.3em;
    padding: 3px 0px;
    margin-bottom: 10px;
}

button.clean {
    padding: 0px;
    margin: 0px;
    background: transparent;
    border: 0px;
    cursor:pointer;    
}

button.bgSubmit {
    border: 0px; 
    background-color: transparent; 
    background-image: url("../../images/ui-form-small-submit.png"); 
    background-repeat: no-repeat;
    cursor: pointer;
}

fieldset legend {
    border: 1px solid;  
    font-weight: bold;
    font-size: 0.95em;      
    padding: 2px 25px; 
    margin: 0px 0px 10px 10px; 
    border-radius: 3px;
    -moz-border-radius: 3px;            
}

fieldset p {
    font-size: 0.85em;
    margin: 0px 0px 10px 0px;
    padding: 5px;
    border-radius: 6px;
    -moz-border-radius: 6px;                       
}

#saveDialog {
    height: 15px;
    width: 100px;    
    padding: 3px 5px;
    position: absolute;
    right: 10px;    
    top: -22px; 
    border: 1px solid lime;
    border-top: 0px;
    background: green;
    color: white;
    font-size: 80%;
    z-index: 1000;
    text-align: center;
}

#wrapper {
    margin: 0px auto 0px auto;
    width: 100%;
    overflow: hidden;
    min-height: 100%;    
}

#cms-ui-top-bar {
    height: 75px;
    overflow: hidden;
    padding: 10px 0px 0px 10px;
    font-family: tahoma;
}

img {
    border: 0px;
}

#cms-ui-nav-main {
    padding-left: 2px;
    padding-right: 2px;
    height: 25px;
    overflow: hidden;    
}

#cms-ui-nav-main ul {
    margin: 0px;
    padding: 0px;
}

#cms-ui-nav-main ul li {
    float: left;
    margin: 0px;
    list-style-type: none;
}

#cms-ui-nav-main ul li a {
    display: block;
    padding: 2px;
    height: 21px;
    line-height: 20px;
    text-decoration: none;
    font-size: 8pt;
    font-family: tahoma, arial, verdana, helvetica;
    font-weight: bold;
    width: 100px;
    text-align: center;
    margin-right: 1px;
}

#cms-ui-nav-main ul li a.selected {
    height: 22px;
}

.cms-message-general,
.cms-message-error,
.cms-message-info,
.cms-message-warning {
    border-radius: 6px;
    -moz-border-radius: 6px;
    margin: 0px 0px 5px 0px;
    padding: 5px 10px 5px 30px;
    font-weight: normal;
    font-size: 85%;
    border: 2px solid;
    background-image: url("../../images/ui-messages-info.png");
    background-repeat: no-repeat;
    background-position: 5px 5px;
    box-shadow: 1px 1px 2px #333333;
    text-align: left;
}

.cms-message-dialog {
    border-radius: 6px;
    -moz-border-radius: 6px;
    border: 4px solid;
    margin: 0px auto 8px auto;
    padding: 5px 10px 5px 30px;        
    width: 600px;
    font-size: 130%;
    font-weight: bold;
    text-align: center;
    background-image: url("../../images/ui-messages-dialog.png");
    background-repeat: no-repeat;
    background-position: 5px 0px;        
    box-shadow: 2px 2px 3px #000000;    
}

.cms-message-error,
.cms-message-warning {    
    background-image: url("../../images/ui-messages-warning.png");
    background-repeat: no-repeat;
}

.cms-message-info {
    background-image: url("../../images/ui-messages-info.png");
    background-position: 5px 5px;    
}

.cms-message-field {
    float: left;
    overflow: hidden;
    margin: 3px 10px 0px 10px;
    font-weight: bold;
    font-size: 85%; 
}

.cms-field-required {
    font-weight: bold;
    color: red;
}

.cms-edit-suffix {
    font-size: 85%; 
    color: #666666; 
    display: inline-block; 
    vertical-align: top;
    font-style: italic;
    margin-top: 3px; 
    padding: 0px 10px 0px 10px;
}

#cms-ui-main-content {
    padding: 10px;
    min-height: 500px; 
}

#cms-ui-main-content-inner {
    min-width: 1000px;
    max-width: 1500px;  
    margin: 0px auto;
}

#uiModal {
    opacity: 0.8;
    position: absolute;
    z-index: 1000;
    background-color: #000000;
    display: none; 

}

#cms-ui-upload-box {
    display: none;
    position: absolute; 
    width: 400px; 
    height: auto; 
    overflow: hidden; 
    z-index: 9999;    
}

#cms-ui-upload-box .title {
    font-size: 130%; 
    margin-bottom: 5px; 
    padding: 5px; 
    font-weight: bold; 
    text-align: center;
}

#cms-ui-upload-box .content {
    padding: 5px; 
    overflow: hidden;
}

#cms-ui-upload-box #uploadInfoPercent {
    text-align: center; 
    font-size: 90%; 
    color: gray;    
}

#cms-ui-upload-box #uploadProgessBar {
    overflow: hidden; 
    height: 15px; 
    text-align: center;
}

.container {
    width: 100%;
    overflow: hidden;
    padding: 1px 0px;
}

.container-error {
    
}

#cms-ui-login-warning-outer {
    width: 630px; 
    overflow: hidden; 
    background: url("../../images/bg-stripe-danger.png"); 
    padding: 8px; 
    margin: 20px auto; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    border: 1px solid gray;    
}

#cms-ui-login-warning-inner {
    text-align: center; 
    margin: 0px auto; 
    font-family: arial, helvetica; 
    background: white; 
    opacity: 0.95;
    padding: 15px;  
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    border: 1px solid gray;    
}

#cms-ui-login-box {
    width: 230px;      
    overflow: hidden;
    font-family: arial;
    margin: 0px auto;
    border: 6px solid;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 10px 15px 10px 15px;
}

#cms-ui-pageheader { 
    background: #00aeef;
    padding: 3px 10px 8px 10px;
    margin-bottom: 10px;
    border-radius: 6px; 
}

#cms-ui-pageheader h1 {
    color: white;
    padding: 0px;
    margin: 0px;
    font-size: 160%;
}

#cms-ui-pageheader p { 
    color: white; 
    padding: 0px 0px 0px 0px;
    margin: 0px;
    font-size: 85%;
}

#cms-ui-login-box h1 {
    text-align: center;
    -moz-border-radius: 6px;
    border-radius: 6px;
    opacity: 0.90;
    margin-bottom: 5px;
}

#cms-ui-login-warning-inner h1 {
    border-radius: 6px;    
    -moz-border-radius: 6px;
    text-align: center;
}

.cms-table {
    border: 2px solid;
    font-family: arial, helvetica;
    font-size: 9pt;
    width: 100%;
}

.cms-table thead {
    font-size: 1.1em;
    text-align: left;
}

.cms-table thead th {
    padding: 3px;
    font-weight: bold;
}

.cms-table tbody {
    
}

.cms-table tbody tr td {
    padding: 5px 0px 1px 5px;
}

.cms-field-info {
    float: left;
    width: 30px;
    overflow: hidden; 
}

.cms-field-name,
.cms-field-name-error {
    float: left;
    min-width: 280px;    
    overflow: hidden;                     
}

.cms-field-name-error {
    font-weight: bold; 
    color: red;
}

.cms-field-input {
    float: left;
    width: 705px;
}

.cms-field-input img {
    margin-right: 7px;
    margin-bottom: 5px;
    padding: 0px;    
}

.cms-field-input-error {
    float: left;
}

.cms-field-input-error input,
.cms-field-input-error select,
.cms-field-input-error textarea {
    border: 1px inset red;
    background: pink;
}

.ui-accordion-header {
    padding-left: 25px;      
} 

#cms-ui-tablegroup-wrapper {
}

#cms-ui-tablegroup-wrapper .cms-ui-tablegroup {
    box-shadow: 1px 1px 3px black;
}

#cms-ui-tablegroup-wrapper .cms-ui-tablegroup .title {
    padding: 0px 10px;
    margin-bottom: 10px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
}

.cms-ui-tablegroup .title .title-left {
    text-align: left;
    float: left;
    width: 50%;
}

.cms-ui-tablegroup .title .title-right {
    text-align: right;
    float: right;
    width: 50%;
}

#cms-ui-tablegroup-wrapper .cms-ui-tablegroup {
    border: 1px solid;
    margin-bottom: 15px;
    overflow: hidden;
}

#cms-ui-tablegroup-wrapper .cms-ui-button {
    width: 75px; 
    min-height: 90px; 
    overflow: hidden; 
    float: left; 
    text-align: center; 
    margin-bottom: 10px; 
    margin-right: 10px; 
    line-height: 10px;
}

#cms-ui-tablegroup-wrapper .cms-ui-button .background {
    width: 64px; 
    height: 64px; 
    margin: 0px auto; 
}

#cms-ui-tablegroup-wrapper .cms-ui-button .label {
    font-size: 0.8em; 
    color: gray;
}

.ui-rightbox {
    overflow: hidden;  
    border-radius: 8px 8px 4px 4px;
    -moz-border-radius: 8px 8px 4px 4px;
    /* padding: 5px; */
    margin: 0px 0px 10px 0px; 
    border: 2px solid;
}

.ui-rightbox h1 {          
    border-radius: 6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
    border: 0px;
    border-bottom: 1px solid black;
    margin-bottom: 4px;
}

.ui-rightbox .inner {
    padding: 0px 5px 5px 5px;
}

div.notification {
    padding: 3px 3px 7px 3px;
    margin: 0px 0px 9px 0px;
    font-size: 0.85em;
    text-align: center; 
}

.dialogTable {
    font-size: 120%;
}

.dialogTable tr td:first-child {
    font-weight: bold;
}

.dialogTable input,
.dialogTable select,
.dialogTable textarea {
    width: 300px;
    border: 1px solid silver;
}

#cms-ui-powered-by {
    position: relative;
    height: 20px;
    margin-top: -24px;
    letter-spacing: 1px; 
    font-size: 90%;
    font-variant: small-caps;
    color: silver;
    background: #333333;
    padding: 4px 10px 0px 10px;
}

.cms-ui-tab {
    overflow: hidden; 
    margin: 0px 5px 0px 0px;     
    text-align: center; 
    border: 1px solid;
    padding: 3px 10px;
    float: left;
    height: 34px;
}

.cms-ui-tab.above { border-radius: 6px 6px 0px 0px;  border-bottom: 0px; }
.cms-ui-tab.below { border-radius: 0px 0px 6px 6px;  border-top: 0px; }

.cms-ui-tab .paginator { float: right; min-width: 160px; }
.cms-ui-tab .inputs { font-weight: bold; }
.cms-ui-tab .plaintext { font-weight: bold; }
.cms-ui-tab .paginator select { font-weight: bold; }
  
.cms-ui-tab.above .plaintext { margin-top: 7px; }
.cms-ui-tab.above .buttons { margin-top: 2px; }
.cms-ui-tab.above .inputs { margin-top: 5px; }
.cms-ui-tab.above .paginator { margin-top: 7px; }

.cms-ui-tab.below .plaintext { margin-top: 7px; }
.cms-ui-tab.below .buttons { margin-top: 0px;  }
.cms-ui-tab.below .inputs { margin-top: 5px;  }
.cms-ui-tab.below .paginator { margin-top: 7px;  }
                                     
.cms-ui-toolbar { border-radius: 6px 6px 6px 6px; padding: 6px 10px 4px 10px; text-align: right; }

.cms-ui-toolbar2 { margin-bottom: 10px; text-align: right; }
.cms-ui-toolbar2 button { margin-left: 8px; }

#cms-action-new-tablegroup {
    opacity: 0.5; 
    border: 1px dotted !important; 
    height: 100px;
}

.cms-ui-tablegroup-buttontray {
    padding: 0px 10px; 
    overflow: hidden;
}

#uiDialog h1 {
    font-size: 120%;
    background: rgba(255,90,0,0.5);
    font-weight: bold;
    margin-bottom: 5px;
    padding: 2px 5px;
    border-radius: 3px;    
}

#uiDialog p {
    margin-bottom: 5px;
}

.imageSelect.option {
    overflow: hidden; 
    float: left; 
    width: 64px; 
    height: 64px; 
    margin: 3px;
}

/* JCROP Stuff */
#cropWrapper {
    overflow: hidden; 
    height: 500px; 
    width: 950px; 
    margin: 0px auto 0px auto; 
    background: silver;
    background-image: url("../../images/bg-cms-transparent.jpg");
    border: 2px solid green;
    padding: 5px;
}
#fidelityWarning,
.imageAdjusted {    
    width: 964px; 
}

#fidelityWarning {
    margin: 5px auto 0px auto; 
    border-radius: 6px 6px 0px 0px;
    font-size: 90%;    
    padding: 4px 0px 1px 0px; 
    text-align: center;
}   
.imageAdjusted {
    margin: 0px auto 10px auto; 
    padding: 0px 0px 2px 0px;
    color: #666666;
    font-size: 80%;
    border-radius: 0px 0px 6px 6px;    
    text-align: right;
}
 
.fidelityOK {
    background: green; 
    color: white; 
}
.fidelityBad {
    background: red; 
    color: white; 
}

#jcropForm {
    font-size: 80%;
    color: #333333;
    width: 964px;
    margin: 0px auto;
    overflow: hidden;
}

#jcropForm .info {
    width: 50%;
    overflow: hidden;
    float: left;
}
#jcropForm .control {
    width: 50%;
    overflow: hidden;
    float: left;
    padding-top: 20px;
    text-align: right;    
}

#jcropForm input {
    color: #333333;
    font-weight: bold;
    font-size: 80%;
    border: 1px solid gray;
    background: silver;
    margin: 0px;
    padding: 0px;
    width: 25px;
    
}

#info_tooltip {
    display: none; 
    width: 200px; 
    font-size: 8pt; 
    font-family: arial; 
    border: 1px solid; 
    padding: 6px; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    -moz-box-shadow: 3px 3px 3px #888888; 
    -webkit-box-shadow: 3px 3px 3px #888888; 
    box-shadow: 3px 3px 3px #888888;     
}

.colour-format-swatch {
     height: 16px; 
     width: 16px; 
     float: left; 
     border: 1px solid black; 
     border-radius: 4px; 
     box-shadow: 1px 1px 1px #cccccc;
}

.colour-format-bar {
    height: 14px; 
    width: 60px; 
    line-height: 14px; 
    text-align: center;
    float: left; 
    border: 1px solid black; 
    font-size: 95%;
    margin: 0px;
    padding: 0px;
    border-radius: 4px; 
    box-shadow: 1px 1px 1px #cccccc; 
}

.dragSelect {
    cursor: pointer;
}

.debugBox {
    display: none;
    position: absolute;    
    background: #eeeeee;   
    box-shadow: 4px 4px 5px #000000; 
    border-radius: 6px;
    z-index: 9999;    
    padding: 15px;
    overflow: hidden;
    border: 5px solid white;   
    top: 30px;
    width: 800px;
}

.debugBox h1 {
    padding: 5px 10px 4px 10px;
    text-align: left;
    background: black;
    height: 30px;
    line-height:30px;
    color: white;
    font-size: 140%;
    font-weight: bold;
    margin-bottom: 5px;
    border-radius: 6px;
}
.debugBox h1 .closeParentDiv {
    position: relative;
    margin-top: 2px;
    cursor: pointer;
}

.dragSelector-initiator {
    display: block;
    float: left;
}

.dragSelector-initiator.imageSelect {
    
}
.dragSelector-initiator.imageSelect img {
    border: 2px solid white;
    box-shadow: 2px 2px 1px #dddddd;
}

.dragSelector-initiator.fileSelect {
    overflow: hidden;
    width: 345px;    
    border: 1px solid silver;
    box-shadow: 2px 2px 1px #dddddd;
    margin: 0px 4px 4px 0px;
}

.dragSelector-initiator.fileSelect .fileImage {
     width: 70px;
     float: left;
     margin-top: 3px;
     margin-left: 3px;
}
dragSelector-initiator.fileSelect .fileDetails {
    width: 200px;
    float: left;        
}
.dragSelector-initiator.fileSelect .fileDetails .title {
    font-weight: bold;
    font-size: 110%;
    color: gray;
}
.dragSelector-initiator.fileSelect .fileDetails .desc {
    color: gray;
    font-size: 90%;
}


#dragSelector-outer {
    position: absolute;
    z-index:9900;
    width: 800px;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 4px 4px 5px #000000; 
    padding: 15px; 
    overflow: hidden;
    border: 5px solid white;   
    background: #eeeeee;
    top: 30px;    
}

#dragSelector-outer h1 {
    padding: 5px 10px;
    margin-bottom: 5px;
    font-size: 120%;
    font-weight: bold;
    background: black;
    color: white;
    border-radius: 6px;
}
#dragSelector-outer h2 {
    padding: 5px 0px;
    text-align: center;
    font-weight: bold;
    font-size: 110%;
    background: gray; 
    color: white;
    border-radius: 6px;
}
#dragSelector-outer p {
    margin-bottom: 10px; 
    font-size: 85%;
}
.dragSelector-panel-left {
    width: 380px;    
    float: left;
}
.dragSelector-panel-right {
    width: 380px;    
    float: right;
}

.dragSelector-useable-area {
    height: 600px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: scroll;
    margin-top: 5px;
    border: 1px solid gray;
    background: white;
}
#dragSelector-inner-available,
#dragSelector-inner-selected {
    overflow: hidden;
}
.dragSelector-list-item {
    height: 57px;
    padding: 2px 5px;    
    margin: 2px 0px;
    vertical-align: middle;
    border: 1px solid transparent;
    width: 346px;
}

.dragSelector-list-item-image {
    float: left;
    width: 65px;    
}

.dragSelector-list-item-text {
    float: left;
    width: 280px;
}

.dragSelector-list-item-text .title {
    font-weight: bold;
    font-size: 100%;
    color: gray;    
}

.dragSelector-list-item-text .desc {
    font-weight: normal;
    font-size: 80%;
    color: gray;    
}

.dragSelector-list-item-image img {
    border: 2px solid white;
    box-shadow: 2px 2px 1px #dddddd;
}
.dragSelector-list-item:hover {
    background: #E3F7D4;
    cursor: move;
    border-top: 1px dotted green;
    border-bottom: 1px dotted green;
    width: 366px;
}

.dragSelector-highlight {
    background: #F9F9D4;
    border-top: 1px dotted #cccccc;
    border-bottom: 1px dotted #cccccc;
    width: 100%;
    height: 50px;
    margin: 2px 0px;
}