app/assets/stylesheets/_payforms.css.scss
#notice pre {
background-color: #F3F3F3;
border: 1px dashed #AAAAAA;
margin: 20px;
padding: 8px;
word-wrap: break-word;
/* Word wrapping for <pre> tags */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
/* PAYFORM FORM FIELDSET AND LEGEND: */
#payform_status fieldset {
background-color:#e8edff;
border-width:2px 2px 2px 10px;
border-style:solid;
border-color:#aabcfe;
margin:0px 0px 0px 0px;
padding: 0px 5px 5px 10px;
}
#payform_status legend {
background-color:#e8edff;
border-width:1px 1px 1px 10px;
border-color:#8a9cde;
border-style:solid;
color:#039;
font-weight:bold;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size:90%;
padding:3px 3px;
margin:0px 0px 10px -30px;
}
/* MORE PAYFORM: */
#payform h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
color: #2758B3;
}
/* PAYFORM TABLE: */
/* Inspiration: http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ */
#payformList
{
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
width: 100%;
text-align: left;
border-collapse: collapse;
border: none;
clear: both;
}
#payformList th
{
font-weight: bold;
padding: 5px;
background: #b9c9fe;
color: #039;
border: none;
}
#payformList thead th
{
border-top: 3px solid #aabcfe;
border-bottom: 1px solid #fff;
}
#payformList tfoot th
{
font-size: 14px;
padding: 4px 3px 2px 3px;
border-top: 2px solid #8a9cde;
border-bottom: 2px solid #8a9cde;
}
#payformList tbody td
{
border: none;
border-bottom: 1px solid #fff;
color: #669;
border-top: 1px solid transparent;
background: #e8edff;
padding: 4px;
max-width: 400px;
word-wrap: break-word;
}
#payformList tbody tr.edit_item td
{
font-size: 10px;
background: #ffa;
color: #883;
padding: 1px 4px 1px 4px;
}
#payformList tbody tr.deleted_item td
{
background: #fdd0da;
color: #933;
}
#payformList td.rightside a
{
color: #d8ddef;
}
#payformList tbody tr:hover td a
{
color: #787ddf;
}
#payformList tbody tr:hover td a:hover
{
color: #484d9f;
}
#payformList tbody tr.payform_item:hover td
{
background: #d0dafd;
color: #339;
}
#payformList td.rightside {
text-align: right;
}
#payformList td.reason {
font-style:italic;
}
#payform a {
color: #2758B3;
}
#payform a:hover {
color: #FF9933;
}
div.hours-right {
float: right;
}
div.total-hours-right {
float: right;
}
/*PRETTY LION-STYLE BUTTONS*/
/*Inspiration from: http://pixify.com/blog/use-os-x-lion-to-improve-your-ui/ */
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
color: #484848;
text-decoration: none;
font: 12px "Trebuchet MS", Helvetica, Arial, sans-serif;
line-height: 21px;
height: auto;
display: block;
float: right;
margin-right: 0px;
margin-left: 4px;
margin-top: 2px;
margin-bottom: 4px;
padding: 0 10px;
background: #f0f0f0;
background: -webkit-linear-gradient(top, #f7f7f7, #d1d1d1);
background: -webkit-gradient(linear, center top, center bottom, from(#f7f7f7), to(#d1d1d1));
background: -moz-linear-gradient(top, #f7f7f7, #d1d1d1);
background: -ms-linear-gradient(top, #f7f7f7, #d1d1d1);
background: -o-linear-gradient(top, #f7f7f7, #d1d1d1);
border: solid 1px #7f7f7f;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=90, Color='#ffffff')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=90, Color='#ffffff');
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
}
a.button:hover {
border: solid 1px #333;
color: #282828;
background: -webkit-linear-gradient(top, #ffffff, #dfdfdf);
background: -moz-linear-gradient(top, #ffffff, #dfdfdf);
background: -ms-linear-gradient(top, #ffffff, #dfdfdf);
background: -o-linear-gradient(top, #ffffff, #dfdfdf);
}
a.button:active {
border: solid 1px #7f7f7f;
background: #d0d0d0;
background: -webkit-gradient(linear, left top, left bottom, from(#a8a8a8), color-stop(0.15, #c6c6c6), to(#d8d8d8));
background: -webkit-linear-gradient(top, #a8a8a8, #c6c6c6 15%, #d8d8d8);
background: -moz-linear-gradient(top, #a8a8a8, #c6c6c6 15%, #d8d8d8);
background: -ms-linear-gradient(top, #a8a8a8, #c6c6c6 15%, #d8d8d8);
background: -o-linear-gradient(top, #a8a8a8, #c6c6c6 15%, #d8d8d8);
}
/* EMAIL REMINDERS: */
#emailreminders h3 {
clear: both;
font-size: 14px;
padding: 5px 0px 10px;
}
#emailReminders form {
text-align: center;
width: 100%;
margin: 0pt;
padding: 0pt;
}
#emailReminders textarea {
display: block;
}
#emailReminders fieldset.reminders {
border: 1px solid #CCCCCC;
margin-bottom: 15px;
margin-top: 6px;
padding: 4px 10px 10px;
background: #FFFFFF none repeat scroll 0% 0%;
}
#emailReminders fieldset.reminders legend {
color: #53662E;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 15px;
font-weight: normal;
background: #FFFFFF none repeat scroll 0% 0%;
padding: 0px;
}
#unselected {
float: left;
}
#selected {
float: right;
}
#unselected, #selected {
color: #415578;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 12px;
margin: 5px auto;
border: solid 1px #ddd;
width: 49%;
text-align: center;
height: 150px;
word-wrap: break-word;
}
#unselected a, #selected a {
color: #2758B3;
text-decoration: none;
}
#unselected a:hover, #selected a:hover {
color: #FF9933;
}
/* PAYFORM 3 COLUMN THING WITH THE TIME PUNCH: */
#cols {
margin: 0px auto;
padding: 0px;
border:0;
width: 100%;
}
#cols-header {
text-align: center;
}
#left-col {
float: left;
width: 28%;
text-align: left;
vertical-align: top;
}
#hidden-button {
float: right;
text-align: right;
vertical-align: top;
}
#middle-col {
text-align: center;
height: 1px;
}
#right-col {
float: right;
text-align: right;
vertical-align: top;
width: 28%;
}
#cols-footer {
clear: both;
text-align: center;
}
#buttons {
float: right;
}
/* CATEGORIES */
div.category-item {
background-color: #F3F3F3;
border: 1px solid #AAAAAA;
margin: 5px;
padding: 5px;
word-wrap: break-word;
}
div.category-item a:link {
color: #778899;
}
div.category-item a:visited {
color: #778899;
}
div.category-item a:hover {
color: #001122;
}
div.category-item-disabled {
background-color: #F3F3F3;
border: 1px solid #AAAAAA;
color: #778899;
margin: 5px;
padding: 5px;
word-wrap: break-word;
}
div.category-item-disabled a:link {
color: #778899;
}
div.category-item-disabled a:visited {
color: #778899;
}
div.category-item-disabled a:hover {
color: #001122;
}
/* MASS CLOCKS */
div.mass-clock-item {
background-color: #F3F3F3;
border: 1px solid #AAAAAA;
margin: 5px;
padding: 5px;
word-wrap: break-word;
}
div.mass-clock-item a:link {
color: #778899;
}
div.mass-clock-item a:visited {
color: #778899;
}
div.mass-clock-item a:hover {
color: #001122;
}