body {
    background: #d4ebf8 url(../images/blogBg1.gif) 0 0 repeat-x;
    color: #666;
    font-size: 0.66em;
    font-family: 'Trebuchet MS', helvetica, 'Lucida Grande', Arial, Sans-Serif;
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

.mainHome {
    display: block;
    float: left;
    height: 57px;
    margin: 19px 0 0;
    width: 243px;
}

.mainWrapper {
    background: #d4ebf8 url(../images/blogBgCenter1.gif) 0 0 repeat-x;
}

.main {
    margin: 0 auto;
    width: 990px;
    margin-top: 17px;
}

.logo {
    float: right;
    padding: 5px;
    text-align: right;
    width: 40%;
}

.date {
    font-size: 12px;
    color: #777;
    padding: 0 5;
}

.author {
    font-size: 12px;
    color: #777;
    font-weight: normal;
}

.post img {
    border: 1px #ccc solid;
    padding: 5;
}

a {
    color: #25aae1;
    text-decoration: none;
}

a:hover {
    color: #2c75bb;
}

h1, h2, h3, h4, h5 {
    font-family: 'Trebuchet MS', helvetica, 'Lucida Grande', Arial, Sans-Serif;
    font-weight: normal;
    line-height: normal;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 3.2em;
    line-height: 1em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    padding-top: 7px;
    font-size: 1.3em;
}

h4 {
    padding-top: 5px;
    font-size: 1.2em;
    margin: 0 0 0.5em 0;
}

h5 {
    font-size: 1.1em;
    margin: 0 0 0.3em 0;
}

p {
    font-size: 1.1em;
    margin: 0 0 1.1em 0;
}

.pagetitle {
    font-family: helvetica,'Trebuchet MS', 'Lucida Grande', Arial, Sans-Serif;
    font-size: 18px;
}

.description {
    width: 70%;
    float: right;
    font-size: 16px;
    padding-top: 8;
}

.description a {
    color: #888;
}

.feedme {
    background: transparent url(../images/feed1.gif) no-repeat scroll 0 0;
    display: block;
    float: right;
    height: 17px;
    margin-left: 9px;
    width: 15px;
}

#page {
    text-align: left;
    margin: 0 auto 0 auto;
    padding-bottom: 20px;
}

#content {
    background: #FFFFFF none repeat scroll 0 0;
    width: 990px;
}

#footer {
    background: transparent url(../images/logoFooter.gif) 10px 14px no-repeat;
    padding: 20px 0px 10px 186px;
    text-align: left;
    clear: both;
    font-family: 'Lucida Grande', Arial, Verdana, Sans-Serif;
}

#mainImage {
    border: 1px solid #ddd;
    height: 249px;
    width: 988px;
}

#mainImage ul {
    margin: 60px 0px 0px 0px;
    float: right;
    list-style: none;
}

#mainImage ul li {
    padding: 2px 0px;
    text-align: left;
}

#mainImage a {
    display: block;
    height: 24px;
    width: 330px;
}

#mainImage a.homeOne {
    height: 27px;
    margin: 0 0 59px;
}

#mainImage a.homeTwo {
    height: 27px;
    margin: 0 0 34px;
}

#mainImage a.homeThree {
    height: 24px;
}

.mainImage1 {
    background: url(../images/headerimage1.jpg) 0px 0px no-repeat;
}

.mainImage2 {
    background: url(../images/headerimage2.jpg) 0px 0px no-repeat;
}

.mainImage3 {
    background: url(../images/headerimage3.jpg) 0px 0px no-repeat;
}

.mainImage4 {
    background: url(../images/headerimage4.jpg) 0px 0px no-repeat;
}

.mainImage5 {
    background: url(../images/headerimage5.jpg) 0px 0px no-repeat;
}

.mainImage6 {
    background: url(../images/headerimage6.jpg) 0px 0px no-repeat;
}

.mainImage7 {
    background: url(../images/headerimage7.jpg) 0px 0px no-repeat;
}

.mainImage8 {
    background: url(../images/headerimage8.jpg) 0px 0px no-repeat;
}

li.page_item {
    list-style-type: none;
    list-style: none;
    height: 30px;
    color: #0462a3;
    font-size: 22px;
    font-family: helvetica;
    background: url(../images/sidebarBullet.gif) 2px 10px no-repeat;
}

#header {
    background: #FFFFFF url(../images/springitLogo.gif) no-repeat scroll 0 12px;
    height: 108px;
    margin: 17px auto 0;
    padding: 0;
    position: relative;
    width: 990px;
}

.mainNav {
    background: #FFFFFF url(../images/navBg.gif) repeat-x scroll 0 0px;
}

.mainNav ul {
    height: 49px;
    margin: 0px;
    padding: 0px;
}

.mainNav ul li {
    border-right: 1px solid #aaa;
    list-style: none;
    float: left;
    margin: 16px 0 0;
    padding-top: 5px;
    font-size: 114%;
}

.mainNav ul li a {
    color: #666666;
    display: block;
    height: 24px;
    padding-top: 4px;
    text-align: center;
}

.mainNav ul li.a a {
    width: 140px;
}

.mainNav ul li.b a {
    width: 106px;
}

.mainNav ul li.c a {
    width: 97px;
}

.mainNav ul li.d a {
    width: 100px;
}

.mainNav ul li.e a {
    width: 83px;
}

.mainNav ul li.extra {
    border-right: medium none;
    float: right;
    font-size: 177%;
    margin: 11px 0 0;
    padding: 0 0 0;
    text-align: left;
    width: 319px;
}

.mainNav ul li.extra a {
    width: 153px;
    text-align: left;
}

.mainNav ul li.active {
    background-color: #fff;
}

.mainNav ul li a.signup {
    display: inline;
    float: right;
    margin-right: 55px;
    padding-top: 0;
    width: auto;
}

.colWrapper {
    clear: both;
    padding-left: 22px;
    padding-bottom: 50px;
    min-height: 400px;
}

.colWrapper ul {
    font-size: 12px;
    margin: 0px;
    padding: 0px 40px 0px 15px;
}

.colWrapper ul li {
    padding: 8px 0px 0px;
    list-style: disc;
}

.colWrapper h2 {
    color: #7e0b59;
    padding: 0px 0px 5px 0px;
}

.col12 {
    padding: 14px 0px 14px;
    width: 60%;
}

.col12a {
    clear: both;
    padding: 14px 0px 14px;
    width: 63%;
}

.col12 p,
.col12a p {
    padding: 0px;
}

.col1,
.col2,
.col3 {
    float: left;
    width: 33%;
}


#home.col2{
    width: 30%;
}


.col1a {
    float: left;
    width: 66%;
}

.col3.springit h2 {
    color: #7e0b59;
    border-bottom: 1px solid #ddd;
}

.col3.springit ul li,
.colWrapper ul li a.springit {
    list-style-image: url(../images/springitIcon.gif);
    padding-top: 3px;
    margin-left: 7px;
}

.colWrapper ul li.springit {
    font-size: 12px;
}

.mainNav ul li a:hover {
    color: #000;
}

.navigation {
    margin: 0 0 1.6em 0;
    padding: 0 0 1px 0;
    font-family: 'Lucida Grande', Arial, Verdana, Sans-Serif;
    font-size: 1.2em;
}

.colWrapper .advice ul li {
    list-style-image: url(../images/adviceIcon.gif);
    margin-left: 3px;
    padding-top: 2px;
}

#homeBg.colWrapper {
  /*--  background: url(../images/headerimage1Side.jpg) top right no-repeat; --*/
}

.viewDemoLink {
    float: right;
    height: 30px;
    width: 60px;
    padding-right: 172px;
}

.viewDemoLink a {
    display: block;
    height: 78px;
    margin-top: 325px;
    width: 79px;
}

.nlist ul {
    padding-left: 0px;
    padding-bottom: 15px;
}

.colWrapper ul li.nlist {
    padding-left: 0px;
    list-style: none;
    padding-top: 7px;
}

.colWrapper ul li.nlist2 {
    padding-left: 0px;
    list-style: none;
    padding-top: 7px;
    padding-bottom: 17px;
}

.nlist ul li {
    list-style-type: none;
}

.callout {
    padding: 5px 10px;
    background-color: #eee;
    border: 1px solid #ddd;
}

.callout p {
    margin-bottom: 0px;
}

/*	Horrible hack to try to stop IE6 overflowing on long lines in pre elements.

	IE needs a width to turn on overflow, but 100% here with padding leads to the

	overflow scroller itself causing the entry to overflow in turn. Nasty.

	So this just truncates the pre block. Also nasty, but slightly less ugly.

	(The * html prefix selects IE out of all browsers as its the only one to think

	there is a super-element surrounding the html one) */

* html pre {
    width: 30em;
}

acronym, abbr, span.caps {
    font-size: 1em;
    letter-spacing: .08em;
    cursor: help;
}

acronym, abbr {
    border-bottom: 0.2em solid #ddd;
}

blockquote {
    margin: 1.6em 2.8em 0 1.4em;
    padding: 0 0 0 2em;
    border-left: 0.6em solid #ddd;
}

strong, b {
    font-weight: bold;
}

em, i {
    font-style: italic;
}

.clearboth {
    clear: both;
}

#footer ul {
    margin: 0px;
    padding: 0px;
}

#footer p {
    font-size: .946em;
}

#footer ul li {
    height: 19px;
    background: none;
    font-size: 10px;
    padding: 0px 10px 0px 0px;
    float: left;
}

#footer ul li a {
    color: 2fb8fc;
}

#footer p.clearboth {
    color: #999;
}

#footer p.clearboth a {
    color: #aaa;
}

.widget_pages h2 {
    display: none;
}

input {
    font-family: "Segoe UI", Frutiger, Tahoma, "Helvetica", "Helvetica Neue", Arial, sans-serif;
    border: 1px #999 solid;
}

.button {
    cursor: pointer;
}

.hform .label, .hform input, .hform select {
    margin-right: 5px;
}

/* login screen */

.login {
    margin: 30px 0 0 0;
    width: 500px;
}

.login .notebook-page {
    position: relative;
    top: 0px;
    left: 0px;
    background-color: #efefef;
    border: 1px #bbb solid;
    padding: 3px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    margin-top: 10px;
}

.login .page {
    background-color: #fff;
    border: 1px #bbb solid;
    padding: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.login input {
    border: 1px #ccc solid;
    color: #555;
    font-weight: normal;
    padding: 5px 0 5px 3px;
    font-size: 1.3em;
}

.login .submit {
    background-color: #8eb5ce;
    color: #fff;
    font-size: 1.3em;
    cursor: pointer;
    border-bottom: 2px #aba9a7 solid;
    border-right: 1px #aba9a7 solid;
    border-top: 1px #bcd4e1 solid;
    border-left: 1px #bcd4e1 solid;
    background-image: url( http://springpad.s3.amazonaws.com/images/submit-bg.png );
    background-repeat: repeat-x;
    background-position: center;
    padding: 5px;
}

.login .cancel {
    background-color: #8eb5ce;
    color: #555;
    font-size: 1.3em;
    cursor: pointer;
    border-bottom: 2px #aba9a7 solid;
    border-right: 1px #aba9a7 solid;
    border-top: 1px #bcd4e1 solid;
    border-left: 1px #bcd4e1 solid;
    background-image: url( http://springpad.s3.amazonaws.com/images/login-cancel-bg.png );
    background-repeat: repeat-x;
    background-position: center;
    padding: 5px;
    text-decoration: none;
}

.login .page-bottom {
    min-height: 35px;
    background-image: url( http://springpad.s3.amazonaws.com/images/login-bg.png );
    background-repeat: no-repeat;
    background-position: top;
}

.login .logo {
    text-align: center;
    padding-left: 10px;
}

.login td.label {
    text-align: right;
}

.login .errors {
    color: #990000;
}

.login .heading {
    color: #71c000;
    padding: 0 0 10px 0;
}

.login .action-section {
    text-align: center;
}

select {
    border: 1px #555 solid;
}

/* jqModal base Styling courtesy of;
  Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
  the Window's z-index value will be set to 3000 by default (in jqModal.js). You
  can change this value by either;
    a) supplying one via CSS
    b) passing the "zIndex" parameter. E.g.  (window).jqm({zIndex: 500}); */

.jqmWindow {
    display: none;
    position: fixed;
    top: 17%;
    left: 50%;
    margin-left: -300px;
    width: 600px;
    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay {
    background-color: #000;
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */

* html .jqmWindow {
    position: absolute;
    top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}

/*---TEMPLATE CSS ----*/

#template.red {
    background: #f17f90 url(../images/blogBgCenter1Red.gif) repeat-x scroll 0 0;
}

#template.yellow {
    background: #faf79f url(../images/blogBgCenter1Yellow.gif) repeat-x scroll 0 0;
}

#template #header {
    background: #FFFFFF url(../images/poweredby.gif) no-repeat scroll 29px 69px;
    height: 99px;
    margin: 17px auto 0;
    padding: 0;
    position: relative;
    width: 990px;
}

#header h1 {
    font-size: 2.8em;
    float: left;
    font-family: 'helvetica',Arial,Verdana,Sans-Serif;
    padding-left: 23px;
    padding-top: 36px;
}

#template.red #header h1 {
    color: #BF1E2D;
}

#template.yellow #header h1 {
    color: #DE7D26;
}

#template #mainImage {
    border: none;
    height: 622px;
    width: 990px;
}

.thanksgiving {
    background: url(../images/templateMainThanksgiving.jpg) 0px 0px no-repeat;
}

.planner {
    background: url(../images/templateMainPlanner.jpg) 0px 0px no-repeat;
}

#template #mainImage ul {
    height: 199px;
    margin-top: 70px;
}

#template #mainImage ul.bottom {
    float: right;
    clear: right;
    list-style: none;
    margin: 3px 0px 0px 0px;
    padding: 0;
    width: 980px;
}

#template #mainImage ul.bottom li {
    padding: 2px 0px;
    text-align: left;
    margin-left: 613px;
}

#template #mainImage ul.features {
    list-style-image: url(../images/arrow.png);
    list-style-position: 0px 1px;
}

#template a,
#template #mainImage ul.bottom li {
    color: #fff;
    font-size: 14px;
}

#template li {
    color: #fff;
    font-size: 14px;
    width: 330px;
}

#template #mainImage ul li {
    color: #fff;
    font-size: 14px;
    width: 330px;
    padding: 5px 13px 0 5px;
}

.bodyYellow #template #mainImage ul li {
    color: #DE7D26;
}

.bodyYellow #template #mainImage ul.bottom li {
    color: #fff;
}

#template .logo a {
    color: #25aae1;
    font-size: 11px;
}

#template #mainImage ul.bottom li.main {
    height: 79px;
    margin-top: 5px;
}

#template #mainImage ul.bottom li.button {
    color: #FFFFFF;
    font-size: 14px;
    margin-left: 810px;
    margin-top: 2px;
    width: 111px;
}

#template #mainImage.planner ul.bottom li.button {
    margin-left: 822px;
    margin-top: 66px;
    width: 111px;
}

#template #mainImage ul.bottom li.button a {
    width: 111px;
}

#template #mainImage ul.bottom li#leftli {
    padding: 2px 0px;
    margin: 0px;
    text-align: left;
}

#template.red #mainImage ul.bottom li#leftli.left1 {
    margin-top: 116px;
    color: #BF1E2D;
    font-size: 17px;
    width: auto;
}

#template.yellow #mainImage ul.bottom li#leftli.left1 {
    margin-top: 116px;
    color: #DE7D26;
    font-size: 17px;
    width: auto;
}

#template #mainImage ul.bottom li#leftli.left2 a {
    margin-top: 0px;
    color: #333;
    width: 180px;
}

#template.yellow #mainImage.planner ul.bottom li#leftli.left1 {
    margin-top: 60px;
}

body.bodyRed {
    background-color: #f17f90;
}

body.bodyYellow {
    background-color: #faf79f;
}

#externalImage {
    background-repeat: no-repeat;
    background-position: top right;
    float: right;
    height: 300px;
    width: 348px;
}

#playDemo {
	margin-top: 243px;
	z-index: 2;
}