/* YII OVERRIDES */

/* use <div class="clear"></div> instead of <br clear=all /> for HTML5 */
.clear { clear: both; height: 0; overflow: hidden; 
	line-height:0;margin:0;padding:0; font-size:0;
	}
	
/* clean slate  - but not table, table tr, table td, table th, for now */
body,  a,img,table, table tr, table td, table th,tbody  { padding:0; margin:0; border:0; outline:0;}	

.tablenoborder {
	border-collapse: collapse;
	border-spacing: 0px;
}

.cellpadding5 td, .cellpadding5 th {
	padding: 5px;
}

/* override default labels and inputs */

input {
    vertical-align:middle;
    height:22px;
    padding-left:3px;
}

label {
    display:inline-block!important; 
    width:130px!important; 
    clear:none;
    color:#666;   
    font-size:11px; 
    vertical-align:top;
    padding-top:5px;
}

/* we use this on the signup page, so it can't be more than 300px */
label.caption, .caption label {
    width:300px!important; 
}

.multirow_input {
    display:inline-block;   
}

.warning_note {
    color:#ff0000;   
}


/* Emily. This affects ALL labels--required or not. */
div.form label {
	font-weight: normal; 
}
/* Emily. When the input on a form is required, make the label bold. */
div.form label.required {
	font-weight: bold; 
}


/* Emily. Turn off the display of the asterisk when a field is required. */
div.form span.required {
   display: none;
}

/* form rows */

.row { 
    padding-bottom:6px;
}

.errorMessage { 
    margin-left: 105px;   
}



.buttons, .indent { 
    padding-left:105px; 
}


.smallindent {
    padding-left:30px;
}

/* to make radio buttons show up horizontally */
.horizontal_label {
    display:inline-block;
}
.horizontal_label label {
    display:inline!important;
    font-weight:normal!important;
    padding-right:15px;
    vertical-align:middle!important;
    padding-bottom:10px!important;   
}
    

/* second input in row */

.row_second {
    margin-left:15px;
}
.row_second_custom label {
    width:auto !important;
}


/* makes state drop-down diplay like other inputs. No idea why it's needed. */
#div_state select {
    margin-left:4px;
}

/* override default sidebar styles */

#sidebar { 
    padding-top:48px;
    font-size:11px;
}

.portlet { 
    padding-bottom:15px; 
    padding-top:15px; 
    border-top:1px dotted #ccc;
}

.portlet-decoration {
    background:white;
    border:0px;
}

.portlet-title {
    font-size:11px;
    font-weight:bold;
    color:#666;
}    

.portlet-content { 
    margin-left:8px; 
    margin-bottom:0px; 
    font-size:11px !important;
}
.portlet-content a {
    font-size:11px !important;
}

.operations li a { 
    padding-left:0px; 
    font-size:14px !important;
}

.nutmeg {
    border-top:1px dotted #ccc; 
    padding-top:15px;
}


.portlet-content {
    background:white;
    padding: 3px 0;
    font-weight:normal;
}
.portlet-content a:visited, .portlet-content a:link {
   font-weight:normal;
   font-size:14px;
}


/* override default manage items view */

.items td {
    height:35px !important;
    padding: 8px !important;
}

/* not needed?

.error { 
    background-color:white !important; 
    border:none !important; 
    padding:0px !important;
    margin:0px !important;
}

.error input {
    border: 1px solid #aaa !important;    
}

*/

/* mod emily. error message
 * Added float:left and margin-left to move the error to the next line...but that made things really wonky.
*/
/*
div.form .errorMessage {
    font-size:10px !important;
    float:left;
    margin-left:104px;
}
*/

/* those bright pretty buttons! */

.btn input { 
    margin:0 !important; 
}

.btn {
	float: left;
	clear: both;
	background: url(../img/btn_left.png) no-repeat;
	padding: 0 0 0 10px;
	margin: 5px 0;	
}
.btn a, .btn input {
	float: left;
	height: 40px;
	background: url(../img/btn_stretch.png) repeat-x left top;
	line-height: 40px;
	padding: 0 10px;
	color: #fff;
	font-size: 1em;
	text-decoration: none;
    border:0px !important;
    font-size:20px;
}

.btn span {
	background: url(../img/btn_right.png) no-repeat;
	float: left;
	width: 10px;
	height: 40px;
}

/* mod emily. when a submit button is clicked, turn it gray and disable it. */
.btn_gray {
    background-color: #efefef;
}

.btn_orange {
    background-color: #FC8D72;
}

.btn_blue {
    background-color: #6194D4;
}

.btn_green { 
    background-color: #77AD20;    /* #669933; */
}

.btn_green:hover {
   background-color: #4E7503;   /*  #336600; */
}

.btn_orange:hover, .minimal .btn_green:hover {
    background-color: #f76140;
}


.buttons {
   height:55px;    /* this gives it height so content margins will work */
}

/* override green inputs */
div.form div.success input,
div.form div.success textarea,
div.form div.success select,
div.form input.success,
div.form textarea.success,
div.form select.success
{
	background: #fff !important;
	border-color: #ddd !important;    
}


/**** reformat default CGridView. Also works if remove filter row. **/

/* decided not to do this version 
.grid-view table.items th {background: #fff!important; text-align:left!important; 
     color:#aaa!important; font-size:12px!important;
    border-bottom:2px solid #ccc!important; font-weight:normal; 
    padding-left:8px !important; border-top:1px solid #ccc!important;
    border-bottom:10px !important;
}
tr.filters {background-color:#ECFBD4;}
*/

.grid-view table.items td, .grid-view table { 
    border:0px !important;
}

.grid-view table.items th a, .grid-view table.items th  { 
    color:#999 !important; 
    font-weight:normal !important;
}
.grid-view table.items th {
    background: #ECFBD4!important; 
    text-align:left!important; 
    font-size:11px!important;
    padding-left:8px !important;     
    padding-top:10px!important;
    border:0px!important;
    padding-bottom:10px !important;
}

tr.filters {
    background-color:#ECFBD4; 
    border-bottom:2px solid #ccc!important; 
}
tr.filters input {
    height:15px;
}
tr.filters td {
    padding-top:0px!important;
    height:22px!important;
}


.items tr.odd td, .items tr.even td{
    background-color:white !important; 
    border-bottom:1px solid #ECFBD4 !important; 
    padding-top:10px!important;
    padding-bottom:10px!important;
}

/* usage bar, mostly for portal but may be used elsewhere */

div.usage_bar {
    border: 1px solid #66993A;
    height: 20px; /* any height, but adjust style below as well */
    /* overflow: hidden;  **not sure what this did, but it makes alignments weird */
    width: 180px; /* any width */  
    display:inline-block;  
}
div.usage_bar p {
    background: #66993A; 
    margin: 0px;
    padding: 0px;
    height: 20px; 
}
div.usage_warn {
    border: 1px solid #FFB900;
}
div.usage_warn p {
    background: #FFB900; 
}
div.usage_error {
    border: 1px solid red;
}
div.usage_error p {
    background: red; 
}
span.usage_caption {
    font-size:11px;
    padding-left:4px;
    display:inline-block;    
}
div.usage label {
    font-weight:bold;
    font-size:13px;
    width:90px!important;
}

div.usage_label {
    font-size:10px;
    margin-left:100px;
}

div.usage {
    margin-top:20px;
}


/* status messages shown after form submit, and other places. More defined in acornhost-hqadmin.css */
/* not used: 16_star.png
*/

.status {       
    padding:10px 10px 10px 35px;
    margin:20px;     
    width:80%; 
    background-position: 10px 10px;
    background-repeat:no-repeat; 
    /* font-size:12px; 
    color:#333; */
    /* default is green, smiley */
    border:1px #A7DFA7 solid; 
    background-color:#ccffcc;
    background-image:url(../img/16_happy.png); 
}

.status_warning {   /* warning is yellow/orange, alert */
    border:1px #ffde9f solid; 
    background-color: #ffffcc;
    background-image:url(../img/16_warning.png); background-repeat:no-repeat; 
}

.status_error {     /* error is red, alert */
    border:1px #FF8F8F solid; 
    background-color:#ffcccc;
    background-image:url(../img/16_warning.png); background-repeat:no-repeat; 
}

.status_news {     /* news is yellow */
    border:1px #ffde9f solid; 
    background-color: #ffffcc;
    background-image:url(../img/16_news.png); background-repeat:no-repeat; 
}

/* used on renewal pages inside and outside of portal */
.big_number { 
    background-color: #8C9F79; 
    color: white;
    width:50px;
    height:45px;
    font-size:30px;
    text-align:center;
    padding-top:5px;
    float:left;
    margin-top:5px;
}

.next_to_big_number {
  margin-left: 80px;
  margin-bottom:30px;
}

.next_to_big_number h3 {
		color: black;
    font-size:22px;
    margin-top:0px!important;
    margin-bottom:12px !important;		
}

.month_box {
    background-color: #eee;
    padding:8px 0px 5px 15px;
    width:560px;
}

.extend_choose_months {
    width:130px;
    display:inline-block;
    border-right: 1px solid white;
}
.renew_dates {
    display:inline-block;
    vertical-align:top;
    margin-top:8px;
    padding-left:10px;
    font-size:17px;
    font-weight:bold;
    color:gray;
    width: 250px;
    margin-bottom:15px;
}

.extend_choose_months label {
    width: 100px!important;
    margin-left: 4px;
    margin-top: 3px;
}

.renew_dates {
    margin-left: 15px;
}

#review_charges_box {
		border: 1px solid #ccc;
		padding:15px;
    width:545px;
}

/* based on the status warning style. width overridden in portal */
.renew_note {
    padding:10px 10px 10px 35px;
    margin-top:10px;     
    color:#333; 
    border:1px #ffde9f solid; 
    background-position: 10px 10px;
    background-color: #ffffcc;
    background-image:url(../img/16_warning.png); 
    background-repeat:no-repeat; 
    width: 528px;
}


.review_charges {				/* this is the table itself */
    width:545px;
}

#pay_box  {
    border: 3px solid #eee;
    padding:20px 20px 15px 20px;
    width:532px;
    margin-bottom:20px;
}


.review_charges th, .review_charges td {
    padding:8px;
}

.review_charges th {
    text-align:left;
    border-bottom:1px solid #ccc;
}


.review_charges th,.review_charges .total,.review_charges .total_amount {
		font-weight:bold;
}

.review_charges .total {
		
}

.fund_by_check {
    float:right;
    margin-top:5px;
    margin-right:90px;
}

/* this is styled similarly to payment_receipt_box in the portal */
.receipt_box {
	padding:15px;
        background-color:#f1f1f1;
	font-size:18px;
}

.receipt_box table {
    padding:10px;
}
.receipt_box  table td,.receipt_box table th {
	font-size:13px;
}
.receipt_box  td, .receipt_box  th {
	text-align:left;
}


p#vtip { font-size:18px!important;}
/* right now these are only used in the portal, but in the future maybe elsewhere */
.announcement_list div {
    display: inline-block;   
    font-size: 15px;
}

.announcement_list {
    margin-top:25px;
}

.announcement_date {
    width: 120px;
}

/* these override for the homepage of the portal  */
.status .announcement_list div {
    font-size:13px;
}
.status .announcement_list  {
    margin-top: 6px;
    margin-bottom:8px;
}

.status .announcement_date {
    text-transform:uppercase;
    margin-right:5px;
    font-size: 11px!important;
    color: #E9715F;
    width: 80px;
}

/* oddly, this must go here, because it's a printable style */
.printable #referrer-log-grid {
	padding:0;
	margin:0;
	width:620px;
}

.printable #referrer-log-grid thead {display:none;}

.printable #referrer-log-grid .summary {display:none;}

.printable #referrer-log-grid .items tr.even td , .printable #referrer-log-grid .items tr.odd td{ padding:1px 3px 1px 3px!important;}

.printable #referrer-log-grid .items td { font-size: 11px; word-wrap: break-word!important; }

.printable #referrer-log-grid .items { width: 620px!important; table-layout: fixed;}

.iframe #container { width:620px;}


table.lined { border-spacing: 0 }

table.lined tr td,table.lined tr th { 
    border-bottom:1px solid #eee;
    padding: 15px 0;
    vertical-align: middle;
}