/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
	background: white;
}

#navbox {
	float: right;
	margin: 0.5em;
}

#feedback {
	font-weight: bold;
}

#signup {
	font-weight: bold;
	font-style: italic;
}

#header {
	color: white;
}

#header a {
	color: white;
}

a {
	text-decoration: none;
}

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

#message {
	padding: 0 1em;
}

h1, h2, h3 {
	margin-top: 0.1em;
	margin-bottom: 0.4em;
}

#todolists {
	margin-right: 0.5em;
}
#howtos {
}

#actionsbox {
    padding:1px;
}

#available_actions {
    position: relative;
    width: 250px;
    list-style: none;
    margin:2px;
    padding:3px;
}

.available_action {
    padding: 7px;
    margin: 3px;
    zoom: 1;
}

li.available_action {
    background-color: #D8D4E2;
    border:1px solid #6B4C86;
}

#user_actions { float: right; }

.action_buttons {
	float: right;
}

.todotask_edit_button {
	float: right;
	margin-right: 0.8em;
}
.action_edit_button {
	float: right;
	margin: 0 0.8em;
}

.todolist_edit_button, .howto_edit_button  {
	width: 16px;
	height: 16px;
	background-image: url('http://208.109.208.18/howdoable.com/images/edit.png');
	background-repeat: no-repeat;
	cursor: pointer;
	display: block;
	float: right;
	margin-right: 0.3em;
}

.readonly_howto_copy_button {
	width: 17px;
	height: 16px;
	background-image: url('http://208.109.208.18/howdoable.com/images/copy.png');
	background-repeat: no-repeat;
	cursor: pointer;
	display: block;
	margin-right: 0.3em;
}

.howto_copy_button {
	width: 17px;
	height: 16px;
	background-image: url('http://208.109.208.18/howdoable.com/images/copy.png');
	background-repeat: no-repeat;
	cursor: pointer;
	display: block;
	float: right;
	margin-right: 0.3em;
}

.action_del_button, .todotask_del_button {
	cursor: pointer;
	float: right;
}

.todolist_edit_button {
	margin-top: 2px;
}

.action_add_button {
	border: 1px solid black;
	padding-left: 10px;
	padding-right: 10px;
	margin-right: 10px;
	cursor: pointer;
	background: white;
}
.action_add_button:hover {
	border: 1px solid green;
	border-left: 5px solid green;
	padding-left: 6px;
	color: green;
	background: white;
}

.action_icon {
	margin: 0 0.2em 0.2em 0;
	vertical-align: text-bottom;
	border: 0;
}

.howto {
	margin-bottom: 1em;
	list-style: none;
	position: relative;
}

/* ToDoList */

.replaced_variable {
	/* Makes it problematic to copy/paste text
	border-bottom: 1px dashed silver;
	*/
}

.variable {
	border: 1px dashed burlywood;
	background: #fdf9e4;
	padding: 0.1em;
	font-style: italic;
	color: grey;
}

.variable .opencurly, .variable .closecurly, .variable .dollarsign {
	display: none;
}

.varname {
	color: brown;
	padding-left: 0.2em;
	padding-right: 0.1em;
}

#todotasks .varname:hover {
	cursor: pointer;
}

#howtotitle .variable, .action_title .variable, #checklisttitle .variable, .todotask .title .variable {
	border: none;
	background: transparent;
}

#howtotitle .varname, .action_title .varname, #checklisttitle .varname, .todotask .title .varname {
	padding-left: 0;
	padding-right: 0;
}

#checklisttitle, #howto_info h2 {
	margin-bottom: 0;
}

#attribution {
	margin-bottom: 1em;
	font-size: small;
}

.widetasks, .wideactions {
	width: 80%;
	margin-left: 10%;
}

.todolist {
	background: white;
	padding: 0.6em;
}

.todolist_title {
	font-size:larger;
	font-weight:bold;
}

.todolist .checklist-counter {
	margin-left: 0.2em;
	text-align: right;
}

.todolist .checklist-progress, .todolist .todolist_controls {
	width: 105px;
	margin-left: 0.3em;
}

.todolist img {
	min-width: 40px
}

#todotasks {
	list-style: none;
	padding: 1em 0;
	margin: 0;
}

#todotasks li:last-child {
	margin-bottom: 0;
}

li.skipped .title, li.done .title {
    color: silver;
    text-decoration: line-through;
}

span.skipped-label {
	display: none;
	margin-right: 0.5em;
}
li.skipped span.skipped-label {
	display: none;
}

span.done-label {
	display: none;
	margin-right: 0.5em;
}
li.done span.done-label {
	display: none;
}

li.todotask {
	border-left: 0.3em solid #d3d3d3;
	box-shadow: 3px 3px 3px silver;
}

li.todotask.done {
	border-left: 0.3em solid #468847;
}

li.todotask.skipped {
	border-left: 0.3em solid #faa732;
}

li.todotask:hover {
	/* background-color: #FCFCFC; */
}

#taskslegend {
	margin-bottom: 0;
}

#complete_tasks_counter, #all_tasks_counter {
	font-weight: bold;
}

#show_all_tasks_button i {
	visibility: hidden;
}

#show_all_tasks_button.selected i {
	visibility: visible;
}

#show_unfinished_tasks_button i {
	visibility: hidden;
}

#show_unfinished_tasks_button.selected i {
	visibility: visible;
}


li.being_edited, li.being_edited:hover {
	background-color: #ebebeb;
	border-color: #d3d3d3;
}

li.disabled {
	padding: 5px;
	color: rgb(159, 159, 159);
}

li.disabled.current {
	background-color: transparent;
}

li.current .title {
	font-weight: bold;
}

li .note {
	margin: 0.5em 0 0.2em 0;
}

li.todotask .note {
	margin-left: 2em;
}

li .note p:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
}

li .note li {
	list-style-type: disc;
}

li.done .action_icon {
	opacity: 0.5;
}

li.done .open_button {
	opacity: 0.5;
}

li.disabled .action_icon {
	opacity: 0.5;
}

li.disabled .open_button {
	opacity: 0.3;
}

#todotasks.hide-completed li.done, #todotasks.hide-completed li.skipped {
	display: none;
}

#todotasks.hide-completed li.done.slidingup, #todotasks.hide-completed li.skipped.slidingup {
	display: block;
}

input.checkmark {
	cursor: pointer;
	font-weight: bold;
	color: green;
	text-decoration: none;
	margin: 0;
	vertical-align: baseline;
}

.skip_step {
	font-size: xx-small;
	color: silver;
	display: block;
	visibility: hidden;
}

.todotask .task_status_controls:hover .skip_step {
	visibility: visible;
}

.todotask.done .skip_step {
	visibility: hidden;
}

.todotask.skipped .skip_step {
	visibility: hidden;
}

.skip_step:hover {
	color: red;
}

.todotask .task_status_controls {
	text-align: center;
	padding: 0.2em 0.4em 0.3em 0.4em;
	position: absolute;
	top: 0.4em;
	left: 0.4em;
	border: 1px solid transparent;

	-webkit-border-radius: 0.4em;
	border-radius: 0.4em;
	-moz-border-radius: 0.4em;
}

.todotask .with_skip:hover {
	background-color: #f5f5f5;
	border: 1px solid silver;
}

.todotask.skipped .task_status_controls:hover, .todotask.done .task_status_controls:hover {
	background-color: transparent;
	border: 1px solid transparent;
}

.todotask .with_skip:hover .skip_step {
	visibility: visible;
}

.todotask.slidingup, .todotask.done, .todotask.skipped {
	box-shadow: 0 0 0 white;
	top: 3px;
	left: 3px;
	opacity: 0.8;
}

.todotask.slidingup .task_status_controls.with_skip {
	background-color: transparent;
	border: 1px solid transparent;
}

.todotask.slidingup .task_status_controls.with_skip .skip_step{
	visibility: hidden;
}

.todotask.slidingup .todotask_controls {
	display: none;
}

.todotask.skipped .task_status_controls:hover .skip_step, .todotask.done .task_status_controls:hover .skip_step {
	visibility: hidden;
}

.do_button {
	float: right;
	font-weight: bold;
	border: 1px solid black;
	padding-left: 10px;
	padding-right: 10px;
	cursor: pointer;
	background: white;
}
.do_button:hover {
	border: 1px solid green;
	border-right: 5px solid green;
	padding-right: 6px;
	color: green;
	cursor: pointer;
	background: white;
}

/* todo task */
.next, .prev {
	float: left;
	font-weight: bold;
	font-size: x-large;
	margin: 10px;
}

span.next, span.prev {
	color: silver
}

.open_button {
	float: right;
}

.open_button img {
	border: 0;
}

a.task_done {
	float: right;
	font-weight: bold;
	border: 1px solid black;
	padding-left: 10px;
	padding-right: 10px;
	background: white;
	color: green;
	cursor: pointer;
}

#todotask {
	position: relative;
	width: 450px;
	background: #f7f7f7;
	border: 1px solid gray;
	list-style: none;
	margin:10px;
	padding:0 10px 0 10px;
	float: left;
}

.howto_actions {
	margin: 10px;
}

.howto_description {
	margin: 10px 0 0 0;
}

.howto_title {
	font-weight: bold;
	font-size: larger;
}


#menu {
	padding: 0.5em;
	background: #3B3B3B;
}

.menuitem {
	font-size: x-large;
	font-weight: bold;
	margin: 0 1em 0 0.2em;
}

.todolist_status {
	text-align: center;
	font-weight: bold;
}

.todolist_complete {
	color: green;
}

#main {
	margin: 1em;
}

#logohead {
	background: #666666;
	background-image: url('http://208.109.208.18/howdoable.com/images/top_bg.png');
	height: 107px;
}

#header {
	background-image: url('http://208.109.208.18/howdoable.com/images/top_bg.png');
	height: 164px;
	margin-bottom: 1em;
	background-repeat: repeat-x;
}

footer {
	clear: both;
	color: white;
	padding: 2em 2em 5em 2em;
	margin-top: 2em;
	border-top: 1px solid #e5e5e5;
	background-color: black;
}

li.todotask {
    position: relative;
	background-color: white;
	padding-left: 11px;
}

li.todotask .todotask_controls  {
	visibility: hidden;
}
li.todotask:hover .todotask_controls {
	visibility: visible;
}

.todolist td {
    position: relative;
}

.todolist .progress {
    margin-bottom: 0;
}
.howto_action .howto_controls {
	visibility: hidden;
}
.howto_action:hover .howto_controls {
	visibility: visible;
}

.howto .howto_controls {
	visibility: hidden;
    position: absolute;
    right: 0;
    top: 0;
	border: 0;
    margin: 0.2em;
}

.howto:hover .howto_controls {
	visibility: visible;
}

.actionNote {
	margin: 0.5em 0 1em 0;
}

.signup_table {
	border: solid 5px #bbb;
	font-size: 12px;
	margin-bottom: 40px;
}

.signup_table h2 {
	font-weight: bold;
}

.signup_table th {
	border-bottom: solid 1px #bbb;
}

.signup_table th, .signup_table td {
	padding: 7px;
}

.signup_table .free, .signup_table .basic, .signup_table .premium, .signup_table .max{
	margin: 3px;
}

.signup_table .basic {
	color: #316d09;
}

.signup_table .premium {
	color: #7ca734;
}

.signup_table .max {
	color: #9fc21e;
}

.signup_table .right {
	border-left: solid 1px #bbb;
	font-weight: bold;
}

.signup_table .row .last {
	border-bottom: solid 1px #bbb;
}

.signup_table tr.odd {
	background: #f3f3f3;
}


.signup_table .price {
	font-size: 20px
}

.signup_table sup {
	font-weight: normal;
	font-size: 13px;
}

.signup_table .left {
	width: 28%;
}

.subtitle_left {
	text-align: right;
}

td.section {
	font-size: larger;
	font-weight: bold;
}

.signup_button1 {
	background: url('http://208.109.208.18/howdoable.com/images/button_signup.png') left top;
	height:37px;
	width: 126px;
	float: left;
	margin: 4px 0px 4px 2px;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	text-decoration: none;
	text-align: center;
	line-height: 38px;
}

.signup_button1:hover {
	background: url('http://208.109.208.18/howdoable.com/images/button_signup.png') left bottom;
	height:37px;
	width: 126px;
	float: left;
	color: #fff;
}

.signup_button2 {
	background: url('http://208.109.208.18/howdoable.com/images/button_signup_disabled.png') left top;
	height:37px;
	width: 126px;
	float: left;
	margin: 4px 0px 4px 2px;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	text-decoration: none;
	text-align: center;
	line-height: 38px;
}

.linked {
	color: blue;
	text-decoration: underline;
}

#feedbackbutton {
	float: right;
	background: #D2922D;
	padding: 3px 7px 3px 7px;
	margin-top: 3px;
	font-weight: bold;
	font-size: 1.5em;
}

#feedbackbutton:hover {
	background: #418F41;
	text-decoration: none;
}

.meter-wrap{
	position: relative;
}
.meter-wrap, .meter-value, .meter-text {
	/* The width and height of your image */
	width: 100px;
	height: 22px;
}
.meter-wrap, .meter-value {
	background: #f2f2f2 url('http://208.109.208.18/howdoable.com/images/progressbar.png') top left no-repeat;
}
.meter-text {
	position: absolute;
	top:0; left:0;
	padding-top: 5px;
	color: black;
	text-align: center;
	width: 100%;
}

.startbutton {
	font-weight: bold;
}

li.skipped {
	padding-top: 8px;
}

li .note {
	-ms-word-break: break-all;

	/* Be VERY careful with this, breaks normal words wh_erever */
	word-break: break-all;

	/* Non standard for webkit */
	word-break: break-word;

	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

#howtos .howto_action .note {
    display: none;
}

#howtos.show_notes .howto_action .note {
    display: block;
}

.invisible {
	display: none;
}

.howto_actions_box .howto_visibility, .howto_actions_box .howto_featured, .howto_actions_box .howto_author {
	padding: 0.4em;
}

.howto_actions_box .howto_tags {
	margin-top: 6px;
	float: right;
}

.howto_actions_box .howto_visibility img, .howto_actions_box .howto_featured img {
	vertical-align: baseline;
	width: 12px;
	height: 12px;
}

#howto_list.tile .howto_actions_box .howto_visibility .visibility_label {
	display: none;
}

.howto_author i {
	vertical-align: baseline;
}

/* User Invitation page */
.invitation_sent_time {
	color: silver;
}

#listdonemessage {
	font-style: italic;
	margin: 0;
}

#task_edit_form .control-label {
	width: 2.5em;
}

#task_edit_form .controls {
	margin-left: 3em;
}

#action_form_buttons {
	margin-top: 0.3em;
}

#task_edit_form form {
	margin: 0;
}

#edithowtodialog form {
	margin: 0;
}

.howto_action.being_edited .howto_controls, .howto_action.being_edited .howto_contents  {
	display: none;
}

.howto_action .action_title {
	font-size: large;
}

.todotask .title {
	font-size: large;
}

.todotask .task_header {
	margin-left: 2em
}

.todotask.being_edited .todotask_controls, .todotask.being_edited .todotask_contents {
	display: none;
}

.howto_isprivate_icon {
	width: 16px;
	height: 16px;
	display: inline-block;
	margin-top: 5px;
}

.howto_details .howto_isprivate_icon {
	margin-left: 0.3em;
}

.howto_isprivate_icon.private_howto_icon {
	background-image: url('http://208.109.208.18/howdoable.com/images/lock.png');
}

.howto_isprivate_icon.public_howto_icon {
	background-image: url('http://208.109.208.18/howdoable.com/images/shared.png');
}

#edithowtodialog h3 {
	margin: 0;
}

#edithowtodialog .control-group {
	margin-bottom: 1em;
}

#edithowtodialog .control-group:last-of-type {
	margin: 0;
}

#edithowtodialog .control-label {
	width: 5.5em;
}

#edithowtodialog .controls {
	margin-left: 6.2em;
}

/* Space around small fluid container should not be 0 */
@media (max-width: 767px) {
	.container-fluid {
		padding: 0 0.5em;
	}
}

/* Sortable howto */
#howtoactions {
	margin-left: 0;
}

body.dragging, body.dragging * {
	cursor: move !important;
}

.dragged {
	opacity: 0.4;
	display: none;
	z-index: 2000;
}

#howtoactions li.placeholder {
	position: relative;
	/** More li styles **/
	border: 2px dashed silver;
	height: 2.8em;
	margin-bottom: 1em;
	list-style: none;

	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-border-radius: 3px;
}

.howto_action {
	margin-bottom: 1em;
	list-style: none;
}

span.draghandle {
	cursor: move;
	margin-right: 0.5em;
}

#task_edit_form .form-row {
	margin-bottom: 0.4em;
}

#form_show_details, #form_hide_details {
	margin-left: 0.3em;
	padding-top: 0.5em;
	display: block;
}

#action_form_buttons span {
	margin-right: 0.5em;
}

/**
 * Making Bootstrap's input-prepend work with input-block-level
 * http://stackoverflow.com/questions/13306670/bootstrap-prepended-and-appended-input-how-to-max-input-field-width
*/
.input-prepend.input-block-level {
	display: table;
	width: 100%;
}

.input-prepend.input-block-level .add-on {
	display: table-cell;
	height: 30px;
	width: 4em;
	border: 0;
	padding: 0;
	vertical-align: top;
	background: transparent;
}

.input-prepend .add-on .btn {
	-webkit-border-top-right-radius: 0;
	border-top-right-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	border-bottom-right-radius: 0;
	-moz-border-radius-topright: 0;
	-moz-border-radius-bottomright: 0;
}

.input-prepend.input-block-level .add-on .btn {
	width: 100%;

}

.input-prepend.input-block-level > input {
	box-sizing: border-box;
	height: 30px;
	display: table-cell;
	width: 100%;
}

/* typeahead */
.typeahead.dropdown-menu>li>a {
	padding-left: 0.5em;
}

/* insert here button */
#inserthereindicator {
	position: absolute;
	display: none;
	text-decoration: none;
	cursor: pointer;

	padding-right: 0.9em;
	padding-left: 0.3em;

	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;

	opacity: 0.8;

	/* beveled corners */

    background: #dfdfdf; /* fallback */
    background:
        -moz-linear-gradient(135deg, transparent 10px, #dfdfdf 10px),
        -moz-linear-gradient(225deg, transparent 10px, #dfdfdf 10px);
    background:
        -o-linear-gradient(135deg, transparent 10px, #dfdfdf 10px),
        -o-linear-gradient(225deg, transparent 10px, #dfdfdf 10px);
    background:
        -ms-linear-gradient(135deg, transparent 10px, #dfdfdf 10px),
        -ms-linear-gradient(225deg, transparent 10px, #dfdfdf 10px);
    background:
        -webkit-linear-gradient(135deg, transparent 10px, #dfdfdf 10px),
        -webkit-linear-gradient(225deg, transparent 10px, #dfdfdf 10px);

	background-position: bottom right, top right;

    -moz-background-size: 100% 50%;
    -webkit-background-size: 100% 50%;
    background-size: 100% 50%;

    background-repeat: no-repeat;
}



#inserthereindicator:hover {
	opacity: 1;
}

#inserthereindicator .details {
	display: none;
	padding-right: 0.3em;
}

#inserthereindicator:hover .details {
	display: inline;
}


/* How-to details editing*/
#discard_howto_changes, #copyhowto {
	margin-right: 0.5em;
}

#howtotitle, #howtodescription {
	display: block
}

#howtoheader.editable #howtotitle:hover, #howtoheader.editable #howtodescription:hover, #checklisttitle:hover, #checklistdescription:hover {
	background-color: rgb(255, 251, 208);
	cursor: text;
}

#howtoheader.editable #isprivatemsg:hover {
	cursor: pointer;
}

#howtochecklists {
	margin-right: 0.5em;
}

/* Checklist details editing */
#checklisttitle:hover, #checklistdescription:hover {
	background-color: rgb(255, 251, 208);
}

#editchecklistform form {
	margin: 0;
}

.howto_checklist_date {
	font-style: italic;
	color: silver;
}

.howto_info {
	background-color: white;
	margin-bottom: 0;

	-webkit-border-bottom-left-radius: 0;
	-moz-border-bottom-left-radius: 0;
	border-bottom-left-radius: 0;

	-webkit-border-bottom-right-radius: 0;
	-moz-border-bottom-right-radius: 0;
	border-bottom-right-radius: 0;
}
.howto_actions_box {
	border-top: 0;
	margin-top: 0;
	margin-bottom: 0;

	-webkit-border-top-left-radius: 0;
	-moz-border-top-left-radius: 0;
	border-top-left-radius: 0;

	-webkit-border-top-right-radius: 0;
	-moz-border-top-right-radius: 0;
	border-top-right-radius: 0;

	-moz-box-shadow: inset 0 1px 0 #fff;
	box-shadow: inset 0 1px 0 #fff;
}

.howto_info .howto_image {
	width: 15%;
	margin: 0 0.5em 0 0;
	border: 1px solid silver;
}

/* switching to tile mode */
#howto_list.tile .howto {
	float: left;
	width: 24%;
	margin-right: 1.3333%;
}
#howto_list.tile .howto.fourth {
	margin-right: 0;
}
#howto_list.tile .howto_info {
	padding: 0;
}

#howto_list.tile .howto .howto_info .howto_image {
	width: 100%;
	border: 0;
	border-bottom: 1px solid #e3e3e3;
}

#howto_list.tile .howto .howto_info .clearornot {
	clear: both;
}

#howto_list.tile .howto .howto_info .howto_title {
	padding: 0.5em;
	font-size: small;
}

#howto_list.tile .howto .howto_info .howto_description {
	display: none;
}
/* --------------------- */

.image_upload {
	width: 100%;
}

.image_upload .howto_image {
	width: 100%;
	border: 1px solid #e3e3e3;
	background-size: 100%;
	text-align: center;

	-webkit-border--radius: 3px;
	border-radius: 3px;
	-moz-border-radius: 3px;
}

.image_upload .result {
	padding: 10%;
}

#howtoheader {
	background: #f5f5f5;

	-webkit-border--radius: 3px;
	border-radius: 3px;
	-moz-border-radius: 3px;

	border: 1px solid #e3e3e3;

	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

#howtoheader .howto_details, #edithowtodialog {
	padding: 0.5em;
	padding-left: 0;
}

.howto_image .fileinput-button {
	visibility: hidden;
}

.howto_image:hover .fileinput-button {
	visibility: visible;
}

#checklistheader .howto_image {
	background-size: 100%;
	border: 1px solid #e3e3e3;
	display: block;
	text-align: center;
	margin: 0 0 0.5em 0.5em;
}

#checklistheader .howto_image .btn {
	visibility: hidden;
}

#checklistheader .howto_image:hover .btn {
	visibility: visible;
}

/* variables */
#variables_list .control-group {
	margin-bottom: 10px;
}

/* inline todolist variables */
li.inline_variables {
}

li.inline_variables .control-group {
	margin-bottom: 10px;
}

li.inline_variables .submitform {
	margin-bottom: 0px;
	margin-top: 10px;
}

li.inline_variables .lastvar {
	margin-bottom: 0px;
}

li.inline_variables form {
	margin-bottom: 0;
}

li.inline_variables .inlineactiontitle {
	font-size: large;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.3);
}

/* header styles */
.navbar .navbar-inner {
	-webkit-border-radius: 0;
	border-radius: 0;
	-moz-border-radius: 0;
}

#todolist_bottom_actions {
	padding: 0 1em 1em 1em;
}

/* completed progress bars */
.progress .bar.bar-none {
	background-color: transparent;
	background-image: none;
}

/* todolist lists on dashboard */
.todolists_list tr:first-child td {
	border-top: none;
}

#archive a.todolist_title {
	color: #ABB7BD;
}

#archive .todolist_finished_date, #archive .todolist_account {
	font-size: small;
	color: #CDD4D8;
}

/* todolist archive rotating icon */
.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(180deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(180deg);}
}