/* This is new style sheet for MyAstrology.net, based on OCA style     */
/*  sheets oca_new.css and oca_new_home.css.                           */
/* New, 02/21/09                                                       */

/* 12/21/09: Use this style sheet on pages which do not have a         */
/*  leaderboard. Use astrology_leader.css on pages which do have one.  */

/* Updated: 01/03/10                                                   */


/* 02/21/09: Dark blue color:  #1A58A7   */
/* 02/21/09: Light blue color: #DDE7F2   */



BODY {
  background-color: #FFFFFF;
  color: #000000;
  font-family: verdana, arial, helvetica, sans-serif;
  font-style: normal;
  margin: 20px;
  width: 945px;
}


P, UL, LI, TD, DIV {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
}


A:link {            /* unvisited link */
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  color: #1A58A7;
}

A:visited {         /* visited link */
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  color: #1A58A7;
}

A:active {          /* active link */
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  color: #FF0000;   /* was #04A604 */
}

A:hover {           /* hover link */
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  color: #FF0000;   /* was #04A604 */
}

/* the following are for links in the menu column, */
/* which need to be different from the main page   */
/* links, or else they disappear.                  */
/*    02/03/07: We still need these for certain pages, even though we    */
/*     are no longer using them for the actual menu.                     */
/*   02/21/09: Modifying for ed's astrology, to use on dark blue         */

A.menu:link {       /* unvisited */
  color: #FFFFFF;
}

A.menu:visited {    /* visited */
  color: #FFFFFF;
}

A.menu:active {     /* active */
  color: #FFFF00;
}

A.menu:hover {      /* hover */
  color: #FFFF00;
}


/* General classes */
/*  02/03/07: Lose the pt font-size measurements when you are sure everything is working right   */

.normal {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  font-weight: normal;
}

.heading {           /* this will be the same as .larger + .strong */
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 15px;
}


.smaller {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 11px;
}

.extra-small {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 10px;
}

.larger {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 15px;
}

.headline {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.extra-large {   /* and for even bigger type ... */
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 25px;
  font-weight: bold;
}

.strong {
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
}

.italic {            /* italic */
  font-family: verdana, arial, helvetica, sans-serif;
  font-style: italic;
}

.courier {           /* use Courier font for special effects (not Courier, actually, but web default */
  font-family: courier, roman, serif;
  font-size: 13px;
  font-weight: normal;
}

.bold {
  font-weight: bold;
}




.page_title {                /* to put a title on the page   */
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 15px;
  text-decoration: underline;
}


.heading_paragraph {        /* 01/03/10: this is for paragraphs inside the blue heading box - they need 0 margins at top and bottom */
  margin-top: 0px;
  margin-bottom: 0px;
}


.error {          /* use for error messages */
  padding: 8px;
  border: 1px solid #FF0000;
  background: #FFFFCC;
  font-weight: bold;
  color: #FF0000;
}





.yellow {
  color: yellow;
}

.cyan {
  color: cyan;
}

.red {
  color: red;
}

.white {
  color: white;
}

.black {
  color: black;
}



/* Now some standard features of all pages */
/* We will use id's here                   */



#toplogo {                /* main logo on the page                            */
  position: relative;     /* normal flow, coordinates are offsets from edges  */
  top: 0px;
  left: 10px;
  width: 500px;
  height: 75px;
  border: none;
}

#cartsummary {           /* shopping cart summary - top right           */
                         /* need to align this relative to the right side of the page for smaller screens  */
  position: absolute; 
  top: 20px;              /* mimic top margin                            */
/*  right: 85px;  */          /* distance of right edge from right side of page - margin is 20px  */
  left: 830px;
  height: 75px;           /* same as logo                                */
  border: none;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-align: left;
/* border: 1px solid #000000; */
}


/* two page columns - need to position them absolutely, at least for now */
/*  allow about 150 pixels at the top of the page for logo and menu      */


#leftcolumn {            /* left-hand column of the page     */
 position: absolute;
 left: 20px;
 top: 150px;
 width: 205px;
 padding: 3px;
}

#rightcolumn {          /* right-hand column of the page     */
 position: absolute;
 left: 250px;
 top: 150px;
 padding: 3px;
}




/* it appears we can't get the sidebar headlines to work in here, so        */
/* we are going to set their style inline via the routine that creates them */



/* Style for box displaying login information, when they are logged in   */
.loginbox {
  border: 1px solid;
  background: #99CCCC;
}




/* Redoing the columns for the home page, so as to put three of them */
/*  instead of just two (as on the other pages).                     */
/* We leave 150 pixels at the top for the logo, etc.                 */
/* 02/21/09: For astrology: Use these on three-column pages, and use */
/*  the two-column setup (above) on two-column pages.                */

#homeleftcolumn {            /* left-hand column of the page     */
 position: absolute;
 left: 20px;
 top: 150px;
 width: 200px;
 padding: 3px;
}

#homecentercolumn {         /* center column of page             */
 position: absolute;
 left: 235px;
 top: 150px;
 width: 520px;
 padding: 3px;
}

#homerightcolumn {          /* right-hand column of the page     */
 position: absolute;
 left: 790px;
 top: 150px;
 width: 205px;
 padding: 3px;
}

#widerightcolumn {          /* for pages (like ephemeris display) where we only have a left sidebar */
 position: absolute;
 left: 235px;
 top: 150px;
 width: 725px;
 padding: 3px;
}

#fullpagecolumn {           /* 12/26/09: Google search needs 800px+, so we are going to use this  */
 position: absolute;
 left: 20px;
 top: 150px;
 width: 995px;
 padding: 3px;
}



#copyright {                /* copyright notice - to go in center and right columns */
 position: relative;
 padding: 3px;
}






#storepagetext {            /* page text for amazon store     */
 position: absolute;
 left: 0px;
 top: 150px;
 width: 800px;
 padding: 0px;
/* border: 1px solid #000000; */
}



#storerightcolumn {         /* right column for amazon store */
 position: absolute;        /* width is sum of homecentercolumn and homerightcolumn  */
 left: 805px;
 top: 150px;
 width: 170px;
 padding: 0px;
  margin-left: 0px;
/* border: 1px solid #000000; */
}







/* This is basically the same as the sidebar headlines, just making it a generic div class to use for */
/*  each little section in the sidebar.  */
.sidesection {
 width: 175px;
 background: #DDE7F2;
 border: 1px solid #1A58A7;
 padding: 5px;
 margin-top: 10px;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 11px;
 font-weight: bold;
 text-align: left;
}



/* 02/21/09: For doing curved corners on the boxes.     */
/*  This is going to be a modification of (replacement  */
/*  for) .sidesection.                                  */
/* 06/17/09: Changing width here to 185px, because retrograde positions don't fit too well...  */

.box-t {
  background: url(http://www.myastrology.net/images/dot.jpg) 0 0 repeat-x #DDE7F2;
  width: 185px;
  margin-top: 10px;
}


.storebox-t {              /* new variety of side section for amazon store, to hold search widget */
  background: url(http://www.myastrology.net/images/dot.jpg) 0 0 repeat-x #DDE7F2;
  width: 175px;
  margin-top: 25px;
}


.centercolumn-t {          /* to put a border around the center column of a page */
  background: url(http://www.myastrology.net/images/dot.jpg) 0 0 repeat-x #DDE7F2;
  width: 520px;
  margin-top: 10px;
}


.box-b {
  background: url(http://www.myastrology.net/images/dot.jpg) 0 100% repeat-x;
}

.box-l {
  background: url(http://www.myastrology.net/images/dot.jpg) 0 0 repeat-y;
}

.box-r {
  background: url(http://www.myastrology.net/images/dot.jpg) 100% 0 repeat-y;
}

.box-bl {
  background: url(http://www.myastrology.net/images/bl.jpg) 0 100% no-repeat;
}

.box-br {
  background: url(http://www.myastrology.net/images/br.jpg) 100% 100% no-repeat;
}

.box-tl {
  background: url(http://www.myastrology.net/images/tl.jpg) 0 0 no-repeat;
}

.box-tr {
  background: url(http://www.myastrology.net/images/tr.jpg) 100% 0 no-repeat;
  padding: 10px;
} 


.box-headline {
   width: 150px;
   background: #DDE7F2;
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 11px;
   font-weight: bold;
   text-align: center;
}


.box-headline-left {
   width: 150px;
   background: #DDE7F2;
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 11px;
   font-weight: bold;
   text-align: left;
}


.storebox-headline {
   width: 125px;
   background: #DDE7F2;
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 11px;
   font-weight: bold;
   text-align: center;
}



.box-text {
   width: 150px;
   background: #DDE7F2;
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 11px;
   font-weight: normal;
   text-align: left;
}

/* 06/17/09: This is new, actually it is .box-text, but with width of 165px and font size of 10px.  */
/*  Used only for planet positions, so as to fit them in better when there are retrogrades.         */
.planetbox-text {
   width: 165px;
   background: #DDE7F2;
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 10px;
   font-weight: normal;
   text-align: left;
}

.storebox-text {
   width: 125px;
   background: #DDE7F2;
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 11px;
   font-weight: normal;
   text-align: left;
}



/* align text left (with right on same line) */
.alignleft {
  float: left;
}

/* align text right (with left on same line) */
.alignright {
  float: right;
}


/* 02/21/09: For the three sections of the lunar aspects box  */
.todays_lunar_top {              /* heading bar  */
                                 /* for left and right corners, you can just use .box-tl and .box-tr  */
  background: url(http://www.myastrology.net/images/dot.jpg) 0 0 repeat-x #1A58A7;
  width: 500px;
  margin-top: 10px;
  margin-bottom: 0px;

  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 13px;
}

.todays_lunar_text {            /* main part of box */
  width: 500px;
  background: #DDE7F2;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 5px;

  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  font-weight: normal;
  text-align: left;
}

.todays_lunar_bottom {           /* footer bar  */
                                 /* for left and right corners, you can just use .box-bl and .box-br  */
  background: url(http://www.myastrology.net/images/dot.jpg) 0 100% repeat-x #1A58A7;
  width: 500px;
  margin-top: 0px;
  margin-bottom: 10px;
  padding: 5px;

  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 10px;
}

.todays_lunar_tl {
  background: url(http://www.myastrology.net/images/tl_lunar.jpg) 0 0 no-repeat;
}

.todays_lunar_tr {
  background: url(http://www.myastrology.net/images/tr_lunar.jpg) 100% 0 no-repeat;
  padding: 10px;
}