/**
Notes:
-To change the background of the briefcase header, just change the #briefHeader background style below.
-To add rounded corners to the briefcase, add a "rounded" class to the #briefContainer div
--
IE Notes: (if using rounded corners or the handle)
-If adding rounded corners or the handle, note that they currently do not work at all in IE 8- and the interior corners of the handle do not show properly in IE 9-.
-The backup file styles.css-SJ0731.bak is the latest file that used images for the rounded corners which IE supports - your fallback file.
-To allow for CSS 3 styles (no images) in IE: you must include the styles-ie.css file after this file and target it to IE 8-.  Then, put the ie-css3.htc in the docroot (htdocs/[here]).
-The styles-ie.css is not complete and will need more code to work properly.
**/

/**Custom background**/

#briefHeader {
background: #0e6fb6;
}

/**Briefcase Handle**/

#briefHandle {
display: none;
}

#briefHandle div {
background: #0e6fb6;
}

#briefHandle #obj-handle-bar-curve-left {
background: -moz-radial-gradient(100% 100%, circle, rgba(0,0,0,0) 20px, #0e6fb6 15px);
background: -o-radial-gradient(100% 100%, circle, rgba(0,0,0,0) 20px, #0e6fb6 15px);
background: -webkit-radial-gradient(100% 100%, circle, rgba(0,0,0,0) 20px, #0e6fb6 15px);
}

#briefHandle #obj-handle-bar-curve-right {
background: -moz-radial-gradient(0 100%, circle, rgba(0,0,0,0) 20px, #0e6fb6 15px);
background: -o-radial-gradient(0 100%, circle, rgba(0,0,0,0) 20px, #0e6fb6 15px);
background: -webkit-radial-gradient(0 100%, circle, rgba(0,0,0,0) 20px, #0e6fb6 15px);
}

#briefHandle #obj-handle-latch-bar-rightleft-curve,
#briefHandle #obj-handle-latch-bar-leftleft-curve {
background: -moz-radial-gradient(100% 100%, circle, rgba(0,0,0,0) 5px, #0e6fb6 5px);
background: -o-radial-gradient(100% 100%, circle, rgba(0,0,0,0) 5px, #0e6fb6 5px);
background: -webkit-radial-gradient(100% 100%, circle, rgba(0,0,0,0) 5px, #0e6fb6 5px);
}

#briefHandle #obj-handle-latch-bar-rightright-curve,
#briefHandle #obj-handle-latch-bar-leftright-curve {
background: -moz-radial-gradient(0 100%, circle, rgba(0,0,0,0) 5px, #0e6fb6 5px);
background: -o-radial-gradient(0 100%, circle, rgba(0,0,0,0) 5px, #0e6fb6 5px);
background: -webkit-radial-gradient(0 100%, circle, rgba(0,0,0,0) 5px, #0e6fb6 5px);
}

/** jQueryUI overrides **/

.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
background-image: none;
background-color: #333;
}

.ui-widget.ebrief {
position: absolute !important;
border: none;
background: transparent;
}

.ui-widget.ebrief .ui-widget-content {
padding: 0;
}

.ui-widget.ebrief .ui-dialog-titlebar {
/*display: none;*/
}

.ui-widget.ebrief .ui-dialog-titlebar-close {
position: absolute;
top: 25px;
right: 5px;
z-index: 1;
}

.ui-widget.ebrief .ui-dialog-titlebar-close:hover {
border: none;
background: none;
}

.ui-widget.ebrief .ui-dialog-titlebar-close span {
position: relative;
float: left;
height: 20px;
width: 20px;
/*background: url(../images/close.png) no-repeat left top;*/
overflow: hidden;
}

.ui-widget.ebrief .ui-dialog-titlebar-close span:before {
position: relative;
float: left;
content: 'x';
color: #fff;
line-height: 14px;
border: 1px solid #fff;
padding: 2px 5px;
}

/**Layout**/

#briefModal {
background: transparent;
}

#briefHandle {
position: relative;
float: left;
width: 580px;
height: 80px;
}

#briefHandle div#obj-handle-top-overlay {
position: absolute;
top: 0;
left: 165px;
width: 250px;
height: 25px;
background: transparent !important;
overflow: hidden;
z-index: 98;
}

#briefHandle div#obj-handle-top {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 45px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
z-index: 99;
}

#briefHandle .obj-handle-bar {
position: absolute;
top: 25px;
width: 30px;
height: 50px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}

#briefHandle .obj-handle-bar.left {
left: 165px;
}

#briefHandle .obj-handle-bar.right {
right: 165px;
}

#briefHandle #obj-handle-bar-curve-left {
position: absolute;
top: 25px;
left: 195px;
width: 20px;
height: 20px;
}

#briefHandle #obj-handle-bar-curve-right {
position: absolute;
top: 25px;
right: 195px;
width: 20px;
height: 20px;
}

#briefHandle .obj-handle-latch-top {
position: absolute;
top: 60px;
width: 60px;
height: 10px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}

#briefHandle .obj-handle-latch-top.left {
left: 150px;
}

#briefHandle .obj-handle-latch-top.right {
right: 150px;
}

#briefHandle .obj-handle-latch-bar {
position: absolute;
top: 70px;
width: 10px;
height: 10px;
}

#briefHandle .obj-handle-latch-bar.leftleft {
left: 150px;
}

#briefHandle .obj-handle-latch-bar.leftright {
left: 200px;
}

#briefHandle .obj-handle-latch-bar.rightleft {
right: 150px;
}

#briefHandle .obj-handle-latch-bar.rightright {
right: 200px;
}

#briefHandle #obj-handle-latch-bar-leftleft-curve {
position: absolute;
top: 70px;
left: 160px;
width: 5px;
height: 5px;
}

#briefHandle #obj-handle-latch-bar-leftright-curve {
position: absolute;
top: 70px;
left: 195px;
width: 5px;
height: 5px;
}

#briefHandle #obj-handle-latch-bar-rightleft-curve {
position: absolute;
top: 70px;
right: 195px;
width: 5px;
height: 5px;
}

#briefHandle #obj-handle-latch-bar-rightright-curve {
position: absolute;
top: 70px;
right: 160px;
width: 5px;
height: 5px;
}

#briefContainer {
position: relative;
float: left;
clear: left;
width: 100%;
background: tranparent;
overflow: hidden;
}

#briefContainer.rounded {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

#briefHeader {
float: left;
width: 520px;
padding: 20px 30px;
color: #fff;
}

#briefHeader h4 {
font-weight: bold;
}

#briefHeader h4,
#briefHeader p {
float: left;
clear: left;
width: auto;
margin-bottom: 5px;
}

#briefBody {
float: left;
clear: left;
width: 100%;
background: #fff;
padding-bottom: 10px;
}

/**Document List**/

.briefCheckButtons {
margin:5px 45px 5px;
min-height: 25px;
}

.briefCheckButtons input {
background: buttonface !important;
border: 2px outset buttonface !important;
padding: 0 5px !important;
}

#createAllPdfButton {
background: url(../images/pdf-icon-lrg.png) no-repeat left top;
margin:5px 45px 5px;
min-height: 40px;
padding-left: 40px;
}

#createAllPdfButton span {
line-height: 40px;
}

#briefItemsContainer{margin:0 45px 15px; overflow-y:scroll;}
.briefMessages{min-height: 20px; text-align: center; padding:5px 60px;}
#briefItemList, #briefItemList li{ list-style: none; margin:0; padding:0; overflow: hidden;}
#briefItemList li{border-bottom:solid 1px #000; padding: 0 0 12px; margin:0 0 35px 0;background:#fff;}
#briefItemList li:last-child{margin-bottom:5px;}
.briefItem div{float:left;}
.briefItem div p, .briefItem div h5{margin:0;padding:0;line-height:1.2em;}
.briefItem .checkbox{   width:40px;}
.briefItem .metawrap{width:380px;}
.briefItem .remove-button{background: url(../images/del.png) no-repeat left top;width:9px; height:12px;  margin:6px 16px 0 0; cursor:pointer;}
.briefItem .print-single{background: url(../images/pdf-icon.jpg) no-repeat left top;width:20px; height:22px;}

/**Link**/

#briefcaseLink a {
float: left;
color: #fff;
padding: 10px 0 0 0;
font-size: 15px;
line-height: 25px;
}

#ebriefLinkIcon {
float: left;
width: 24px;
height: 19px;
background: url(../images/icon_briefcase.png) no-repeat left top;
font-size: 0;
position: relative;
top: -3px;
margin-right: 6px;
}

#ebriefLinkIcon span {
display: block;
color: #fff;
font-size: 12px;
font-weight: bold;
position: relative;
text-align: center;
width: 100%;
margin-top: 4px;
}

@-moz-document url-prefix() { /* FF spacing fix */
	#ebriefLinkIcon span {
		margin-top: 3px;
	}
}

#ebriefLinkIcon:hover {
background: url(../images/icon_briefcase.png) no-repeat left bottom;
}