/* Note -> can just apply to all img's - but may be a biit cpu intensive.. or can put alpha class on any trans png */
*html .alpha div, *html .alpha img, *html .alpha  { behavior: url(/javascripts/iepngfix.htc); } /* IE hack for PNG alpha transparency */  

/* Standard Elements */
body {font-family: Arial, Helvetica, sans-serif, "HelveticaNeue-Light";  font-size:13px; color: #226;}
table {font-size:13px;}/* Standard font to use for tables */
img {border: none; text-decoration: none;}

p {margin: 7px 0 7px 0;}
p.indent {padding: 0 10px 0 30px}
p.big {font-size:120%;}
.double {line-height: 180%;}
form {margin: 7px 0 7px 0;}
a {color: #3174d1;text-decoration: none;outline: none; }
:focus { outline: 0;}
a.light_link {color: #dd6;}
a:hover {text-decoration: underline;}
a:hover.hover2 {top:-1px; right:-1px; position: relative;}
a:hover.no_hover, .no_hover {background: none; padding: 0; margin:0;}
.em {font-style: italic;}

h1, .o2k7Skin .mce_h1 span.mceText  {font:bold 28px Arial; color: #2D2D6F; margin:5px; text-align: left;}
h2, .o2k7Skin .mce_h2 span.mceText  {font:bold 25px Arial; color: #2D2D6F; margin: 5px 0 10px 0;}
h3, .o2k7Skin .mce_h3 span.mceText  {font:bold 18px Arial; color: #2D2D6F; margin: 10px 5px 5px 0;}
h4, .o2k7Skin .mce_h4 span.mceText  {font:bold 15px Arial; color: #339; margin: 10px 5px 5px 0px;}
h5, .o2k7Skin .mce_h5 span.mceText  {font:bold 14px Arial; color: #a32c2c; margin: 5px 5px 10px 0;}
hr {clear: both; color: #A2BDD4; background-color:#A2BDD4; height: 1px;	width:100%;	border:none; padding: 0px;	margin: 0px;}
hr.two {clear: both; vertical-align: middle; color: #D7D4D2; background-color:#D7D4D2; height: 2px;	width:100%;	border:none; padding: 0px;	margin: 0px;}
pre {background-color: #eee; padding: 10px; font-size: 11px;}

#fullpage {padding:10px;}

/* Icon Styles*/
.icon_14 { width:14px; height:14px; padding: 0px; margin:0; vertical-align:-1px;}
.icon_14b { width:14px; height:14px; padding: 0px; margin:0 0 -1px 0; vertical-align:-1px;}
.icon_14c { width:14px; height:14px; float:left; margin:0px 5px 0 0px; text-decoration: none; border: 0;}
.icon_16 {width:16px; height:16px; float:left; margin:0px 7px 0 0px; text-decoration: none; border: 0;}
.icon_16.epi {margin:2px 0px 0px 4px;}
.icon_16.right {margin:0px 0px 0 7px; float:right;}
.icon_24 {width:24px; height:24px;float:left; margin:0px 4px 0 0px; text-decoration: none; border: 0;}
.icon_24 {margin:-2px 14px 0 0px; }
.icon_24 {margin:-3px 6px 0 5px; }
.icon_28 {width:28px; height:28px; margin:-5px 5px 0 0; vertical-align:-10px; text-decoration: none; border: 0}
.icon_32 {width:32px; height:32px; }
.icon_48 {width:48px; height:48px;padding: 0 20px 0 0;}
.icon_64 {width:64px; height:64px; margin:5px 30px 5px 10px; float: left;}
.icon_100 {width:100px; height:100px;}
.icon_form {width:16px; height:16px;margin:0px 5px 0 8px; float:right;}
.icon_label {width:16px; height:16px; float:none; margin:0 7px 0 0px; top: 3px; position: relative; text-decoration: none; border: 0;}

/* Custom Classes */
.small {font-size: 80%;}	
.small_txt {font-size: 80%;}	
.epicenter {font-size:150%;}		
.highlight {font-weight: bold; font-size:115%; color: #d00;}
.highlight_subtle {font-weight: bold; font-size:100%; color: #4D4D8F;}
.highlight2 {font-weight: bold; color: #d00; font-style: italic;}
.dark {color: #2D2D6F}
.black {color: #000;}
.red {color: #f10000;}
.yellow {color: #ff0;}
.green {color: #4F994D;}
.bold {font-weight: bold}
.light {color: #777;}
.underline {text-decoration: underline;}
.box {display: block; clear: both; padding: 3px;}
.border_box {border:1px solid #888;padding: 0 5px 0 5px; margin: 5px 10px 5px 5px; background: #fff;}
.message_box {padding:10px; margin:10px;float:left; color: #d00; border: 1px solid #dfdfdf;}
.box_highlight {border: 1px solid #000; padding: 0 5px 0 5px; width: 90%; margin: 0px auto; background: #fff5f5}
.white {color: #fff;}		
.white_bg {background: #fff;}
.grey_text {color: #666;}
.grey {background: #F1F1F1;}
.tab1	{width:44px;display: block; float:left;}
.tab2	{width:70px;display: block; float:left;}
.pad_5 {padding: 5px}
.pad_05 {padding: 0 5px}
.pad_7 {padding: 0 7px 0 0}
.pad_10 {padding: 10px}
.margin_10 {margin: 10px}
.border {border: 1px solid #2D2D6F;}
.border_light {border: 1px solid #ccc;}
.clear {clear:both}
.left {float:left}
.right, img.right {float:right}
.right_text {text-align: right}
.left_text {text-align: left}
.center {text-align: center;margin: 0px auto;}
.block {clear:both; display: block;}
.no_float {float:none;}
.zero {margin:0; padding:0;}
.hidden {width: 0; height: 0; display:inline;}
.help_image {float:right; border: 1px solid #888; margin: 5px 5px 5px 10px;}
.empty_table {padding:0; margin:0; border:none;}
.small_card {float: left; width: 120px; padding: 1px; border: 1px solid #000; }
.nowrap {white-space:nowrap;}
.relative {position: relative;}
.indent {padding-left: 100px;}
.strike {text-decoration: line-through;}
.no_margin {margin:0;padding:0;}
.special {color: #d11; font-size: 11px;}
.none {display:none;}

/* Big Links with Icon */
.epi_link {float:left; font-size:120%; background: #f1f1f1; padding: 3px 3px 4px 1px; margin: 5px;  border: 1px solid #ccc;}
.epi_link img {float: left; margin:0px 5px 0 1px; text-decoration: none;display: block;}
a:hover.epi_link {background-color: #F4EC8E; color: #4E1500; text-decoration: none;} 
.epi_link b {margin: 0; border: 0px solid #f00; padding: 8px 5px 6px 0; display: block; float: left; font-weight: normal;}
/*.small_epi, .small_epi img {padding:1px 5px 1px 1px; font-size: 100%; margin:0;}*/
.small_epi b {padding:2px 5px 0px 5px;font-size:90%;}
.indent {padding-top: 7px; display: block;}
.indent_h {padding-left: 20px; display: block;}


/* Small Boxed Links with Icon */
.small_link {float:left; font-size:100%; background: #f1f1f1; padding: 3px; margin: 5px;  border: 1px solid #ccc;}
.small_link img {float: left; margin:0px 3px 0 0px; text-decoration: none; display: block;}
a:hover.small_link {background-color: #F4EC8E; color: #4E1500; text-decoration: none;} 
.small_link b {margin: 0; border: 0px solid #f00; padding: 8px 5px 6px 0; display: block; float: left; font-weight: normal;}


/* Big Link with 64x64 icon, 2 lines text */
a.big_link {} /* Can over-ride default a:link stuff */
a:hover.big_link {text-decoration: none;} /* Can over-ride default a:link stuff */
.big_link {width: 221px; height: 54px; text-decoration: none; float:left; font-size: 12px; color: #888;}
.big_link img {float:left; margin: 0 8px 0 4px; width: 52px; height: 52px; }
.big_link h3 {font-size: 18px; padding: 10px 0 0 0; margin: 0; font-weight: normal; color:#224;}
a:hover.big_link {background: url('/images/tile_biglink.gif') repeat; color: #000;}

/* Lists */
ul {margin:5px 10px 5px 10px; padding:7px;} 
ol {}
ul.zippo {list-style-type: none;}
ul.narrow {	text-indent: 0; margin:0; padding:0;}
ul.narrow_2 {margin:0; padding:0 10px;}
ul.sortable.page {list-style:none; margin: 0; padding:0;}
ul.sortable.page li {margin-bottom:3px; border:1px solid #DDE7EF; padding:3px; }
ul.sortable.page.narrow li {margin:0px; padding:0px; border: 0; }
ol li {padding: 0 0px 7px 5px; list-style-type: decimal; display: list-item;background: none;}
li {list-style-type: none;	display: block; border:none; background: transparent url('/images/bullets/a1.png') no-repeat 0 1px; padding: 0 0px 5px 22px;} 
li.none {background:none; clear: both; display: block;} 
li.a {background: transparent url('/images/bullets/a2.png') no-repeat 0 1px; padding: 0 0px 5px 20px;}
li.b {background: transparent url('/images/bullets/a6.png') no-repeat 0 1px; padding: 0 0px 5px 20px;}
li.info {background: transparent url('/images/bullets/i1.png') no-repeat; padding: 0 0px 5px 20px;}
li.tick {background: transparent url('/images/icons/tick.gif') no-repeat ; padding: 1px 0px 5px 25px;}

ul.epicenter li {background-position:left 5px;}


/* --- WEBSITE CARDS - should be common to all --- */

/* Summary: div.card is the image.  div.mcard_176 is the surrounds  and .mcard is the organiser element - eg, li or td...*/

#cards {clear: both;} /* The cards area on the Member's Website*/

/* The organiser class for displaying the mcard - eg, a li or td */
.m_card, td.m_card, div ul li.m_card {width:176px;padding:9px; margin: 10px; border: 16px solid #fff; background: #eef5f8; vertical-align: top; } 
.sortable .m_card {margin:0px;}
#side_bar .m_card {border:none;padding:17px;}
.m_card a:hover {background: none; color:#f00;}
.m_card img{border: 0px solid #f00; float:left;} /* Note - just needed this one float to fix IE 7 extra bixels bug*/

/* The actual card (surrounds) and image itself (.card img) */
.mcard_176 {width: 178px; padding: 1px; margin: 0px; background: none no-repeat; float:left;border:0px solid #f00;}		
.mcard_176 .description {width: 178px; overflow: auto; max-height: 100px;}		
.mcard_176 .card {text-align: center; overflow: none; width:176px; padding: 0; margin:0; float:left;}    
.mcard_176 .card img {border:1px solid #fff;  }    /*Just as a temporary until proper gif resizing and versions*/
.mcard_176 .card a {padding: 0; margin:0; float:left;}  /* Gets rid of IE 6 3 px bug  */
.mcard_176 .card a:hover img{border: 1px solid #f00; top:-1px; left:-1px;position: relative;}

.mcard_176 h4 { clear:both; color: #f00; }
.mcard_176 a:hover {color:#f00;}


/*to remove the sortable border*/ /*#sortable_list.sortable li {border: 0;}*/
/* The phone - main areas */

.phone {width: 244px;padding:0px; margin: 0px; float:left; border:none;  position: relative;}		
.phone .phone_top {background: url(/images/phone_top.png) no-repeat; height:20px; padding: 29px 0 0 78px; color: #9da0a2; font-weight:bold;}
.phone .phone_screen_bg {width: 244px;background: url(/images/phone_screen_tile.png) repeat-y; border: 0px solid #ff0; position: relative;}
.phone .phone_screen_bg .phone_screen {width:176px; height:230px; background: #000; position: relative;  margin:0 0 0 35px; overflow:hidden;}
.phone .phone_screen_bg .phone_screen.compose_message_preview {background: #000; color: #fff; height:230px; font-size: 12px;  }
.phone .phone_screen_bottom_bar {background: url(/images/phone_screen_bottom.png) no-repeat; height:5px; overflow: hidden;}
.send_to_phone {width: 244px;background:url(/images/phone_tile_bottom.png) repeat; font: 12px/13px arial; float:left;}
.send_to_phone .send_to_phone_text {padding:1px 28px 1px 28px;}
.phone_bottom {border: 0px solid #f00; background:url(/images/phone_bottom.png) bottom left; width:244px; height:57px;margin:0; float:left; text-align: center;}

/* Yuk..tmp fix */
/*.phone_bottom {background-color:#dde7ef ;}*/

/* Areas on the phone */
.phone .card {text-align: center; overflow: none; width:176px;  height: 176px;}		
.phone .card.compose_preview {text-align: left; overflow: hidden; margin-bottom: 5px}		
.phone .card img {padding: 0; margin: 0; border:0; float: left; text-align: middle; position: relative;}
.phone_screen_top {overflow: hidden; white-space:nowrap; display:block; font-size: 15px; color: #fff; height:27px; text-align: center; padding:0;}
.phone_screen_top .text {padding:5px; width: 140px; overflow: hidden; }

.more_info {float:right; width:17px; height:11px; padding:2px 4px;  font-size: 9px; color: #dd0;}
.more_info img {float:left;padding: 0 0 0 3px;}
a:hover.more_info {top:-1px; right:1px; position: relative;}
a:hover.more_info img {text-decoration: none;}

.card_info {color: #ddd; overflow-x: hidden; overflow-y: auto;width:176px; height: 176px;}
.card_info h4 {color: #dd0;}
.card_info .description p {color: #ddd;}
.card_info a.card_back {color: #cc0; float:left;}

#loading_card {width:0px; height:200px; padding:74px;}

#center_plugin { margin: 0 auto; width: 244px;}  

.phone_screen_bottom { display:block;  font-size: 15px; color: #fff; height:17px; text-align: center;padding:5px 0 5px 0;}
.indicator {width:10px; height: 10px;} /*The ajax spinner area*/
.send_to_phone .highlight {font: 12px/12px arial; font-weight:bold}
/* for displaying non-resized MCards - allows them to scroll if > than 240 */
.mcard_full_size  {width: 245px; height: 245px; overflow: auto; padding:0px; margin: 10px; background: none no-repeat; float:left; border:none;}	
.mcard_full_size img {float:left;}	
.zoom_link {float: right; font-size: 80%; }

.m_card .card_large {width: 240px; margin:-32px 0 0 -32px; position: relative;}
.phone .card .card_medium {width: 150px; margin:13px;}
.phone .card .card_small {width: 120px; margin:28px; border: 1px solid #aaa; }

/* Pagination  Links*/
.pagination .disabled {color: #999;}
.pagination .disabled, .pagination .current, .pagination  a {padding: 1px 4px 1px 4px; }
.pagination .current, .pagination a:hover {color: #fff; background: #ccc;}

/* shop */
#css_boxes {padding: 0 20px 0 30px;}
.shop_image {	border: 1px solid #c5c655; float:right;	margin: 10px 5px 10px 10px;}
p.price {position: relative; font: bold 22px Arial; color: #f00;	padding:15px 0 0 30px; float: left;}
.buy {position: relative;width: 175px; height: 50px; text-decoration: none; font-size: 18px; float:left;}
.buy img {float: left; padding: 0 8px 0 4px; width: 48px; height: 48px;}
a:hover.buy {background-color: #F4EC8E; color: #4E1500;} 

/* General reused areas */
.screenshot {float: right; margin: 0 20px 20px 0; padding: 5px; width:640px; height: 425px;}
#captcha_area {width: 130px; height: 90px; float: left; background: #999;}



table.general {border-collapse:collapse;	border: 1px solid #5b6385;	text-align: center; margin:15px 0 20px 40px;}
table.general.table_left {text-align: left; margin:5px 0 5px 5px;}
table.general.no_border {border: 0px; margin:0;}
table.general.no_margin {margin:0;}

table.general th {background:#404496; color: #f3f3f3; border: 1px solid #5b6385;	padding:4px; font-size:110%;  text-align: center;color: #fff;}
table.general th.text_left {text-align: left;}
table.general tr.lt {background:#FEFEFE; }
table.general tr.dk, table.general td.dk {background:#EEEEEE;}
table.general tr.tr_highlight {background:#FEFEaa;}
table.general tr.dk_line {background:#EEEEEE;border-top: 1px solid #5b6385;border-bottom: 1px solid #5b6385;}
table.general tr.big_text {font-size:125%;}
table.general td {border-left: 1px solid #5b6385;	border-right: 1px solid #5b6385;	padding: 3px;}
table.general td.col_1 {font-weight: bold;}
table.general.no_border td {border: 0px; padding:8px;}

table.lots_of_cells {border-collapse:collapse;	border: 1px solid #fcc;	text-align: center; margin:5px; background: #f1f1f1;}
table.lots_of_cells td {border: 1px solid #fcc;	padding: 5px; text-align: left; min-width: 120px;}



#message {text-align: center; margin: 7px 30px;border: 1px solid #f66;color: #000; padding: 5px;  background-color: #f1f1f1;  }
.notice {display: inline;background:transparent url(/images/icons/info.png) no-repeat 5px 4px;margin:3px auto;padding: 5px 5px 5px 25px;    }


/* Demo 3d Card in Phone */
#mobile_phone_with_card_3d {float: left;display: inline; text-align:center; width:219px; height:358px; background: url(/images/help/mobile-phone-with-business-card.jpg) no-repeat; border: 0px solid #f00; padding: 58px 0 0 26px; margin: 10px 0 0 0; vertical-align: top;}
.animated_card_in_phone {float:left; padding: 0; margin: 0; overflow: hidden;width:176px; height:176px; }
.animated_card_in_phone img {float:left; padding: 0;}

/* Random Cards */
.random_cards {background: #bec6d6; padding: 10px 0px 10px 4px; width:953px;min-height: 100px;display:inline;}
.random_cards .small_card {border: 1px solid #222; }
#carousel-wrapper {width: 868px;height: 124px;overflow: hidden; float:left;}
#carousel-content {width: 5000px;}
#carousel-content .slide {float: left; width: 868px; height: 124px; background: #666;}

.carousel-control.ico-prev {width: 40px; height: 124px; float:left; background: url(/images/icons/arrow_blue_left.png) 1px 40px no-repeat;  }
a:hover.carousel-control.ico-prev {background: url(/images/icons/arrow_yellow_left.png) 1px 40px no-repeat; }

.carousel-control.ico-next {width: 40px; height: 124px; float:left; background: url(/images/icons/arrow_blue_right.png) 1px 40px no-repeat;  }
a:hover.carousel-control.ico-next {background: url(/images/icons/arrow_yellow_right.png) 1px 40px no-repeat;}
.loading_slide {padding:55px; float:left;}


/* Button Class */

a.button {
    background: transparent url('/images/website/themes/fashion/button_bg.png') no-repeat scroll top right;
    color: #fff;
    display: block;
    float: left;
    font: 11px arial, sans-serif;
    height: 34px;
    margin: 3px 0 0 5px;
    padding-right: 19px; /* sliding doors padding */
    text-decoration: none;
    text-transform: lowercase;
    white-space:nowrap;
    border: 0px solid #f00;}
a.button span {
    background: transparent url('/images/website/themes/fashion/button_bg_span.png') no-repeat;
    display: block;
    line-height: 25px;
    padding: 2px 1px 7px 12px;
    /* Note - cannt use 'height' in IE6 without width */}
a.button:hover {
    background-position: bottom right;
    color: #fff;
    outline: none;
    text-decoration: none;}
a.button:hover span {
    background-position: bottom left;
    padding: 2px 1px 7px 12px; }
a.button:active {
    background-position: right -34px;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */ }
a.button:active span {
    color: #000;
    background-position: left -34px;
    padding: 3px 0 6px 13px; /* push text down 1px */}

a.button.wide span{ padding: 2px 15px 7px 27px;}
a.button.wide:hover span {padding: 2px 15px 7px 27px; }
a.button.wide:active span {padding: 3px 15px 7px 27px;}