/* 
Project: Remindeo
Filename: screen.css
Creation Date: 19th February 2007 (although in constant use)
*/



/* ---------------- global styles ---------------- */

/* HERE */

#view-stats strong{
	float: right;
	text-align: left;
	width: 100px;
}

.here {
	color: #0062a7 !important;
}

.hereSub {
	color: #000000 !important;
}

body {
    margin: 0;
    padding: 0;
    font-size: 0.75em;
    text-align: center;
    line-height: 1.5em;
    color: #000;
    font-family: arial, verdana, sans-serif;
    background: #F7F8F9 url("../images/background.jpg") repeat-x top left;
    }


body a img {
    border: none;
}


h1 {
	font-size: 2.2em;
	margin: 0;
	padding: 0;
	font-weight: normal;
	letter-spacing: -1px;	
}


h2 {
	font-size: 1.6em;
	margin: 0;
	padding: 0;
	font-weight: normal;
	letter-spacing: -1px;	
}


h3 {
	font-size: 1.6em;
	margin: 0;
	padding: 0;	
	letter-spacing: -1px;	
}

h4 {
	font-size: 1.4em;
	margin: 0;
	padding: 0;
	font-weight: bold;
	letter-spacing: -1px;	
}

h5 {
	font-size: 1.4em;
	margin: 0;
	padding: 0;
	font-weight: bold;
	letter-spacing: -1px;	
}

h6 {
	font-size: 1.4em;
	margin: 0;
	padding: 0;
	font-weight: bold;
	letter-spacing: -1px;	
}

p {
	font-size: 1em;
	margin: 0;
	padding: 0;
}

.error {
	font-weight:bold;
	color:#CC0000;
}


.ok {
	font-weight:bold;
	color:#A6B91C;
}


.upgrade {
	color:#A6B91C;
}

.allok {
	color: #A6B91C;
	font-size: 1.4em;
}


a:focus,
a:hover,
a:active{
	outline:none;
}

.clearSpecial {
	clear: both;
	overflow: hidden;
	line-height: 0 !important;
	height: 0 !important;
	font-size: 0 !important;
	margin: 0 !important;
	}



/* ---------------- global classes ---------------- */


.bold{
   font-weight: bold;
}

.number {
   color: #A6B91C;
}

.divline {
  	border-bottom: 1px solid #99c0dc;	 
}

.todivline {
  	border-bottom: 1px solid #99c0dc ;
	clear: both;
	width: 60%;
}


.tododivline {
   	border-bottom: 1px dotted #CCCCCC;
	margin-bottom: 14px;
	margin-top: 6px;
	clear: both;	
}


.close2 {display: none;}
.open2 {display: block;}


.styled-button-big{
	border: 2px solid #ccc;
	background: #F9F5C8 url(../images/button-back-big.jpg) repeat-x bottom left;
	font-weight: bold;
	font-size: 1.6em;
	letter-spacing: -1px;
	padding: 5px 0 4px 0;
	width: 206px;
	color: #0062a7;
	font-family: arial, verdana, sans-serif !important;
	cursor:pointer;
	outline: none;
}  

.styled-button-big:hover{
	color: #f1bf23;
	cursor:pointer;
	outline: none;
}

.styled-button-big:active{
	color: #f1bf23;
	border: 2px solid #ccc;
	border-top: 2px solid #999;
	border-left: 2px solid #999;
	cursor:pointer;
	outline: none;
}

.styled-button-medium{
	border: 2px solid #ccc;
	background: #F9F5C8 url(../images/button-back-big.jpg) repeat-x bottom left;
	font-weight: bold;
	font-size: 1.6em;
	letter-spacing: -1px;
	padding: 4px 0 3px 0;
	width: 206px;
	color: #0062a7;
	font-family: arial, verdana, sans-serif !important;
	cursor:pointer;
	outline: none;
}  

.styled-button-medium:hover{
	color: #f1bf23;
	cursor:pointer;
	outline: none;
}

.styled-button-medium:active{
	color: #f1bf23;
	border: 2px solid #ccc;
	border-top: 2px solid #999;
	border-left: 2px solid #999;
	cursor:pointer;
	outline: none;
}

.styled-button{
	border: 2px solid #ccc;
	background: #F9F5C8 url(../images/button-back.jpg) repeat-x bottom left;
	font-weight: bold;
	font-size: 1.4em;
	letter-spacing: -1px;
	padding: 3px 0 2px 0;
	width: 206px;
	color: #0062a7;
	font-family: arial, verdana, sans-serif !important;
	cursor:pointer;
	outline: none;
}  

.styled-button:hover{
	color: #f1bf23;
	cursor:pointer;
	outline: none;
}

.styled-button:active{
	color: #f1bf23;
	border: 2px solid #ccc;
	border-top: 2px solid #999;
	border-left: 2px solid #999;
	cursor:pointer;
	outline: none;
}


.search-button{
	border: 2px solid #ccc;
	background: #F9F5C8 url(../images/button-back.jpg) repeat-x bottom left;
	font-weight: bold;
	font-size: 1.0em !important;
	width: 100px !important;
	padding: 3px 0 3px 0 !important;
	color: #0062a7;
	font-family: arial, verdana, sans-serif !important;
	cursor:pointer;
	outline: none;
}


.search-button:hover{
	color: #f1bf23;
	cursor:pointer;
	outline: none;
}

.search-button:active{
	color: #f1bf23;
	border: 2px solid #ccc;
	border-top: 2px solid #999;
	border-left: 2px solid #999;
	cursor:pointer;
	outline: none;
}



.styled-button-upgrades {
	border: 2px solid #ccc;
	background: #F9F5C8 url(../images/button-back.jpg) repeat-x bottom left;
	font-weight: bold;
	font-size: 1.4em;
	letter-spacing: -1px;
	margin-top:7px;
	padding: 3px 0 2px 0;
	width: 170px;
	color: #0062a7;
	font-family: arial, verdana, sans-serif !important;
	cursor:pointer;
	outline: none;
}


.styled-button-upgrades:hover{
	color: #f1bf23;
	cursor:pointer;
	outline: none;
}

.styled-button-upgrades:active{
	color: #f1bf23;
	border: 2px solid #ccc;
	border-top: 2px solid #999;
	border-left: 2px solid #999;
	cursor:pointer;
	outline: none;
}

/* ---------------- wrap ---------------- */



#wrap {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	width: 820px;
}


/* ---------------- header ---------------- */


#header {
	float: left;
	width: 820px;
	height: 110px;
}


#header.homeOnly {
	background: url(../images/note.jpg) no-repeat right top;
}


#header .headerlogo {
	width: 273px;
	height: 81px;
	margin: 14px 0;
	text-indent: -2000px;
	background: url(../images/remindeo-reminders-logo.jpg) no-repeat left top;
}

* html #header .headerlogo {
	text-indent: 0px;
}

#header .headerlogo p {
	text-indent: -2000px;

}


/* ---------------- nav ---------------- */


#nav{
	float: left;
	width: 820px;
	margin: 0;
	padding: 0px 0 14px 0;
	list-style: none;
}


#mainNav, #subNav{
	margin: 0;
	padding:0;
	list-style: none;
}

#mainNav{
	float: left;
}


#subNav{
	float:right;
}



#nav.homeOnly {
	background: url(../images/note2.jpg) no-repeat right top;
}


#mainNav li{
	float: left;
	margin-right: 25px;
	background: #A6B91C; 
	font-weight: bold;
	font-size: 120%;	
}


* html #mainNav li{
	margin-right: 25px;
	}


#mainNav li.last {
	margin-right: 0px !important;	
}


* html #mainNav li.last {
	margin-right: 0px !important;
	}



#subNav li{
	float: left;
	margin-left: 15px;
	background: #A6B91C; 
	font-weight: normal;
	font-size: 96%;	
}


* html #subNav li{
	margin-left: 15px;
	}


#subNav li.first {
	margin-left: 0px !important;
}


* html #subNav li.first {
	margin-left: 0px !important;
	}


#nav li a{
	float: left;
	color: #ffffff;
	text-decoration: none;
}


#nav li a:hover{
	color: #f1bf23 !important;
	text-decoration: none;
}



/* ---------------- content ---------------- */


#content{
	float: left;
	width: 820px;
	padding-top: 19px;
}


#content.homeOnly {
	background: url(../images/note3.gif) no-repeat right top;
}


body .tourOnly {
	background: url(../images/note3.gif) no-repeat right top;
}


#content a{
	font-weight: bold;
	color: #0062a7;
	text-decoration: underline;
}


#content a:hover{
	font-weight: bold;
	color: #f1bf23 !important;
	text-decoration: underline;
}



#content h1{
	margin: 0 0 25px 0;
	color: #0062a7;
}

#content h2{
	margin: 0 0 20px 0;
	color: #A6B91C;
	font-weight: normal;
}

#content h3{
	margin: 0 0 20px 0;
	color: #0062a7;
	font-weight: normal;	
}

#content h4{
	margin: 0 0 5px 0;
	color: #CC0000;
}

#content h5 {
	margin: 0 0 5px 0;
	color: #CC0000;
}


#content h6 {
	margin: 0 0 5px 0;
	color: #A6B91C;
}


#content p{
	font-weight: normal;
	color: #000;
	margin: 0 0 20px 0;
}

#content ul{
	list-style: none;
	margin: 0 0 15px 0;
	padding: 0;
	font-size: 1em;
	font-weight: normal;
	color: #000;
}

#content li{
	padding-left: 12px;
	margin-bottom: 3px;
	background: url(../images/bulletXSmall.gif) no-repeat left 50%;
}


#content.homeOnly ul{
	list-style: none;
	margin: 0 0 25px 0;
	padding: 0;
	font-size: 1.3em;
	font-weight: normal;
}


#content.homeOnly li{
	padding-left: 15px;
	margin-bottom: 5px;
	background: url(../images/bullet.gif) no-repeat left 50%;
}

#content.upgrades ul{
	list-style: none;
	margin: 0 0 20px 0;
	padding: 0;
	font-size: 1.2em;
	font-weight: normal;
}

#content.upgrades ul strong {
	color:#0062a7;
}

#content.upgrades li{
	padding-left: 20px;
	margin-bottom: 3px;
	background: url(../images/bullet.gif) no-repeat left 50%;
}

#content.upgrades h5{
	margin: 0 0 0 0;
	color: #333;
}

#content.upgrades h5 span {
	color:#0062a7;
	font-size: 1.2em;
	font-weight: bold;
}	

#content .signUp{
	padding: 10px 0 30px 214px;
	width: 392px;
	height: 64px;	
	background: url(../images/reminder-service-sign-up.gif) no-repeat 214px 10px;
}

#content div.signUp a{
	display: block;
	width: 392px;
	height: 64px;
	background: url(../images/reminder-service-sign-up.gif) no-repeat left top;
	text-indent: -2000px;
}

#content div.signUp a:hover{
	background: url(../images/reminder-service-sign-up.gif) no-repeat -392px top;
}	



#content .signUpTour{
	padding: 10px 0 10px 214px;
	width: 392px;
	background: url(../images/reminder-service-sign-up.gif) no-repeat 214px 10px;	
}

#content .signUpTour a{
	display: block;
	width: 392px;
	height: 64px;
	background: url(../images/reminder-service-sign-up.gif) no-repeat left top;
	text-indent: -2000px;
}

#content .signUpTour a:hover{
	background: url(../images/reminder-service-sign-up.gif) no-repeat -392px top;
}	

#content .signUpTour a span{
	text-indent: -2000px;
}

#content .getcredits{
	padding: 15px 0 20px 208px;
}

#content .getcredits a{
	display: block;
	width: 345px;
	height: 55px;
	background: url(../images/get-credits.jpg) no-repeat left top;
	text-indent: -2000px;
}

#content .getcredits a:hover{
	background: url(../images/get-credits.jpg) no-repeat -345px top;
}	


#content .getcredits a span{
	text-indent: -2000px;
}


#content .upgradenow{
	padding: 15px 0 20px 208px;
}


#content .upgradenow a{
	display: block;
	width: 345px;
	height: 55px;
	background: url(../images/upgrade-now.jpg) no-repeat left top;
	text-indent: -2000px;
}

#content .upgradenow a:hover{
	background: url(../images/upgrade-now.jpg) no-repeat -345px top;
}	


#content .upgradenow a span{
	text-indent: -2000px;
}


#upgrade-options{
	float: left;
	width: 820px;
	background: url(../images/upgrades-back.gif) no-repeat bottom left;	
   	border-bottom: 2px solid #99c0dc;
	margin-bottom: 15px;
	padding-bottom: 20px;	
}


#upgrade-options .height-fix{
	float: left;
	width: 250px;
	min-height: 250px;
  	height:auto !important;
  	height: 250px;
}
	


#upgrade-options .upgrade1,
#upgrade-options .upgrade2{
	float: left;
	width: 250px;
	margin-right: 35px;
}


#upgrade-options .upgrade3{
	float: left;
	width: 250px;
}


* html #upgrade-options .credits{
	padding-bottom: 33px;
}


#content .hidden-box{
	display: none;
	border: 1px solid #99c0dc;
	background: #ffffff;
	padding: 15px 15px 0 15px;
	margin: 5px 0 15px 0;
}


#content .hidden-box h3{
	color: #0062a7;
}


* html #proaccount{
	float: left;
}


/* ---------------- home-promos ---------------- */


#home-promos{
	float: left;
	width: 820px;
}


#home-promos p{
	font-weight: normal;
	margin: 0 0 0 15px;
	padding: 0;
}


#home-promos img.others-say{
	float: left;
	margin: 0 15px 15px 0;
}


#home-promos p.others-say{
	float: left;
	width: 280px;
	margin: 0 0 0 0;
	font-size: 1.3em;
	color: #0061A6;
}


#home-promos h2.freebie{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}


#home-promos p.freebie{
	margin: 17px 0 0 0;
	font-size: 1.3em;
	color: #0061A6;
}

#home-promos p.freebieright{
	margin: 15px 0 0 0;
	font-size: 1.3em;
	color: #0061A6;
}

#home-promos p.video-text{
	margin: 0 0 15px 0;
	font-size: 1.3em;
	color: #000;
}


#home-promos p.video-text span{
	color: #0061A6;
}


#home-promos .promo-slot{
	float: left;
	width: 390px;
	margin-right: 40px;
}


* html #home-promos .promo-slot{
}


#home-promos .promo-slot-last{
	float: left;
	width: 390px;
	margin-right: 0px;	
}



/* ---------------- 2 column ---------------- */

#contentLeft{
	float: left;
	width: 395px;
}


#contentRight{
	float: right;
	width: 395px;
}


#tableLeft{
	float: left;
	width: 398px;
}


#tableRight{
	float: right;
	width: 398px;
}



/* ---------------- footer ---------------- */


#footer{
	width: 820px;
	float: left;
	border-top: 1px solid #99c0dc;
	margin: 15px 0 0 0 !important;
	padding: 5px 0 5px 0!important;
	color: #333333;
	list-style: none;
}


#footer li{
	float: left;
	font-size: 0.9em;
}

#footer li a{
	float: left;
	padding: 0 8px;
	color: #333333;
	text-decoration: none;
	background: url(../images/line.gif) no-repeat left 50%;
}


#footer li a:hover{
	color: #f1bf23;
	text-decoration: none;
}


#footer .first{
	padding-right: 8px;
}


/* ---------------- general forms  ---------------- */



form label { 
	float: left;
	text-align: right;
	margin: 0.2em 1.6em 0 2em;
	width:140px; 
}

/* ---------------- reminder forms  ---------------- */

.reminder label { 
	margin:0px !important;
	width:308px !important;
	text-align: left !important;
}


#reminderbox {
	background-color: #E5EFF6;
	border: 1px solid #CC0000;
	margin: 0 0 20px 0;
	padding: 15px 15px 10px 15px;
}

#reminderbox p {
	margin-left: 33px;
	font-weight: bold;
}

#reminderboxEmail {
	background-color: #F9F5C8;
	border: 1px solid #CCCCCC;
	margin: 0 0 0 0;
	padding: 15px 15px 15px 15px;
}

#navBox {
	background-color: #E5EFF6;
	border: 1px solid #CCCCCC;
	margin: 0 0 20px 0;
	padding: 15px 15px 15px 15px;
}

#yourBox {
	background-color: #FFF;
	border: 1px solid #CCCCCC;
	margin: 0 0 20px 0;
	padding: 15px 15px 15px 15px;
}

#yourDay {
	background-color: #FFF;
	border: 1px solid #CCCCCC;
	margin: 0 0 0 0;
	padding: 15px 15px 5px 15px;
}

#yourDay ul{
	margin: 0 35px 15px 0;
}


* html #yourDay ul{
	margin: 0 17px 15px 0;
}


#yourDay ul a{
	font-weight: normal !important;
	text-decoration: none;
}

#yourDay ul a:hover {
	font-weight: normal !important;
}

#yourDay .sevendiv{
	width: 788px;
	margin: 0;
	padding: 0;
	background: url(../images/status-dotted-2.gif) no-repeat 0 0;
}


#yourDay .add{
	margin: 0 0 10px 0;
	font-family: arial, verdana, sans-serif;
}

#reminderboxPreview {
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	margin: 0 0 0 0;
	padding: 15px 15px 10px 15px;
}

.noedit {
	background-color: #EFEFEF; 
	border: 1px solid #CCCCCC;
}

.edit {
	background-color: #FFFFFF; 
	border: 1px solid #CCCCCC;
}

.smallnote {
	font-style:italic;
	color:#666666;
}

/* ---------------- datatables  ---------------- */

.datatable {
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;	
	border-collapse: collapse;
	width: 100%;
}

.datatable th {
	border-top: 1px solid #CCCCCC;
	background-color: #99c0dc;
	font-size: 1.6em;
	letter-spacing: -1px;	
	color:#FFF;
    font-weight: normal;
	padding: 12px;
	
}


.datatable td {
	border-top: 1px solid #CCCCCC;
	background-color: #fff;
    font-weight: normal;
	padding: 12px;
	border-collapse: collapse;
}

.cal {
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;	
	border-collapse: collapse;
	width: 100%;
}

.cal th {
	border: 1px solid #CCCCCC;
	background-color: #99c0dc;
	font-size: 1.6em;
	letter-spacing: -1px;	
	color:#FFF;
    font-weight: normal;
	padding: 8px;
	
}

.cal td {
	border: 1px solid #CCCCCC;
    font-weight: normal;
    color: #000 !important;
	padding: 4px;
	padding-bottom: 12px;
	padding-top: 12px;
	border-collapse: collapse;
}

.cal a {
	font-weight: normal !important;
	color: #0062a7;
	text-decoration: none !important;
	font-size: 0.9em;
    line-height: 1.1em !important;
}


.cal a:hover{
	font-weight: bold;
	color: #f1bf23 !important;
	text-decoration: underline  !important;	
	font-size: 0.9em;
    line-height: 1.1em !important;
}


.datatable a {
	font-weight: bold;
	color: #0062a7;
	text-decoration: none !important;
}


.datatable a:hover{
	font-weight: bold;
	color: #f1bf23;
	text-decoration: underline  !important;
}

.odd {
	background-color: #F9F5C8 !important;
}

/* ---------------- start.php links  ---------------- */



#start-links{
	float: left;
	width: 820px;
}


#start-links li{
	float: left;
	list-style: none;
	background: none;
	margin: 0 84px 0 0;
	padding: 0;
}



#start-links .first{
	margin: 0 84px 0 28px;
}


* html #start-links .first{
	margin: 0 84px 0 14px;
}


#start-links .last{
	margin: 0 28px 0 0;
}


* html #start-links .last{
	margin: 0 24px 0 0;
}

#start-links li a{
height /**/: 180px; 
overflow: hidden;
}


#start-links li.link1{
	background: url(../images/create-new-reminders.gif) no-repeat 0 0;
}


#start-links li a.create-reminder{
	width: 198px;
	height: 180px;
	display: block;
	text-indent: -99999px;
	background: url(../images/create-new-reminders.gif) no-repeat 0 0;
}


#start-links li a.create-reminder:hover{
	background: url(../images/create-new-reminders.gif) no-repeat -198px 0;
}




#start-links li.link2{
	background: url(../images/wizard.gif) no-repeat 0 0;
}


#start-links li a.use-wizard{
	width: 198px;
	height: 180px;
	display: block;
	text-indent: -99999px;
	background: url(../images/wizard.gif) no-repeat 0 0;
}


#start-links li a.use-wizard:hover{
	background: url(../images/wizard.gif) no-repeat -198px 0;
}



#start-links li.link3{
	background: url(../images/present-reminders.gif) no-repeat 0 0;
}

#start-links li a.use-preset{
	width: 198px;
	height: 180px;
	display: block;
	text-indent: -99999px;
	background: url(../images/present-reminders.gif) no-repeat 0 0;
}


#start-links li a.use-preset:hover{
	background: url(../images/present-reminders.gif) no-repeat -198px 0;
}


/* ---------------- simon m added 21/11/08 ---------------- */


#content form p{
	font-weight: normal;
	color: #333333;
	margin: 0 0 13px 0;
}

#firstname,
#lastname,
#email,
#password,
#confirm,
#old,
#new,
#number1,
#number2,
#reminder_name_bday,
#tfullname,
#temailaddress,
#temailconfirm,
#note_type_web_new
{
	width: 200px;
/*	height: 20px; */
	padding-top: 4px;
	padding-bottom: 4px;
}


#tnumber
{
	width: 133px;
/*	height: 20px; */
	padding-top: 4px;
	padding-bottom: 4px;
}

#code1,
#code2,
#tcode
{
	width: 30px;
/*	height: 20px; */
	padding-top: 4px;
	padding-bottom: 4px;
}


#view-reminder {
	background-color: #FFF;
	border: 1px solid #CCCCCC;
	margin: 0 0 0 0;
	padding: 0px 15px 5px 15px;
}

#view-reminder .sevendiv{
	width: 788px;
	margin: 0;
	padding: 0;
	clear: both;
	background: url(../images/status-dotted-2.gif) no-repeat 0 0;
}

#viewreminder infobar { 
	width:280px; 
	display:block;
}

#view-reminder p{
	float: left;
	width: 788px;
}
	

#view-reminder p strong{
	float: left;
	width: 250px;
}


#view-reminder p span{
	float: right;
	width: 538px;
}


.divline {
   	clear: both;	
}


/* ---------------- birthday wizard.php links  ---------------- */



#wizard-links{
	float: left;
	width: 537px;
}


#wizard-links li{
	float: left;
	list-style: none;
	background: none;
	margin: 0 0px 0 0;
	padding: 0;
}



#wizard-links .first{
	margin: 0 0 0 0;
}


* html #wizard-links .first{
	margin: 0 29px 0 0;
}


#wizard-links .last{
	margin: 0 0 0 29px;
}


* html #wizard-links .last{
	margin: 0 0 0 29px;
}

#wizard-links li a{
height /**/: 78px; 
overflow: hidden;
}


#wizard-links li.link1{
	background: url(../images/wizard-by-email.jpg) no-repeat 0 0;
}


#wizard-links li a.by-email{
	width: 254px;
	height: 78px;
	display: block;
	text-indent: -99999px;
	background: url(../images/wizard-by-email.jpg) no-repeat 0 0;
}


#wizard-links li a.by-email:hover{
	background: url(../images/wizard-by-email.jpg) no-repeat -254px 0;
}




#wizard-links li.link2{
	background: url(../images/wizard-on-facebook.jpg) no-repeat 0 0;
}


#wizard-links li a.on-facebook{
	width: 254px;
	height: 78px;
	display: block;
	text-indent: -99999px;
	background: url(../images/wizard-on-facebook.jpg) no-repeat 0 0;
}


#wizard-links li a.on-facebook:hover{
	background: url(../images/wizard-on-facebook.jpg) no-repeat -254px 0;
}



#wizard-links li.link3{
	background: url(../images/images/wizard-on-twitter.jpg) no-repeat 0 0;
}

#wizard-links li a.on-twitter{
	width: 254px;
	height: 78px;
	display: block;
	text-indent: -99999px;
	background: url(../images/wizard-on-twitter.jpg) no-repeat 0 0;
}


#wizard-links li a.on-twitter:hover{
	background: url(../images/wizard-on-twitter.jpg) no-repeat -254px 0;
}




/* ---------------- to do list styles ---------------- */


.todoReminder{
	float: left;
	width: 820px;
	position: relative;
	border-bottom: 1px dotted #cccccc;
	}

.todo{
	margin: 0 0 0 0 !important; 
	padding: 8px 0 8px 12px !important; 	
	font-size: 1.2em;
	background: url(../images/bulletXSmall.gif) no-repeat left 50%;
}	



.todo a{
	text-decoration: none !important; 
	font-weight: normal !important;
	color:#000 !important; 
	text-decoration:none !important;
	}


.todo a:hover{
	color: #666 !important;
	}
	
	
.todo a.done{
	float: right;
	cursor: pointer;
	}


.todo a.shut{
	float: right;
	cursor: pointer;
	}

	
.finished{
	color:#999; 
	background: #E8E9E9;
	text-decoration: line-through; 	
	}
	
	
.finished a{
	color:#999 !important; 
	text-decoration: line-through !important;
	}	
	
	
ul.todoOptions{
	z-index: 100;
	display: none;
	float: left;
	width: 408px;
	position: absolute;
	right: 0;
	top: -50%;
	border: 1px solid #0162A7;
	border-bottom: none;
	background: #99C0DC;
	margin: 0 0 0 0 !important;
	padding: 0 !important;
	}	
	
ul.todoOptions li{
	float: left;	
	width: 388px;
	margin: 0 !important;
	padding: 10px !important;
	background: none !important;
	border-bottom: 1px solid #0162A7;

	}	
	
ul.todoOptions li a{
	display: block;
	color: #fff !important;
	}	

.todoLine{
	float: left;
	width: 820px;
	height: 2px;
	margin: 20px 0 20px 0;
	background: #99C0DC;
	}


/* ---------------- new home page ---------------- */



#start-links-large{
	float: left;
	width: 820px;
}


#start-links-large li{
	float: left;
	list-style: none;
	background: none;
	margin: 0 70px 0 0;
	padding: 0;
}



#start-links-large .first{
	margin: 0 70px 0 15px;
}


* html #start-links-large .first{
	margin: 0 70px 0 6px;
}


#start-links-large .last{
	margin: 0 0 0 0;
}


* html #start-links-large .last{
	margin: 0 0 0 0;
}

#start-links-large li a{
height /**/: 196px; 
overflow: hidden;
}


#start-links-large li.link1{
	background: url(../images/link1-large-bg.gif) no-repeat 0 0;
}


#start-links-large li a.create-reminder{
	width: 217px;
	height: 196px;
	display: block;
	text-indent: -99999px;
	background: url(../images/link1-large-bg.gif) no-repeat 0 0;
}


#start-links-large li a.create-reminder:hover{
	background: url(../images/link1-large-bg.gif) no-repeat 0 -196px;
}





#start-links-large li.link2{
	background: url(../images/link2-large-bg.gif) no-repeat 0 0;
}


#start-links-large li a.use-wizard{
	width: 217px;
	height: 196px;
	display: block;
	text-indent: -99999px;
	background: url(../images/link2-large-bg.gif) no-repeat 0 0;
}

#start-links-large li a.use-wizard:hover{
	background: url(../images/link2-large-bg.gif) no-repeat 0 -196px;
}




#start-links-large li.link3{
	background: url(../images/link3-large-bg.gif) no-repeat 0 0;
}

#start-links-large li a.use-preset{
	width: 217px;
	height: 196px;
	display: block;
	text-indent: -99999px;
	background: url(../images/lin3-large-bg.gif) no-repeat 0 0;
}


#start-links-large li a.use-preset:hover{
	background: url(../images/link3-large-bg.gif) no-repeat 0 -196px;
}


/* ----homeStatus ---- */


#homeStatus{
	float: left;
	width: 820px;
	padding: 0 0 5px 0;
	margin: 0 0 20px 0;
	background: url("/images/status-bg.gif") no-repeat 0 100%;
}



#homeStatus .top{
	float: left;
	width: 820px;
	height: 70px;
	background: url("../images/status-top-bg.gif") no-repeat 0 0;
}


#homeStatus .title{
	margin: 0 0 15px 0;
	color: #A5B819;
}

* html #homeStatus .title{
	margin: 0 0 15px 16px;
}

#homeStatus .title strong{
	color: #005FA5;
}


#homeStatus .add{
	margin: 0 0 10px 35px;
	font-family: arial, verdana, sans-serif;
}



#homeStatus .top .view{
	float: left;
	margin: 17px 0 0 35px;
	color: #A5B819;
	font-weight: bold;
}


* html #homeStatus .top .view{
	margin: 17px 0 0 17px;
}


#homeStatus .top .view a.current{
	color: #000;
	text-decoration: none;
}


#homeStatus ul{
	float: left;
	width: 750px;
	margin: 0 35px 12px 35px;
}


* html #homeStatus ul{
	margin: 0 17px 12px 17px;
}


#homeStatus ul a{
	color: #000;
	text-decoration: none;
}


#homeStatus ul a em{
	font-weight: normal;
	padding: 0 0 0 5px;
}


#homeStatus .credits{
	float: left;
	width: 750px;
	margin: 0 35px;
	padding: 12px 0;
	color: #000000;
	font-weight: bold;
	background: url(../images/status-dotted.gif) no-repeat 0 0;
}


* html #homeStatus .credits{
	margin: 0 17px;
	padding: 12px 0 0 0;
}


#homeStatus .credits em{
	color: #CC0000;
	font-style: normal;
}


#homeStatus .credits a{
	color: #0061A6 !important;
}


#homeStatus .credits a:hover{
	color: #f1bf23 !important;
}


#homeStatus .view .hide{
	display: none;
}


#homeStatus .view span{
	display: none;
}


#homeStatus #yesterday,
#homeStatus #tomorrow,
#homeStatus #sevenDays{
	display: none;
}



#homeStatus .sevendiv{
	float: left;
	width: 750px;
	margin: 0 35px;
	padding: 0px 0;
	background: url(../images/status-dotted.gif) no-repeat 0 0;
}


* html #homeStatus .sevendiv{
	margin: 0 17px;
	padding: 0px 0 0 0;
}


/* ---- homeIphone ---- */


#homeIphone{
	float: left;
	width: 788px;
	margin: 0 14px 20px 15px;
	background: #F9F5C8;
	border: 1px solid #A5B81A;
}


* html #homeIphone{
	margin: 0 7px 20px 7px;
	}


#homeIphone img{
	float: left;
	padding: 15px 0 15px 20px;
}


#homeIphone .details{
	float: right;
	width: 663px;
	padding: 15px 20px 15px 0;
}


#homeIphone .details p{
	margin: 0;
	padding: 0 0 2px 0;
}


#homeIphone h4{
	color: #005FA5;
	font-weight: normal;
	font-size: 1.6em !important;
}


#homeIphone ul{
	font-weight: bold;
	color: #000;
	margin: 0;
	padding: 0;
}



/* ---- homeAdvert ---- */


a.homeAdvert{
	float: left;
	width: 788px;
	margin: 0 14px 0 15px;
	border: 1px solid #0062A7;
	background: #99C0DC;
	text-decoration: none !important;
	cursor: pointer;
}

* html a.homeAdvert{
	margin: 0 7px 0 14px;
	}


.homeAdvert .details{
	float: left;
	width: 508px;
	margin: 16px 0 16px 18px;
}


* html .homeAdvert .details{
	margin: 16px 0 16px 9px;
}


.homeAdvert .details h5{
	font-size: 1.5em;
	line-height: 1.5em;
	color: #000 !important;
	font-weight: bold;
	padding: 7px 0 0 0 !important;
	text-decoration: none;
}


.homeAdvert .details p{
	font-size: 1.1em !important;
	line-height: 1.5em;
	color: #005FA5 !important;
	font-weight: bold !important;
	margin: 0 !important;
	padding: 0 !important;
	text-decoration: none;
}


.homeAdvert .details img{
	float: left;
	padding: 0 20px 0 2px;
}



.homeAdvert .more{
	float: right;
	width: 236px;
	height: 69px;
	margin: 13px 20px 13px 0 !important;
	padding: 0;
	text-indent: -9999px;
	background: url(../images/advert-more.gif) no-repeat 0 0;
}


* html .homeAdvert .more{
	margin: 13px 10px 13px 0 !important;
	}

a.homeAdvert:hover .more{
	background: url(../images/advert-more.gif) no-repeat 0 -68px;
}



/* ----- new upgarde page April 2010 ------ */


#content .upgrade{
	float: left;
	width: 768px;
	padding: 25px;
	margin: 0 0 20px 0;
}


#content .textMessage{
	background: #F9F5C8;
	border: 1px solid #cccccc;
}



#content .textMessage h3{
	width: 322px;
	height: 51px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	background: url(../images/textMessage-title.gif) no-repeat 0 0;
}



#content .textMessage ul{
	color: #000000;
	font-size: 1.2em;
}


#content .textMessage ul strong{
	color: #000000;
}



#content .textMessage h4{
	color: #A5B819;
	font-weight: normal;
	font-size: 1.4em !important;
}


#content .textMessage h4 em{
	font-style: normal;
	color: #CC0000;
}


#content .textMessage .form{
	float: right;
	width: 310px;
	background: url(../images/textMessageForm-bottom.gif) no-repeat 0 100%;
}


#content .textMessage .form p{
	float: left;
	width: 250px;
}


#content .textMessage .form form{
	float: right;
	width: 250px;
	padding: 30px;
	margin: 0;
	background: url(../images/textMessageForm-top.gif) no-repeat 0 0;
}


#content .textMessage .form .radio{
	font-weight: bold;
	color: #0060A5;
	font-size: 1.2em !important;
	margin: 0;
	padding: 0;
}



#content .textMessage .form .radio em{
	color: #A5B81B;
	font-style: normal;
}


#content .textMessage .form .autoBuy{
	position: relative;
}


#content .textMessage .form .autoBuy a span{
	display: none;
	color: #000;
	text-decoration: none !important;
	font-weight: normal;
}


#content .textMessage .form .autoBuy a{
	text-decoration: none !important;
}

#content .textMessage .form .autoBuy a:hover{
text-decoration: none;
border: none;
}



#content .textMessage .form .autoBuy a em{
	text-decoration: underline !important;
}


#content .textMessage .form .autoBuy a span em{
	text-decoration: none !important;
}


#content .textMessage .form .autoBuy a:hover span{
	display: block;
	position: absolute;
	top: -100px;
	right: -120px;
	float: left;
	width: 255px;
	background: #99C0DC;
	border: 1px solid #ccc;
	padding: 25px;
	text-decoration: none !important;
}


* html #content .textMessage .form .autoBuy a:hover span{
	right: 240px;
	}

#content #getcredits{
	margin: 10px 0 0 0;
	float: left;
}


#status_text{
	display: none;
}



#content .proSender{
	background: #99C0DC;
	border: 1px solid #cccccc;
}


#content .proSender h3{
	width: 322px;
	height: 47px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	background: url(../images/proSender-title.gif) no-repeat 0 0;
}



#content .proSender .form{
	float: right;
	margin-top: 28px;
	width: 310px;
	background: url(../images/proSenderForm-bottom.gif) no-repeat 0 100%;
}



#content .proSender .form form{
	float: right;
	width: 250px;
	padding: 30px;
	background: url(../images/proSenderForm-top.gif) no-repeat 0 0;
}



#content .proSender .form form h4{
	float: left;
	width: 190px;
	height: 75px;
	color: #A5B81B;
	margin: 10px 0 10px 0 !important;
	padding: 24px 0 0 60px !important;
	font-size: 62px;
	font-weight: bold;
	letter-spacing:-3px;
	background:  url(../images/bargin-title.gif) no-repeat 0 0;
}
	


#content .proSender .benefits{
	float: left;
	width: 433px;
	border-bottom: 1px solid #FFFFFF;
}


#content .proSender .benefits p{
	float: left;
	width: 433px;
	margin: 0;
	padding: 11px 0;
	border-top: 1px solid #FFFFFF;
	font-weight: bold;
	color: #005FA5;
	line-height: 1.4em;
	font-size: 1.1em;
}


#content .proSender .benefits p strong{
	font-size: 1.2em;
	color: #000;
}


#content .proSender .benefits p img{
	float: left;
	margin: 0 15px 0 0;
}



#content .proSender .form form p{
	float: left;
	margin: 0;
	padding: 5px 0;
}


#content .proSender #upgradeNow{
	margin: 10px 0 0 0;
}



#content .presetReminders{
	background: #FFFFFF;
	border: 1px solid #cccccc;
}


#content .presetReminders h3{
	width: 322px;
	height: 47px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	background: url(../images/presetReminders-title.gif) no-repeat 0 0;
}


#content .presetReminders .details{
	float: left;
	width: 433px;
}


#content .presetReminders .details p{
	font-size: 1.2em !important;
	line-height: 1.4em;
}


#content .presetReminders .details p.last{
	margin-bottom: 0;
	padding-bottom: 0;
}


#content .presetReminders .form{
	float: right;
	width: 310px;
	background: url(../images/presetForm-bottom.gif) no-repeat 0 100%;
}



#content .presetReminders .form form{
	float: right;
	width: 250px;
	padding: 30px;
	background: url(../images/presetForm-top.gif) no-repeat 0 0;
}


#content .presetReminders .form p{
	font-size: 1.2em !important;
	line-height: 1.3em;
}


#content .presetReminders .form p .stop{
	color: #CC0000;
}


#content .presetReminders .form p .start{
	color: #A5B81B;
}


#content .styled-button-wide{
	border: 4px solid #ccc;
	background: #F9F5C8 url(../images/button-wide-back.jpg) repeat-x top left;
	font-weight: bold;
	font-size: 1.6em;
	letter-spacing: -1px;
	padding: 8px 0 8px 0;
	width: 250px;
	color: #0062a7;
	font-family: arial, verdana, sans-serif !important;
	cursor:pointer;
	outline:none;
}


#content .styled-button-wide:hover{
	color: #f1bf23;
	cursor:pointer;
	outline:none;
}

#content .styled-button-wide:active{
	color: #f1bf23;
	border: 4px solid #ccc;
	border-top: 4px solid #999;
	border-left: 4px solid #999;
	cursor:pointer;
	outline: none;
}



#wrap .upgrades{
	margin-top: 0;
	padding-top: 15px;
}

/* ----- new notebook styles october 2010 ------ */

#notepad{
	float: left;
	width: 821px;
	padding: 0 0 18px 0;
	margin: 20px 0 0 0;
	background: url("../images/notepad-bottom.jpg") no-repeat 0 100%;
	}
	
	
#notepad .heading{
	float: left;
	width: 821px;
	height: 25px;
	margin: 0;
	padding: 0;
	background: url("../images/notepad-top.jpg") no-repeat 0 0;
	}	
	

#notepad .heading label{
	float: left;
	margin: 21px 0 0 72px;	
	font-weight: normal;
	color: #005FA5;
	font-size: 1.6em;
	}
	
	
#notepad .heading a{
	float: right;
	margin: 20px 21px 0 0;
	}	

#notepad form{
	float: left;
	width: 821px;
	background: url("../images/notepad-middle.jpg") repeat-y 0 0;	
	}
	
	
#notepad form textarea{	
	float: right;
	display: block;
	width: 718px;
/*	height: 148px; */
/*	height: 304px; */
	padding: 5px;
	font-size: 12px;
	font-family: arial;
	margin: 0px 20px 16px 0;
	border: 1px solid #d3d3d3;
	}
	
	
* html #notepad form textarea{	
	margin: 0 10px 16px 0;
	}
	
	
#notepad form .noteType{
	float: right;
	margin: 0 20px 8px 0;
	}
	

* html #notepad form .noteType{
	margin: 0 7px 8px 0;
	}	
	
	
#notepad form .noteType label{
	font-weight: bold;
	margin: 0;
	padding: 0;
	line-height: 30px;
	}
	
#notepad form #noteType{
	float: left;
	width: 212px; 
	padding-top: 5px; 
	padding-bottom: 6px; 
	margin: 3px 4px 0 4px;
	}	
	
* html #notepad form #noteType{
	margin: 3px 4px 0 4px;
	}
	
#whichNote{
	margin: 0;
	}
	
#whichNote,
#whichNote label,
#whichNote select,
#whichNote input{
	float: left;
	width: auto;	
	}
	

#whichNote label{
line-height: 26px;
	}
	

#whichNote select{
	margin: 4px 5px 0 5px;
	}

#whichNote label{
	margin: 0 !important;
	padding: 0;
	color: #A5B81A;
	font-size: 1.6em !important;
	letter-spacing: -1px;
	font-weight: normal;
	}
	
	
#notepad .box{
	float: left;
	}
	
	
.note{	
	float: left;
	width: 789px;
	padding: 15px 15px;
	margin: 0 0 0 0;
	/* margin: 10px 0 0 0; */
	background: #FFF;
	border: 1px solid #CCCCCC;
	}
		

.note .sevendiv {
	width: 788px;
	margin: 15px 0 0 0;
	padding: 0;
	background: url(../images/status-dotted-2.gif) no-repeat 0 0;
}

.note p.noteType{	
	margin: 0 !important;
	padding: 0 0 5px 0 !important;
	}
	
.note p.actions{
	width: 779px !important;
	margin: 0px 0 0 0 !important;
	padding: 0 !important;
	color: #A5B819 !important;
	}
	
	
.note p.actions strong{	
	color: #333333 !important;
	}
	
	
.note img{
	vertical-align: middle;
	}
	
	
.note .close{
	float: right;
	}
	
.closedNote{
	border: 1px solid #f7f8f9;
	/* background: none; */
	background: #FFF;
	border-bottom: 1px solid #cccccc;
	padding: 20px 20px 0 20px;
	}
	
	
.closedNote	p.noteType,
.closedNote	p.actions,
.closedNote	p span{
	display: none;
	
.closedNote p,
.closedNote	.close{
	margin: 0 !important;
	padding: 0 !important;
	}
	
	
/* http://positioniseverything.net/easyclearing */
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0;
	clear: both; 
	visibility: hidden;
	}

.clearfix {
	display: inline-table;
        min-height: 0;
	}