/** Core styles for the basic GridField form field without any specific style.  @package sapphire @subpackage scss @todo Add radial gradient to default delete button state @todo Create SASS mixin-function to simply swap the from/to, to to/from colours in grsdient mixins? */
.cms table.ss-gridfield { width: 100%; padding: 0; margin: 20px 0 0 0; border-collapse: separate; display: table; border-bottom: 0 none; }
.cms table.ss-gridfield thead { color: #1d2224; background: transparent; }
.cms table.ss-gridfield tbody { background: #FFF; }
.cms table.ss-gridfield tbody td { /* Rounded buttons */ }
.cms table.ss-gridfield tbody td button { border: #CC0033 solid 1px; background: #CC0033; color: #FFF; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; -ms-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; margin: 0 0 0 2px; padding: 0; width: auto; min-width: 30px; height: 30px; text-shadow: none; }
.cms table.ss-gridfield tbody td button:hover { color: #222; }
.cms table.ss-gridfield tfoot { color: #1d2224; }
.cms table.ss-gridfield tfoot tr td { background: #95a5ab; padding: .7em; }
.cms table.ss-gridfield tr.sortable-header th { background: #7f9198; }
.cms table.ss-gridfield tr:hover { background: #FFFAD6 !important; }
.cms table.ss-gridfield tr:first-child { background: transparent; }
.cms table.ss-gridfield tr.ss-gridfield-even { background: #f2f9fd; }
.cms table.ss-gridfield tr.ss-gridfield-even.ss-gridfield-last { border-bottom: none; }
.cms table.ss-gridfield tr th { font-weight: bold; font-size: 12px; color: #FFF; padding: 0; border-right: 1px solid #85959C; height: 20px; /* Makes it appear as though the text sits over the boundary of the two <tr>'s in <thead> */ }
.cms table.ss-gridfield tr th span { display: block; position: relative; left: 20px; top: -7px; width: 100%; }
.cms table.ss-gridfield tr th div.fieldgroup, .cms table.ss-gridfield tr th div.fieldgroup-field { width: auto; }
.cms table.ss-gridfield tr th div.fieldgroup { min-width: 200px; /* Not sure why IE think it needs this */ }
.cms table.ss-gridfield tr th.extra, .cms table.ss-gridfield tr th.action { background: #7f9198; padding: 0; cursor: default; }
.cms table.ss-gridfield tr th.extra button.ss-ui-button, .cms table.ss-gridfield tr th.extra button:hover.ss-ui-button, .cms table.ss-gridfield tr th.action button.ss-ui-button, .cms table.ss-gridfield tr th.action button:hover.ss-ui-button { margin-left: .9em; color: #222; }
.cms table.ss-gridfield tr th.extra { text-align: center; background: #b1c0c5; background: -moz-linear-gradient(#b1c0c5 20%, #7f9198); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #b1c0c5), color-stop(80%, #7f9198)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #b1c0c5 20%, #7f9198 80%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #b1c0c5 20%, #7f9198 80%); /* Opera 11.10+ */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#b1c0c5', endColorstr='#7f9198'); /* IE5.5+ */ background: -ms-linear-gradient(top, #b1c0c5 20%, #7f9198 80%); /* IE10+ */ background: linear-gradient(top, #b1c0c5 20%, #7f9198 80%); /* W3C */ }
.cms table.ss-gridfield tr th.extra span { width: auto; display: inline; position: static; }
.cms table.ss-gridfield tr th.action { border-right: 0; }
.cms table.ss-gridfield tr th.first { -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -o-border-top-left-radius: 7px; -ms-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px; border-top-left-radius: 7px; }
.cms table.ss-gridfield tr th.last { -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -o-border-top-right-radius: 7px; -ms-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; border-top-right-radius: 7px; }
.cms table.ss-gridfield tr th button, .cms table.ss-gridfield tr th button:hover { font-size: 12px; margin-left: -0.9em; }
.cms table.ss-gridfield tr th button.ss-gridfield-sort, .cms table.ss-gridfield tr th button:hover.ss-gridfield-sort { text-align: left; padding: 0; color: #FFF; width: 95%; background: transparent; border: 0 none; box-shadow: none; text-shadow: none; }
.cms table.ss-gridfield tr th button:hover { color: #CCC !important; /* Not sure why IE think it needs this */ }
.cms table.ss-gridfield tr th.extra button.ss-ui-button { padding: .3em; line-height: 1; box-shadow: none; position: relative; top: -24px; border: #b1c0c5 solid 10px; border-bottom-width: 0; }
.cms table.ss-gridfield tr th input.ss-gridfield-sort { position: relative; top: -24px; padding: 2px; width: 65%; margin: 0 auto; border: #b1c0c5 solid 10px; border-bottom: 0; }
.cms table.ss-gridfield tr td { border-right: 1px solid #dbdddd; padding: 10px; }
.cms table.ss-gridfield tr td.bottom-all { -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-left-radius: 7px; -o-border-bottom-left-radius: 7px; -ms-border-bottom-left-radius: 7px; -khtml-border-bottom-left-radius: 7px; border-bottom-left-radius: 7px; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px; -o-border-bottom-right-radius: 7px; -ms-border-bottom-right-radius: 7px; -khtml-border-bottom-right-radius: 7px; border-bottom-right-radius: 7px; background: #7f9198; background: -moz-linear-gradient(#7f9198 20%, #b1c0c5); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #7f9198), color-stop(80%, #b1c0c5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7f9198 20%, #b1c0c5 80%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7f9198 20%, #b1c0c5 80%); /* Opera 11.10+ */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#7f9198', endColorstr='#b1c0c5'); /* IE5.5+ */ background: -ms-linear-gradient(top, #7f9198 20%, #7f9198 80%); /* IE10+ */ background: linear-gradient(top, #7f9198 20%, #b1c0c5 80%); /* W3C */ }