@charset "UTF-8";
 
body { font-family: Helvetica, Ariel, sans-serif; word-wrap: break-word; }
body, html { height:100%; }

/* Misc styles for elements, can be overwritten with !important */
blockquote { padding:10px 0 0 6%; }
.floatleft { float:left; }
.floatright { float:right; }
.floatcenter { text-align:center; margin:0 auto !important; display:block; }
.strike { text-decoration:line-through !important; }
.italic { font-style:italic !important; }
.bold { font-weight:bold !important; }
.clearer { clear:both !important; }
.indent { margin:0 0 0 20px; }
.block { display:block; }
.hidden { display:none; }
.thinner { font-weight:normal !important; }
acronym { border-bottom:1px dotted #c8c9c9; cursor:help; }
strong { font-weight:bold !important; }
em { font-style:italic !important; }
.hand { cursor:pointer;cursor:hand; }

a:link, a:visited { text-decoration:none; }
a:hover, a:active { text-decoration:none; }
hr { display:none; }

.text ul, .text ol, .newsItem ul, .newsItem ol  { margin:0 0 15px 50px; }
.text ul li, .newsItem ul li { list-style-type:disc; }
.text ol li, .newsItem ol li { list-style-type:decimal; }

.fullimage { max-width:100%; display:block; margin:0 auto; }
h4.businessname { margin:0 auto; text-align:center; font-size:2.5em; line-height:2.5em; }


#userbar {
    position:absolute; top:0; right:0;
    padding:5px 10px 0 10px;
    z-index:10;
    background: #fff;
    font-size:11px !important;
    border-left:1px solid #ddd;
    border-bottom:1px solid #ddd;
    border-radius: 0 0 0 5px;
    -moz-border-radius: 0 0 0 5px;
    -webkit-border-radius: 0 0 0 5px;
    font-family: Helvetica, Arial, sans-serif !important;
}
#userbar li { line-height:1.6em; margin:0; padding:0; }

#userbar a:link, #userbar a:visited { color:#333; font-weight:bold; }
#userbar li a:hover, #userbar li a:active, #userbar li a:focus { outline:none !important; }

ul.userinfo { position:relative; display:block; z-index:15; }
ul.userinfo li { display:block; position:relative; }

ul.userinfo ul,
ul.userinfo li:hover ul ul,
ul.userinfo ul li:hover ul ul
{ display: none !important; }

ul.userinfo li:hover ul,
ul.userinfo ul li:hover ul,
ul.userinfo ul ul li:hover ul { 
    display: block !important;
    position: absolute !important;
    top:18px; _top:21px; *top:21px; left:-11px;
    z-index:15;
}
ul.userinfo ul { 
    position:relative; z-index:15;
    background: #fff;
    border:1px solid #ddd; 
    border-top:none;
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
}
ul.userinfo ul li { display:inline; }
ul.userinfo ul li a:link, ul.userinfo ul li a:visited {
    padding:2px 11px;
    font-size:1em;
    display:block;
}

ul.mainmenu ul li a:hover, ul.mainmenu ul ul li a:active, ul.mainmenu ul li a:focus {  }

.ub-feed {
    font-size:14px;
    background-position:right -3144px;
    padding:3px 15px 3px 0; 
}

ul.useritems { position:relative; z-index:14; padding:0; }
ul.useritems li { display:inline; position:relative; z-index:14; }
ul.useritems li a:link, ul.useritems li a:visited, ul.useritems input {
    display:inline-block; display:inline;
    padding:3px 0 0 19px;
    outline:none; font-size:11px;
}
.ub-unread { background-position:0 -1783px; margin:0 10px 0 0; }
.ub-basket { background-position:0 -3212px; }
.ub-emptybasket { background-position:0 -3280px; }
#cntItem_static-UserMailSummary, #cntItem_static-BasketSummary { display:inline; }

ul.userconnect {  }
ul.userconnect li { display:inline; }
.ub-connect {
    background-position:0 -3007px;
    padding:4px 0 4px 19px;
    border-top:1px solid #ddd;
}
.ub-connect:hover { background-position:0 -3075px; }
.ub-connected {
    background-position:0 -16px;
    padding:4px 0 4px 19px; 
    border-top:1px solid #ddd;
}
ul.userloggedout { position:relative; }
ul.userloggedout li { display:inline; position:relative; }
ul.userloggedout li a:link, ul.userloggedout li a:visited {
    display:inline-block; display:inline;
    padding:4px 0 4px 19px;
    outline:none; font-size:14px;
}
.loginbutton { background-position:0 -2394px; }
.signupbutton { background-position:0 -3007px; margin-left:10px; }
.signupbutton .simple { font-size:0.7em; font-weight:normal !important; }

/* List Style that simulates tables */
ul.permlist { margin:0 0 10px 0; }
ul.list li, ul.permlist li { overflow:auto; }
ul.permlist li { border-bottom:1px solid #efefef; line-height:26px !important; }
ul.list li { background-color:#fff; line-height:26px !important; }
ul.list li.odd { background-color:#dfdfdf; }
.messagesummary ul.list li.odd:hover { background-color:#ccc; }
.messagesummary ul.list li:hover { background-color:#ccc; }

li.staff { background-position:3px -1237px; padding:0 0 0 22px; }
li.juniorstaff { background-position:3px -1237px; padding:0 0 0 22px; }
li.seniorstaff { background-position:3px -1237px; padding:0 0 0 22px; }
li.manager { background-position:3px -1101px; padding:0 0 0 22px; }
li.customer { background-position:3px -1169px; padding:0 0 0 22px; }
li.superadmin { background-position:3px -1305px; padding:0 0 0 22px; }
li.guest { background-position:3px -1033px; padding:0 0 0 22px; }
li.user { background-position:3px -1033px; padding:0 0 0 22px; }
li.business { background-position:3px -1101px; padding:0 0 0 22px; }

/* Width of spans in list */
.w100 { width:100%; float:left; }
.w95 { width:95%; float:left; }
.w90 { width:90%; float:left; }
.w85 { width:85%; float:left; }
.w80 { width:80%; float:left; }
.w75 { width:75%; float:left; }
.w70 { width:70%; float:left; }
.w65 { width:65%; float:left; }
.w63 { width:63%; float:left; }
.w60 { width:60%; float:left; }
.w57 { width:58%; float:left; }
.w55 { width:55%; float:left; }
.w50 { width:50%; float:left; }
.w48 { width:48%; float:left; }
.w45 { width:45%; float:left; }
.w44 { width:44%; float:left; }
.w40 { width:40%; float:left; }
.w38 { width:38%; float:left; }
.w35 { width:35%; float:left; }
.w34 { width:34%; float:left; }
.w33 { width:33%; float:left; }
.w30 { width:30%; float:left; }
.w25 { width:25%; float:left; }
.w22 { width:22%; float:left; }
.w21 { width:21%; float:left; }
.w20 { width:20%; float:left; }
.w19 { width:19%; float:left; }
.w18 { width:18%; float:left; }
.w17 { width:17%; float:left; }
.w16 { width:16%; float:left; }
.w15 { width:15%; float:left; }
.w14 { width:14%; float:left; }
.w13 { width:13%; float:left; }
.w12 { width:12%; float:left; }
.w11 { width:11%; float:left; }
.w10 { width:10%; float:left; }
.w9 { width:9%; float:left; }
.w8 { width:8%; float:left; }
.w7 { width:7%; float:left; }
.w6 { width:6%; float:left; }
.w5 { width:5%; float:left; } 
.w4 { width:4%; float:left; }
.w3 { width:3%; float:left; }
.w2 { width:2%; float:left; }
.w1 { width:1%; float:left; }

/* Inbox, Sentbox, Compose Mail Styling */
ul.controltabs  { width:100%; position:relative; border-bottom:1px solid #999; }

.common a:link, .common a:visited { font-weight:bold !important; color:#333 !important; }
.common a:hover, .common a:active { font-weight:bold !important; color:#1a1a1a !important; }
.read a:link, .read a:visited { font-weight:normal !important; }
#mailboxData {position:relative; }
.delete-selected-mail {
    background-position:0 -86px !important;
    padding:0 0 0 16px !important;
    font-size:14px !important;
    position:absolute;
    top:-48px; *top:-30px;
    right:0;
    }

/* Sprites... These classes are used in conjunction with the .sprite class which defines the background image */

.sprite { background-image:url(/Themes/common/images/sprites.png) !important; background-repeat:no-repeat !important; }
.help-button { background-position:0 -291px !important; padding:0 0 0 16px !important; font-size:11px !important; cursor:help; }
.help { background-position:0 -291px !important; padding:0 0 0 16px !important; cursor:help; }
.form-help{ background-position:0 -289px !important; padding:0 0 0 20px !important; cursor:help; }
.email { background-position:3px -1781px; padding:0 0 0 23px; }
.mail { background-position:3px -1441px; padding:0 0 0 23px; }
.voice { background-position:3px -1917px; padding:0 0 0 23px; }
.sms { background-position:3px -1917px; padding:0 0 0 23px; }
.fms { background-position:3px -2393px; padding:0 0 0 23px; }
.unread { background-position:3px -1985px !important; }
.tick { background-position:3px -2937px; padding:0 0 0 23px; }
.cross { background-position:2px -86px; padding:0 0 0 23px; }
.contactsbutton { background-position:2px -1238px; padding:0 0 0 23px; font-size:14px !important; display:block; margin:10px 0; }
.reply { background-position:2px -1854px; padding:0 0 0 23px; }
.currentinvoice { background-position:2px -1340px; padding:2px 0 2px 23px; }
.dueinvoice { background-position:2px -1384px; padding:2px 0 2px 23px; }
.paidinvoice { background-position:2px -1362px; padding:2px 0 2px 23px; }
.invoiceitem { background-position:4px -2190px; padding:0 0 0 23px; }
.invoiceproduct { background-position:0px -2807px; padding:0 0 0 16px; margin:0 0 0 15%; line-height:22px; font-size:0.9em; font-weight:bold; }
.awaitingdispatch { background-position:3px -3481px; padding:0 0 0 23px; }
.dispatched { background-position:3px -13px; padding:0 0 0 23px; }
.refundrequested { background-position:3px -353px; padding:0 0 0 23px; }
.refundapproved { background-position:3px -13px; padding:0 0 0 23px; }
.refunddeclined { background-position:3px -149px; padding:0 0 0 23px; }
.refunded { background-position:3px -13px; padding:0 0 0 23px; }
.actionrequired { background-position:3px -353px; padding:0 0 0 23px; }
.resolved { background-position:3px -13px; padding:0 0 0 23px; }
.cancelled { background-position:3px -149px; padding:0 0 0 23px; }
.total { padding:0 0 0 3px; }
.bolder { font-weight:bold; font-size:1.2em; }
.as-invoice { background-position:2px -3546px; padding:2px 0 2px 23px; }
.as-inbound { background-position:2px -2322px; padding:2px 0 2px 23px; }
.as-outbound { background-position:2px -2254px; padding:2px 0 2px 23px; }
.as-refund { background-position:2px -2050px; padding:2px 0 2px 23px; }
.as-receipt { background-position:2px -2186px; padding:2px 0 2px 23px; }
.frooly { background-position:right -2399px; padding:0 20px 0 0; text-indent:-3000em; }
.connected { background-position:3px -3004px; padding:0 0 0 23px; }
.user-search { background-position:3px -1033px; padding:0 0 0 23px; }
.product-list-item { padding:0 0 0 23px; }
.report-bug { background-position:0 -3826px !important; padding:0 0 4px 16px !important; }
.yes { background-position:10px -13px; }
.no { background-position:10px -79px; }
.featured { background-position:0 -3418px; }
.not-featured { background-position:0 -3894px; }

.froolyguarantee { background-image:url(/Themes/common/images/customer-guarantee.png) !important; background-repeat:no-repeat !important; width:222px; height:164px; margin:20px 0 !important; display:block; }

.sprite-frooly { background-image:url(/Themes/common/images/sprite-frooly.png) !important; background-repeat:no-repeat !important; }
.frooly-free-medium { background-position:0 -718px; padding:0 0 0 60px; line-height:44px; }
.frooly-free-medium-center { background-position:140px -718px; padding:0 0 0 60px; line-height:44px; }
.frooly-plus-medium { background-position:0 -507px; padding:0 0 0 60px; line-height:44px; }
.frooly-plus-medium-center { background-position:130px -507px; padding:0 0 0 60px; line-height:44px; }
.frooly-top-sites { background:#d8d9da; line-height:60px; padding:0 0 0 30px; margin:50px 0 40px 0; }
.top-sites-logo { background-position:85px -915px; padding:30px 100px 60px 0; }

.frooly-generic-banner { background:#d8d9da; line-height:60px; padding:0 0 0 10px; margin:30px 0 20px 0; }

.plus-logo { background-position:45px -1172px; padding:10px 25px 0 0; }

p.newsdate { line-height:1em !important; font-size:0.9em; margin:-0.6em 0 10px 0; }
.newsItemDate, .newsItemUser { font-size:0.9em; }

/* Faux Columns */
.coloumnheadings { padding:0 0 0 23px; font-size:0.9em; font-weight:bold; background:#fff !important; clear:both; }
/* Some doofus spelt column wrong, keep legacy code here. */
.columnheadings { padding:0 0 0 23px; font-size:0.9em; font-weight:bold; background:#fff !important; clear:both; }
.ui-tabs ul { width:100%; height:25px; }
.ui-tabs li.composeli .compose { background-position:2px -1712px; font-weight:bold !important; padding:6px 0 0 20px !important; margin:0 0 0 10px !important; border:none !important; }
.ui-tabs li.deleteli { position:absolute !important; right:0; top:0; }
.ui-tabs li.deleteli .delete { background-position:89px -81px; padding:6px 20px 0 0 !important; font-weight:bold !important; margin:0 !important; border:none !important; }
#charcount { font-style:italic; }

.help-post-type { position:absolute; top:-5px; right:0;}

/* Form elements used in modal windows and on pages */
fieldset {
    border:1px solid #999;
    *border:none !important;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding:5px 20px;
    margin:0 0 10px 0;
    -webkit-margin-top-collapse: separate;
    position:relative;
}
legend {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-size:14px; font-weight:bold;
    border:1px solid #999;
    *border:none !important;
    background:#fff;
    color:#333;
    padding:2px 4px 2px 4px;
    width:auto;
}
input.input-text, textarea.textarea, textarea.formtextarea, input.input-upload {
    border-width: 1px;
    border-style: solid;
    border-color: #CCC #EFEFEF #EFEFEF #CCC;
	background:#fff !important;
	color:#333;
	font-family:Helvetica, Arial, sans-serif !important;
	padding:3px 1px;
	outline:none;
	font-size:1.1em;
	position:relative;
}
input.input-text:focus { background:#eee; }
input.searchbox { width:50% !important; padding:5px 3px; margin:8px 10px 0 0; }

/* Label Top puts the label of a form above the input box, add this to the div that wraps the fieldset */
/* .contactform for some legacy classes which are in the database */
.labeltop input.input-text, .contactform input.input-text { width:99%; }
.labeltop label, .contactform label { display:block; clear:both; padding: 0; }
.labeltop label span, .contactform label span, .composemaillabel {
    display:block; 
    width:100%; 
    text-align:left; 
    font-weight:bold !important; 
    font-size:14px !important;
    color:#333;
}

/* Label Side is used to put labels and inputs side by side, this saves vertical space */
.labelside input.input-text { width:60%; }
.labelside label, .labelside b { color:#1a1a1a; padding:0 5px 0 5px; font-weight:normal; }
.labelside label span, .labelside b span {
    display:inline-block;
    width:25%;
    text-align:right;
    font-weight:bold !important; 
    font-size:14px !important;
    color:#333 !important;  
}

/* Some overriding classes for certain modal boxes/forms */
.customwidgetbox input.input-text { width:68% !important; }
.AddCustomWidgetEntryCheckChanged { width:2% !important; vertical-align:bottom; text-align:center !important; }
input[readonly] { visibility:hidden; }

/* Common fieldset for consistency, i.e. mail, invoices etc */
.common { background:#fff; color:#333; font-family:Helvetica, Arial, Sans-Serif !important; font-size:12px !important; }
.labeltop .common input.input-text { width:99%; }
.labelside .common input.input-text { width:60%; }
.labelside .common textarea.input-text { width:60%; }
.common .composemaillabel { margin:10px 0 0 0; }
.common p { color:#333 !important; font-weight:normal !important; font-style:normal !important; text-decoration:none !important; font-size:1em !important; line-height:1.6em !important; font-family: Helvetica, Arial, Sans-Serif !important; margin:0 0 5px 0 !important; }

.common .coloumnheadings, .common .columnheadings { font-size:11px !important; }

.textarea  { width:99% !important; background:#eee !important; }


/* Automatic feedback, errors, warning and info boxes, these also use the sprite */
.error-text { border:1px solid #ec008c !important; }
.modal-content input.error-text { border:1px solid #ec008c !important; }

p.info, p.prompt, p.success, p.error { padding:25px 20px 20px 20px !important; margin:5px 0 10px !important; line-height:24px !important; font-size:14px !important; color:#fff !important; font-weight:bold !important; font-style:normal !important; font-family:Helvetica, Arial, Sans-Serif !important; clear:both; }
.modal-content p.info, .modal-content p.prompt, .modal-content p.success, .modal-content p.error { padding:10px !important; line-height:20px !important; font-size:14px !important; }
p.info span.sprite, p.prompt span.sprite, p.success span.sprite, p.error span.sprite { 
    background-image:url(/Themes/common/images/large-sprites.png) !important;
    float:left; height:45px; width:80px; margin:-8px 0 0 0;
}
.modal-content p.info span.sprite, .modal-content p.prompt span.sprite, .modal-content p.success span.sprite, .modal-content p.error span.sprite { 
    display:none;
}
/* The span within the span is for when ASP labels are used which generate an extra span */
p.info span.sprite span, p.prompt span.sprite span, p.success span.sprite span, p.error span.sprite span { display:inline !important; width:100% !important; }
p.info {
    background-color:#00aeef;
    border:2px solid #00aeef;
} p.info span { background-position:-262px 0; }
p.prompt {
    background-color:#f7941e;
    border:2px solid #f7941e;
} p.prompt span { background-position:-162px 0; }
p.success {
    background-color:#8dc63f;
    border:2px solid #8dc63f;
} p.success span { background-position:8px 0; }
p.error {
    background-color:#ec008c;
    border:2px solid #ec008c;
} p.error span { background-position:-82px 0; }


/* Column styling across all sites */
.column1, .column2, .column3, .column4, .column5, .column6 { padding:0; margin:0; }

/* Document Downloads, individual file types overwritten by !important */
.downloaddocument {
    min-height:65px; _height:65px;
    display:block;
    padding:0 0 0 70px;
    position:relative;
    background:url(/Themes/common/images/zip_file.png) top left no-repeat;
}
.downloaddocument h3 {
    font-size:1.3em;
    line-height:1.3em;
    font-weight:bold;
    margin:0; padding:0;
}
.downloaddocument p {
    margin:0; padding:0;
}
.downloaddocument a {
    display:block;
    width:100%; height:100%;
    position:absolute;
    top:0; left:0;
    text-indent:-3000em;
}
.txt, .rtf { background:url(/Themes/common/images/txt_file.png) top left no-repeat !important; }
.pdf { background:url(/Themes/common/images/pdf_file.png) top left no-repeat !important; }
.doc { background:url(/Themes/common/images/doc_file.png) top left no-repeat !important; }
.ppt { background:url(/Themes/common/images/ppt_file.png) top left no-repeat !important; }
.zip { background:url(/Themes/common/images/zip_file.png) top left no-repeat !important; }
.csv { background:url(/Themes/common/images/csv_file.png) top left no-repeat !important; }
.xls { background:url(/Themes/common/images/xls_file.png) top left no-repeat !important; }


/* Pagination */
.Pager {  }
ul.pagination  { clear:both; margin:10px 0; text-align:center; }
ul.pagination li { 
	background:none;
	padding:0; margin:0 3px;
	display:inline;
}
ul.pagination li a:hover, ul.pagination li a:active, .pagination li a:focus, .pagination li a.active, .pagination li a.hover, ul.pagination li .pagenumber:hover, ul.pagination li input.active {
	outline:none !important;
	border:1px solid #efefef !important;
	background:#fff !important;
	cursor:pointer;cursor:hand;
}
ul.pagination li a, ul.pagination li .pagenumber { padding:4px 8px !important; border:1px solid #999 !important; background:#eee !important; color:#2e2e2e !important; font-size:11px !important; font-weight:bold !important; }

/* For AJAX loading of controls */
.loadingmask {
    z-index:5;
    width:100%; height:100%;
    position:absolute;
    background: url(/Themes/common/images/opacity50pc.png) top left repeat;
    -moz-border-radius: 5px 5px; -webkit-border-radius: 5px; border-radius: 5px 5px 5px;
}
input.loadthis { background:url(/Themes/common/images/load.gif) 5px center no-repeat !important; padding-left:25px !important;}

/* Pure CSS popup */
.modal-background {
    z-index:9999; 
    position:absolute; 
    width:100%; height:100%;
    margin-bottom: -1000px;
	padding-bottom: 1000px;
    top:0; left:0;    
    overflow:hidden; 
    background:url(/Themes/common/images/opacity-dark90pc.png) top left repeat;
}
.modal-content {
    position:relative; 
    width:60%;
    margin:5% auto 0 auto;
    overflow:auto;
    color:#333 !important;
    font-family: Helvetica, Arial, sans-serif !important;
}
.modal-content fieldset {
    border:2px solid #e7e7e8;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    padding:20px 30px 60px 30px;
    background:#fafafa;
}
.modal-content legend {
    border:2px solid #e7e7e8 !important;
    border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    -webkit-border-radius: 4px !important;
    padding:8px 12px !important;
    font-size:16px !important;
    line-height:16px !important;
    font-family:Helvetica, Arial, sans-serif !important;
}
.modal-content input.input-text {
    border-width: 1px;
    border-style: solid;
    border-color: #CCC #EFEFEF #EFEFEF #CCC;
	background:#fff !important;
	color:#333 !important;
	font-family:Helvetica, Ariel, sans-serif !important;
	font-size:12px !important;
}
.modal-content input.input-text:focus { background:#f8f8f8 !important; }

#popupContainer_ButtonOK, .buttonok { position:relative; top:-70px; right:25px; z-index:1000; }

#popupContainer_ButtonCancel, .buttoncancel { position:relative; top:-70px; left:25px; z-index:1000; }

/* Business and User Signup stuff */
#businessSignupV2 input.input-text {
    border:none;
	background:#fff !important;
	color:#61666C !important;
	font-family:Helvetica, Arial, sans-serif !important;
	padding:6px 4px !important;
	width:510px;
	font-size:1.2em !important;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
}
.formnames { width:48% !important; float:left; margin-right:20px; }
.formsurnames { width:48% !important; float:right; }
.term-and-conditions { display:inline !important; }
.labeltop p label span.required-text { display:inline !important; font-size:9px !important; color:#EC008C !important; }
.labeltop p label span.froolyterms { font-size:11px !important; font-weight:normal !important; clear:both; padding:10px 0; text-align:right; }
.labeltop p span.userterms { font-size:11px !important; font-weight:normal !important; clear:both; text-align:right; }
.common p.froolyurltext {
    float:left; width:auto; background:#f8f8f8; 
	color:#333 !important; font-weight:bold !important; text-align:right;
	font-size:14px !important;
}
.common p.froolyegtext {
	color:#2e2e2e !important; font-weight:bold !important; text-align:right;
	font-size:11px !important;
}
.common p.frooly-website { clear:both; }
input.business-url { width:250px !important; float:left; }

#businessSignupV2 input.input-text:focus { background:#fafafa !important; }
#businessSignupV2 label span {
    font-weight:normal !important; 
    font-size:1.2em !important;
    color:#fff !important;
}
/* YouTube Video Stuff (Should be admin only) */

.youtubeupload { display:block; border:1px solid #ccc; margin:0 0 10px 0; padding:5px 10px; outline:none;  }
.youtubeupload:hover, .youtubeupload:active, .youtubeupload:focus { background:#eee; }
.videonew { background-position:3px -765px; padding:0 0 0 23px; }
.videoexisting { background-position:3px -765px; padding:0 0 0 23px; }
.videourl { background-position:3px -765px; padding:0 0 0 23px; }
.youtubeupload .smaller { display:block; font-size:0.8em; }
.formtextarea  { width:70%; background:#eee !important; }


/* ### Shop Stuff ### */
/* Shop Paged List of Shop Products */
.sort { font-weight:bold; text-align:right; }
.shop-productsummaryitem {  
    margin:0 0 15px 0; padding:0 0 5px 0;
    clear:both; display:block;
    border-bottom:1px solid #ccc;
    overflow:auto;
}
.psi-container { width:140px; float:left; overflow:hidden; padding:0 0 0 20px; }
.shop-productsummaryitem h4 { border:none; margin:0 0 18px 0;}
.shop-productsummaryitem .smaller { font-size:0.6em; }
.friggin-float-fix { overflow:hidden; }

/* Shop Product Detail Page */
.view-product-enlargeimage { float:left; width:250px; text-align:center; margin:0 5px 10px 0; font-size:0.8em; }
.productproperties { float:right; width:270px; font-size:1em; margin:10px 0 0 0; }
.productproperties ul li { margin:0 0 7px 0; border-bottom:1px solid #eee; }
.productproperties span.attribute { }
.productproperties span.property { font-weight:bold; }

.productcontent { clear:both; }

#billingAddress { float:left; width:32%; margin:0 1% 10px 0; }
#delivery_address { float:left; width:32%; margin:0 1% 10px 0; }
.customerinfo { float: left; width:32%; margin:0 0 10px 0; }
.customerinfo .orderprice { display:block; font-size:1.4em; font-weight:bold; }
.customerinfo .vatprice { display:block; font-size:0.9em; margin:10px 0 0 0; }

.firstbox-thirds { float:left; width:32%; margin:0 1% 10px 0; }
.secondbox-thirds { float:left; width:32%; margin:0 1% 10px 0; }
.thirdbox-thirds { float: right; width:32%; margin:0 0 10px 0; }

/* Shop Checkout Page */
.checkoutleft { width:65%; float:left; }
.checkout-stages { 
    font-size:1.2em; 
    font-weight:bold; 
    border-bottom:1px solid #999; 
    padding:0 0 10px 0; margin:0 0 10px 0;
    opacity:0.5;
}
.checkout-stages li { display:inline-block; margin:0 50px 0 0; }
.frooly-one { background-position:0px -2466px; padding:0 0 0 20px; }
.frooly-two { background-position:0px -2534px; padding:0 0 0 20px; }
.frooly-three { background-position:0px -2602px; padding:0 0 0 20px; }

h3.frooly-one { background-position:0 -2462px !important; color:#ec008b !important; font-weight:bold !important; margin:5px 0; }
h3.frooly-two { background-position:0 -2530px !important; color:#00acee !important; font-weight:bold !important; margin:5px 0; }

.cardtype { background-position:3px -2942px; padding:0 0 0 23px; }

/* Accordian elements on checkout page for payment methods */
h4.ui-state-active { 
    font-size:1.2em; font-weight:bold; 
    color:#00acee; 
    padding:5px 0 5px 20px;
    border-bottom:1px solid #999; 
    background-position:0 -3139px !important; 
}
h4.ui-state-default {
    padding:5px 0 5px 20px; 
    font-weight:bold;
    background-position:0 -2869px !important;
    cursor:pointer !important; cursor:hand !important; 
}

.checkoutright { 
    width:27.5%;
    padding:5px !important;
    float:right; 
}

.checkoutright .name, .checkoutright .w50  { width:72% !important; padding:2px 0 2px 5px; line-height:1.6em !important; }
.checkoutright .basket-image { display:none; }
.checkoutright .basket-businessname { display:none; }
.checkoutright .basket-date { display:none; }
.checkoutright .price, .checkoutright .w10 { width:25% !important; font-weight:bold !important; padding:2px 0 !important; line-height:1.6em; }
.checkoutright .basket-remove { display:none; }

.shop-categories fieldset { padding:5px 5px 5px 10px !important; }

.shop-categories ul li a { font-size:1.3em; margin:0px; line-height:1.8em !important; }
.shop-categories ul li ul li a { font-size:1em !important; margin:0 0 0 10px; }
.shop-categories ul ul li a { font-size:1em !important; margin:0 0 0 10px; padding:2px 0 !important; }

.footer { clear:both; display:block; overflow:auto; }
.footer .left { float:left; width:49%; }
.footer .right { float:right; width:49%; text-align:right; }


#ud-business-address { float:left; width:49%; }
#ud-billing-address { float:right; width:49%; }

.free-theme { float:left; width:33%; }
.largest { font-size:1.4em; }

.frooly-button {
    border:4px solid #2e2e2e;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background:#ccc;
    color:#fff; font-weight:bold;
    padding:10px 12px;
    margin:0 1px;
    font-size:14px !important;
    font-family:Helvetica, Arial, sans-serif !important;
    background-image: url(Themes/Frooly/images/shading.png); background-repeat:no-repeat; background-position:bottom left;
    background-size:100%; -moz-background-size:100%; -webkit-background-size:100%;
    box-shadow: 1px 1px 2px #7b7c7e; -moz-box-shadow: 1px 1px 2px #7b7c7e; -webkit-box-shadow: 1px 1px 2px #7b7c7e;
}
.frooly-button:hover { box-shadow: 0px 0px 2px #7b7c7e; -moz-box-shadow: 0px 0px 2px #7b7c7e; -webkit-box-shadow: 0px 0px 2px #7b7c7e; }
.frooly-button:focus, .frooly-button:active { box-shadow: -1px -1px 2px #7b7c7e; -moz-box-shadow: -1px -1px 2px #7b7c7e; -webkit-box-shadow: -1px -1px 2px #7b7c7e; }
input::-moz-focus-inner { border: 0 !important; outline:none !important; }

.green { background-color:#8dc63f; border-color:#b1d87a; }
.pink { background-color:#ec008c; border-color:#ef59a1; }
.orange { background-color:#f7941e; border-color:#faa74a; }
.blue { background-color:#00aeef; border-color:#40c8f4; }
.white { background-color:#ffffff; background-position:10px 2px !important; border:1px solid #B9BABA !important; border-left:none !important; border-right:none !important; color:#333; padding:4px 10px 4px 45px; width:100%; display:block; text-align:center; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; }

.common a:link.frooly-link-in-common, .common a:visited.frooly-link-in-common  { color:#fff !important; }
a:link.frooly-link-out-common, a:visited.frooly-link-out-common  { color:#fff !important; }

.frooly-button-naked {
    border:none;
    background:none;
    color:#333; font-weight:bold;
    padding:0;
    margin:0 1px;
    font-family:Helvetica, Arial, sans-serif !important;
}
.frooly-button-nearly-naked {
    border:none;
    background-color:transparent;
    color:#333; font-weight:bold;
    padding:0;
    margin:0 1px;
    font-family:Helvetica, Arial, sans-serif !important;
}
.size-10 { font-size:10px !important; }
.size-11 { font-size:11px !important; }
.size-12 { font-size:12px !important; }
.size-14 { font-size:14px !important; }
.size-16 { font-size:16px !important; }
.size-18 { font-size:18px !important; }
.size-20 { font-size:20px !important; }
.size-22 { font-size:22px !important; }
.size-24 { font-size:24px !important; }

.color-333 { color:#333 !important; }
.color-fff { color:#fff !important; }
.color-ec008c { color:#ec008c !important; }
.color-00aeef { color:#00aeef !important; }
.color-f7941e { color:#f7941e !important; }
.color-8dc63f { color:#8dc63f !important; }

.background-58585a { background:#58585a !important; }
.background-fff { background:#fff !important; }

.z-index-10 { position:relative; z-index:10; }

.column-100 { width:100% !important; float:left; }
.column-90 { width:88% !important; float:left; }
.column-80 { width:80% !important; float:left; }
.column-75 { width:75% !important; float:left; }
.column-70 { width:70% !important; float:left; }
.column-67 { width:67% !important; float:left; }
.column-66 { width:66% !important; float:left; }
.column-60 { width:60% !important; float:left; }
.column-50 { width:50% !important; float:left; }
.column-40 { width:40% !important; float:left; }
.column-34 { width:34% !important; float:left; }
.column-33 { width:33% !important; float:left; }
.column-30 { width:30% !important; float:left; }
.column-25 { width:25% !important; float:left; }
.column-20 { width:20% !important; float:left; }
.column-10 { width:10% !important; float:left; }

.column-100 .postControl, .column-90 .postControl, .column-80 .postControl, .column-75 .postControl,
.column-70 .postControl, .column-67 .postControl, .column-66 .postControl, .column-60 .postControl,
.column-50 .postControl, .column-40 .postControl, .column-34 .postControl, .column-30 .postControl,
.column-33 .postControl, .column-25 .postControl, .column-20 .postControl, .column-10 .postControl
{ padding:0 20px 20px 0; }

.column-100 .postControl .postControl, .column-90 .postControl .postControl, .column-80 .postControl .postControl,
.column-75 .postControl .postControl, .column-70 .postControl .postControl, .column-67 .postControl .postControl,
.column-66 .postControl .postControl, .column-60 .postControl .postControl, .column-50 .postControl .postControl,
.column-40 .postControl .postControl, .column-34 .postControl .postControl, .column-33 .postControl .postControl,
.column-30 .postControl .postControl, .column-25 .postControl .postControl, .column-20 .postControl .postControl,
.column-10 .postControl .postControl { padding:0; }

.row { clear:both; }

.padding-item { padding:2px 10px; }
.padding-title { padding:15px 10px 0 10px; }
.padding-product { padding:10px 0; }

.youtube-wrapper { position:relative; width:120px; float:left; margin:0 28px 35px 0; }
.youtube-wrapper img { width:120px; height:90px; }
.youtube-add-existing { position:absolute; top:0; left:0; height:60px; width:120px; padding:95px 0 20px 0 !important; }

.layout-wrapper { position:relative; width:120px; float:left; display:block; margin:0 15px 30px 21px; }
.layout-wrapper img { width:120px; height:90px; }
.use-this-layout { background:url(Themes/common/blank.gif) top left repeat; position:absolute; top:0; left:0; height:60px; *height:90px; width:120px; padding:95px 0 20px 0 !important; }

.central { text-align:center; }

.basket-image { padding:2px; border:1px solid #ccc !important; background:#fff; margin:4px 30px 4px 4px; width:38px; vertical-align:bottom; }
.basket-total { font-size:18px !important; font-weight:bold; padding:5px 0; border-top:1px solid #ccc; border-bottom:1px solid #ccc; margin:10px 0; }
.basket-postage { font-size:11px !important; padding:5px 0; margin:10px 0; font-weight:bold; text-align:right; }
.pandp { font-size:11px !important; }

.manage-products-search { float:left; width:400px; overflow:auto; }
.manage-products-search input.input-text { width: 170px !important; margin:0 10px 0 0; }
.manage-products-search input.input-text:focus{ background:#eee !important; }

.sort-products-search { float:right; width:380px; text-align:right; overflow:auto; font-size:11px !important; }

.manage-orders-searchbox { width:370px; float:left; padding:0 0 0 20px; line-height:60px; }
.manage-orders-searchbox input.input-text { width: 200px !important; margin:0 10px 0 0; }
.manage-orders-searchbox input.input-text:focus { background:#eee !important; }

.search-sort { 
    background:#8dc63f; height:60px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    margin:0 0 10px 0;
}
.manage-orders-sortbox {
    background:#58585a;
    width:380px;
    float:right; text-align:right;
    padding:0 20px 0 0;
    line-height:59px;
    -moz-border-radius:0 5px 5px 0;
    -webkit-border-radius:0 5px 5px 0;
    border-radius:0 5px 5px 0;    
}
.manage-orders-sortbox select { padding:4px 2px !important; font-size:11px; font-weight:bold !important; font-family:Helvetica, Arial, Sans-Serif; }
.white-label { color:#fff; font-size:14px; font-weight:bold; }
#businessSignupV2 { padding: 10px 35px 0 35px; }
#businessSignupV2 .frooly-website { display:block !important; font-size:10px !important; font-weight:normal; }

.addon-item { padding:10px 0 10px 200px; margin:0 0 15px 0; background:#e8e8e7; position:relative; }
.addon-item img { position:absolute; left:40px; top:15px; }
.addon-item p { margin:0 0 2px 0; }
.purchase-margin { margin:0 15px 0 15px; }
#logopreview img { max-width:800px; }

.textEditor { height:450px !important; }

#slideshow { position:relative; height:260px; }
#slideshow img { background:#e7e7e8; }
#slideshow a { position:absolute; top:0; left:0; z-index:1;}
#slideshow a.active { z-index:3; }
#slideshow a.last-active { z-index:2; }