/**
 * Main styles for Thinker Toys.
 * 
 * 
 */

/*******************************************************************************
  Base styles
 ******************************************************************************/

html { font-size: 100%; }
body { margin: 0; padding: 0; text-align: center; height: 100%; font: 62.5% "Verdana", sans-serif; background: url(../images/body.gif) 0 10px; }
a span, h1 span, h2 span { display: none; }
a:link, a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
ul { font-size: 1 em; color: #333333; color: #565753; line-height: 1 em; }
li { font-size: 1.1 em; color: #333333; color: #565753; line-height: 1.1 em; }
p { font-size: 1.4em; color: #333333; color: #565753; line-height: 1.5em; }
.clear { clear: both; }
h1.big { width: 814px; padding-bottom: 20px; font: 2.5em "Comic Sans MS", sans-serif; color: #44a461; background: url(../images/h1.gif) center bottom no-repeat; margin: 0 auto; margin-bottom: 15px; }
h2 { font-size: 1.3em; font-weight: bold; color: #4471a7; margin: 0; }


/*******************************************************************************
  Layout-related
 ******************************************************************************/

#container { width: 1033px; margin: 0 auto; background: url(../images/container.png); }
#inner_container { width: 924px; margin: 0 auto; background-color: #ffffff; }
#top { width: 100%; height: 29px; background: url(../images/top.gif); }
#heading_left { width: 347px; height: 134px; float: left; background: url(../images/heading_left.gif); }
#heading_left p { margin-top: 36px; color: #940109; font: 2.1em "Comic Sans MS", sans-serif; }
#heading_center { width: 223px; height: 134px; float: left; position: relative; background: url(../images/heading_center.gif); }
#heading_center a { display: block; position: absolute; top: 25px; left: 14px; width: 195px; height: 90px; }
#heading_right { width: 354px; height: 134px; float: left; background: url(../images/heading_right.gif); }
#heading_right p { font-family: "Comic Sans MS", sans-serif; }
#heading_right p.hours { margin-top: 34px; color: #336699; font-size: 1.7em; line-height: 1.4em; }
#heading_right p.address { color: #666666; font-size: 1.2em; margin-top: 2px; }
#nav { height: 56px; clear: both; background: url(../images/nav.gif); }
#nav ul { padding: 12px 0 0 0; margin: 0; }
#nav li { list-style-type: none; display: inline; padding: 0 20px 0 4px; background-repeat: no-repeat; background-position: right 0; }
#nav li a { font: 1.2em Verdana, sans-serif; font-weight: bold; color: #ffffff; }
#nav_toy_box { background: url(../images/nav_triangle.gif); }
#nav_getting_here { background: url(../images/nav_circle_orange.gif); }
#nav_events { background: url(../images/nav_square.gif); }
#nav_reward_cards { background: url(../images/nav_circle_red.gif); }
#nav_about_us { background: url(../images/nav_square.gif); }
#content { width: 100%; background: url(../images/content.gif); }
#footer { width: 100%; height: 103px; clear: both; background: url(../images/footer.gif) no-repeat; }
#footer p { color: #a6ceb1; margin-top: 5px; font-size: 1em; }
#footer ul { margin: 0 auto; padding: 30px 0 0 0; }
#footer li { list-style-type: none; display: inline; text-align: center; }
#footer li.last { border-right: none; }
#footer a { color: #ffffff; }

/* For non-IE/win browsers. Add a pipe as a divider. This is due to whitespace
   that gets inserted after each list element, making it difficult to use
   border-right because of spacing. */
#footer li a:after { content: " |"; }
#footer li.last a:after { content: ""; }
#footer #daylight { font-weight: bold; }


/*******************************************************************************
  Common content elements
 ******************************************************************************/

/* Three-pane devices */

.three_panes { width: 100%; background: url(../images/three_panes.gif); }
.three_panes .inner { padding-bottom: 20px; }
.three_panes_divider { width: 100%; height: 26px; background: url(../images/three_panes_divider.gif); }
.three_panes p { font-size: 1.2em; color: #868686; }
.three_panes .left { width: 210px; float: left; text-align: left; }
/* "Inner" divs are added so that IE calculates outer div widths properly. */
.three_panes .left .inner { width: 155px; padding-left: 40px; padding-right: 15px; }
.three_panes .center { width: 504px; float: left; text-align: center; }
.three_panes .center .inner { width: 454px; padding-left: 10px; padding-right: 10px; margin: 0 auto; }
.three_panes .center .divider { height: 17px; width: 459px; margin: 0 auto; margin-top: 30px; margin-bottom: 20px; background: url(../images/three_panes_center_divider.gif); }
.three_panes .center p { color: #565753; }
.three_panes .right { width: 200px; float: left; text-align: left; /*background: url(../images/home_content_right.gif);*/ }
.three_panes .right .inner { padding-left: 24px; padding-right: 20px; }
.content_divider { width: 924px; height: 30px; background: url(../images/content_divider.gif); }
.three_panes a { text-decoration: none; color: #72010b; border-bottom: 1px dashed #72010b; }


/* Two-column content layout: split into 1/3 - 2/3 */

.two_cols { margin: 0 auto; width: 800px; padding-bottom: 30px; text-align: left;}
.two_cols p { font-size: 1.2em; }
.two_cols h2 { color: #b70111; }
.two_cols h3 { color: #4471a7; }
.two_cols .left { width: 266px; float: left; }
.two_cols .inner { padding: 0 25px 20px 0; text-align: left; }
.two_cols .right { width: 532px; float: left; padding-right: 0; }
.two_cols .right .left, .two_cols .right .right { width: 266px; margin: 0; }
.two_cols .img { float: right; }
.two_cols .img p { color: #18993d; font: 1.6em "Comic Sans MS", sans-serif; text-align: center; }


/*******************************************************************************
  Page-specific
 ******************************************************************************/

/* Home page */

/* All pages that have a main image have a tiny sliver of the image included in
   the nav. I wasn't able to make a clean break between the nav and the top of
   the wavy lines without including one or the other. And I really don't want
   to mess with transparent PNGs... */
#home #nav { background: url(../images/home_nav.gif); }
#home .main_img_top { width: 924px; height: 109px; background: url(../images/home_main_img_top.jpg); }
#home .main_img_middle { width: 924px; height: 130px; background: url(../images/home_main_img_middle.jpg); }
#home .main_img_bottom { width: 924px; height: 130px; background: url(../images/home_main_img_bottom.jpg); }
#home h1 { font: 2.4em "Comic Sans MS", sans-serif; color: #44a461; width: 80%; margin: 0 auto; padding: 0; background: none; }
#home .three_panes .left { background: url(../images/home_envelope.gif) 18px 190px no-repeat; padding-top: 10px; }
#home .three_panes .left div.signuptext { padding-top: 130px; }
#home .three_panes .center p { font-size: 1.4em; }
#home a#signup { background: url(../images/signup_button.gif); display: block; width: 152px; height: 46px; border: none; margin-top: 10px; }
#home #video_tour { width: 151px; height: 102px; display: block; margin: 15px 0 0 -5px; border: none; background: url(../images/home_video_tour.gif); }
#home .three_panes .right .bottom { padding-top: 30px; background: url(../images/home_content_right_divider.gif) 0 0 no-repeat; }


/* Toy Box */

#toybox #nav { background: url(../images/toybox_nav.gif); }
#toybox .main_img_top { width: 924px; height: 109px; background: url(../images/toybox_main_img_top.jpg); }
#toybox .main_img_bottom { width: 924px; height: 124px; background: url(../images/toybox_main_img_bottom.jpg); }
#toybox #toy_links { width: 832px; margin: 0 auto; }
#toybox #toy_links .link { width: 402px; height: 59px; float: left; background: url(../images/toybox_rectangle.gif); margin: 0 27px 8px 0; text-align: left; }
#toybox #toy_links .right { float: right; margin-right: 0; }
#toybox #toy_links .link a { display: block; color: #11702c; font: 1.5em "Comic Sans MS", sans-serif; line-height: 58px; margin-left: 35px; /*background: url(../images/link_dot_underline.gif) 0 bottom repeat-x;*/ text-decoration: none; }
#toybox #toy_links #playmobil { background: url(../images/toy_link_playmobil.gif); }
#toybox #toy_links #bruder { background: url(../images/toy_link_bruder.gif); }
#toybox #toy_links #melissa { background: url(../images/toy_link_melissa.gif); }
#toybox #toy_links #haba { background: url(../images/toy_link_haba.gif); }
#toybox #toy_links #webkinz { background: url(../images/toy_link_webkinz.gif); }
#toybox #toy_links #ravensburger { background: url(../images/toy_link_ravensburger.gif); }
#toybox #content { padding-bottom: 20px; }


/* Toy Box Detail */

#toybox_detail { text-align: left; padding-bottom: 20px; }
#toybox_detail p { font-size: 1.2em; }
#toybox_detail h1 { color: #bc0112; font-size: 1.8em; margin-bottom: 10px; }
#toybox_detail .left { float: left; width: 520px; }
#toybox_detail .left .inner { padding: 0 20px 0 50px; }
#toybox_detail .right { float: left; width: 400px; }
#toybox_detail .right .inner { padding: 0 20px 0 10px; }
#playmobil #nav { background: url(../images/playmobil_nav.gif); }
#playmobil .main_img_top { width: 924px; height: 109px; background: url(../images/playmobil_main_img_top.jpg); }
#playmobil .main_img_bottom { width: 924px; height: 124px; background: url(../images/playmobil_main_img_bottom.jpg); }

#ravensburger #nav { background: url(../images/playmobil_nav.gif); }
#ravensburger .main_img_top { width: 924px; height: 109px; background: url(../images/ravensburger_main_img_top.jpg); }
#ravensburger .main_img_bottom { width: 924px; height: 124px; background: url(../images/ravensburger_main_img_bottom.jpg); }

#melissa_doug #nav { background: url(../images/playmobil_nav.gif); }
#melissa_doug .main_img_top { width: 924px; height: 109px; background: url(../images/melissa_doug_main_img_top.jpg); }
#melissa_doug .main_img_bottom { width: 924px; height: 124px; background: url(../images/melissa_doug_main_img_bottom.jpg); }

#webkinz #nav { background: url(../images/playmobil_nav.gif); }
#webkinz .main_img_top { width: 924px; height: 109px; background: url(../images/webkinz_main_img_top.jpg); }
#webkinz .main_img_bottom { width: 924px; height: 124px; background: url(../images/webkinz_main_img_bottom.jpg); }

#haba #nav { background: url(../images/playmobil_nav.gif); }
#haba .main_img_top { width: 924px; height: 109px; background: url(../images/haba_main_img_top.jpg); }
#haba .main_img_bottom { width: 924px; height: 124px; background: url(../images/haba_main_img_bottom.jpg); }

#bruder #nav { background: url(../images/playmobil_nav.gif); }
#bruder .main_img_top { width: 924px; height: 109px; background: url(../images/bruder_main_img_top.jpg); }
#bruder .main_img_bottom { width: 924px; height: 124px; background: url(../images/bruder_main_img_bottom.jpg); }


/* Getting here */

#getting_here #directions { background: url(../images/map_button.gif); display: block; width: 152px; height: 46px; border: none; margin-top: 20px; }


/* Subcontent */

#subcontent .center h2 { color: #990000; font: 1.8em "Comic Sans MS", sans-serif; }