/*---------------------- reset html styles -----------------------
------------------------------------------------------------------*/

/*reset margins and padding*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, tt, table, tr, td { margin:0; padding:0; }

/* Remove borders */
table { border-collapse:collapse; border-spacing:0; }
fieldset, img {border:0; }
abbr, acronym {border:0; }
label {border: 0 !important;}

/* Remove border around linked images */
img {border: 0;}
iframe {border:0;}

/* Reset font-size and -weight */
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal}
h1, h2, h3, h4, h5, h6 { font-size:1em; font-weight:normal; }
p, blockquote, big { font-size: 1em; }

/* Remove styling from all list items */
ol, ul, li { list-style:none; margin: 0px; padding: 0px; }

/*---------------------- start Foundation styles ------------------------
------------------------------------------------------------------*/
body { margin: 0px auto; background: #E7EDEE url(../images/bkg.jpg) repeat-x; font-family: Helvetica, Arial, sans-serif; font-size:12px; color: #333; }


/*---------------------- general text styles ----------------------*/
p { font-size:13px; margin-bottom: 5px; line-height: 1.5em; }
a { color: #BE1E2D; text-decoration: none; outline: none; }
a:hover { color: #6B0006; }


/*---------------------- general layout styles ----------------------*/
.clear { clear: both; }
#wrapper { text-align: center; }


/*---------------------- header styles ----------------------*/
#header { position: relative; text-align: left; width: 940px; height: 140px; margin: 0px auto;  }
#logo { float: left; width: 170px; height: 140px; }
#logo a { display: block; width: 170px; height: 140px; background: url(../images/foundation_logo.jpg) no-repeat; }
#logo a span { display: none;}
#message { float: left; width: 225px; height: 110px; background: url(../images/foundation_bubble.gif) no-repeat; }
#message p { color: #666; font-size: 13px; line-height: 1.4em; font-family: Georgia, Times, serif; font-style: italic; text-align: center; margin: 10px auto; padding: 0px 30px; }
#message a { color: #666; border-bottom: 1px dotted #aaa; }
#message a:hover { color: #333; }
#requestDemo { position: absolute; right: 0px; top: 30px; width: 220px; height: 90px; background: url(../images/foundation_request_bkg.jpg) no-repeat; text-align: center; }
#requestDemo p { color: #888; font-family: Verdana, san-serif; font-size: 11px; text-align: center; padding: 15px 0px 5px 0px;  }
#requestDemoBtn { margin: 0px 20px; }
#requestDemoBtn a { display: block; width: 180px; height: 35px; background: url(../images/contactus_btn.gif) no-repeat;  }
#requestDemoBtn a:hover { background-position: -180px 0px;  }
#requestDemoBtn a span { display: none; }

/*---------------------- topNav styles ----------------------*/
#topNav { text-align: left; width: 940px; height: 140px; margin: 0px auto; height: 40px;  }
#topNav li { float: left; }
#topNav li a { color: #fff; font-weight: bold; font-size: 14px; line-height: 32px; display: block; height: 40px; padding: 0px 20px; margin-right: 1px; background: url(../images/topNav_bkg.jpg) no-repeat top center; }
#topNav li a:hover { background-position: center center; cursor: pointer; }
#topNav li a.active { background-position: bottom center; cursor: default;  }

/*---------------------- Content styles ----------------------*/
#topContent  { text-align: left; width: 960px; margin: 0px auto; color: #fff; }
#botContentBkg { background: #E7EDEE url(../images/bkg_content.jpg) repeat-x; }
#botContent { text-align: left; width: 960px; margin: 0px auto; padding-top: 10px; }


/*---------------------- Home styles ----------------------*/
#homeHead { float: left; width: 380px; margin-top: 20px; margin-left: 10px; }
#homeHead h2 { font-size: 26px; line-height: 1.3em; margin-bottom: 10px }
#homeHead p { text-align: right; font-family: Georgia, serif; font-style: italic; font-size: 16px;}
#homeHead a { color: #6B0006 }
#homeHead a:hover { border-bottom: 1px dotted #6B0006; }
#homeGallery { float: left; width: 560px; height: 350px; margin-left: 10px; background: url(../images/slideshow_bkg.jpg) no-repeat; }
#homeGallery a { cursor: pointer; }
#contentHome { text-align: left; width: 960px; margin: 0px auto; }
#contentHome h3.subHead { font-size: 16px; margin-left: 10px;}
#contentHome h3.subHead span { font-family: Georgia, serif; font-size: 27px; font-style: italic; }
#homeScreenshots { margin-top: 20px;}
.examples { float: left; width: 220px; margin: 0px 10px;}
.screenshotQuote { font-size: 12px; font-family: Georgia, serif; font-style: italic; margin-top: 10px; }
.screenshotSource { font-size: 12px; font-style: italic; text-align: right; }
p.showcaseLink { margin: 10px; margin-top: 25px;}

/* slideshow */
#loader { background-color: white; display: inline; float: left; height: 330px; overflow: hidden; margin: 10px; width: 540px; position: relative; text-align: center; }
#loader img { width: 540px; height: 330px; }
.loading { background: url( '../images/loadingIcon.gif' ) no-repeat 50% 50%; height: 100%; width: 100%; z-index:10; }


/*---------------------- Features styles ----------------------*/
#featuresHead { float: left; width: 380px; margin: 10px 0px 20px 10px; }
#featuresHead h2 { font-size: 28px; line-height: 1.3em; font-weight: bold; margin-bottom: 5px }
#featuresHighlight { float: left; margin-left: 100px; width: 380px; }
#featuresHighlight ul { margin: 30px 0px 20px 20px; }
#featuresHighlight li { font-size: 18px; line-height: 1.3em; margin-bottom: 10px; list-style: outside url(../images/bullet_red.png); }
.featuresList { width: 300px; float: left; margin: 10px; }
.featuresList h3{ font-family: Georgia, serif; font-size: 24px; font-style: italic; border-bottom: 1px solid #666; padding-bottom: 5px; margin-bottom: 15px; margin-top: 15px; }
.featuresList h4 { margin: 10px 0px 0px 0px; font-weight: bold; font-size: 14px; line-height: 1.3em; }
.featuresList h4.modules { margin: 10px 0px 0px 0px; font-weight: normal;  }
.featuresList ul { margin: 5px 0px 15px 0px; }
.featuresList li { margin-left: 20px; list-style: disc; margin-bottom: 8px; line-height: 1.3em; }
.featuresList .featureButton {
  background: url("/publishwithfoundation/images/plus.gif") no-repeat 280px center #ABC;
  border-bottom: 1px solid #CCC;
  padding: 5px 20px 5px 5px;
  color: #333;
  margin: 0;
  cursor: pointer;
  }
  .featuresList .featureButton:hover {
    color: #000;
  }
.featuresList .featureButton.vis {
  background: url("/publishwithfoundation/images/minus.gif") no-repeat 280px center #789;
  color: #FFF;
}
.featuresList .featureToggle {
  background: #CCCCD1;
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}
.featuresList ul li ul li {
  list-style-type: circle;
}

/*---------------------- Add Ons styles ----------------------*/
#addonsHead { float: left; width: 380px; margin: 10px 0px 20px 10px; }
#addonsHead h2 { font-size: 28px; line-height: 1.3em; font-weight: bold; margin-bottom: 5px }
#addonsHighlight { float: left; margin-left: 100px; width: 380px; }
#addonsHighlight ul { margin: 30px 0px 20px 20px; }
#addonsHighlight li { font-size: 18px; line-height: 1.3em; margin-bottom: 10px; list-style: outside url(../images/bullet_red.png); }
#addonsHighlight li small { font-size:12px; }
#addonsHighlight li a, #addonsHead a { color: #fff; border-bottom: 1px dotted #aaa; }
#addonsHighlight li a:hover, #addonsHead a:hover { border-color: #fff; }
.addon { margin: 10px; clear:both; }
.addon h3{ font-family: Georgia, serif; font-size: 24px; font-style: italic; border-bottom: 1px solid #666; padding-bottom: 5px; margin-bottom: 15px; margin-top: 15px; }
.addon h4 { margin: 10px 0px 0px 0px; font-weight: bold; font-size: 14px; line-height: 1.3em; }
.addon h4.modules { margin: 10px 0px 0px 0px; font-weight: normal;  }
.addon ul { margin: 5px 0px 15px 0px; }
.addon li { margin-left: 20px; list-style: disc; margin-bottom: 8px; line-height: 1.3em; }


/*---------------------- Showcase styles ----------------------*/
#showcaseHead { float: left; width: 380px; margin: 10px 0px 20px 10px; }
#showcaseHead h2 { font-size: 28px; line-height: 1.3em; font-weight: bold; margin-bottom: 5px }
#showcaseQuote { float: left; margin-left: 100px; margin-top: 30px; width: 380px; }
#showcaseQuote p.quote { font-family: Georgia, serif; font-style: italic; font-size: 18px; }
#showcaseQuote p.source { text-align: right; margin-bottom: 20px; font-style: italic; }
#showcaseQuote a { color: #6B0006 }
#showcaseQuote a:hover { border-bottom: 1px dotted #6B0006; }
#showcaseLogos, #showcaseScreens { margin: 20px 10px; padding: 10px; background: #f3f6f7; text-align: center; }
#showcaseScreens { float: left; }
#showcaseLogos img { margin: 10px; width: 130px; height: 50px; }
#showcaseScreens a { display: block; float: left; margin: 8px; padding: 5px; background-color: #778899; 
  -moz-border-radius:10px 10px 0 0; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; border-radius: 10px 10px 0 0; 
  font-size: 1.7em; color: #FFF; text-align: center; }
#showcaseScreens a span.siteInfo { font-size: 12px; }
#showcaseScreens a:hover { background-color: #BE1E2D;}
#showcaseScreens img { width: 275px; height: 176px; margin: 0; border: 2px solid #456; }
#showcaseScreens span.siteInfo { color: #eee; font-size: 12px; }

/*---------------------- Team styles ----------------------*/
#teamHead { margin: 10px 0px 20px 10px; }
#teamHead h2 { font-size: 28px; line-height: 1.3em; font-weight: bold; margin-bottom: 5px }
#teamHead p { width: 700px;}
#teamManagement h3, #teamDevelopers h3 { font-family: Georgia, serif; font-size: 24px; font-style: italic; border-bottom: 1px solid #666; padding-bottom: 5px; margin: 15px 10px; }
.teamMember { float: left; margin: 10px; width: 460px; }
.teamMember img { float: left; margin: 0px 20px 20px 0px; }
.teamMember h4 { font-size: 18px; font-weight: bold; }

/*---------------------- Contact styles ----------------------*/
#contactHead { margin: 10px 0px 20px 10px; }
#contactHead h2 { font-size: 28px; line-height: 1.4em; font-weight: bold; margin-bottom: 5px }
#contactText { float: left; width: 300px; margin: 20px 10px;}
#contactText p { font-size: 20px; margin-bottom: 15px; }
#contactForm { float: left; width: 620px; margin: 20px 10px; background: #fff; }
#contactForm form { margin: 20px; }
#contactForm .text { width: 300px; margin: 3px 0px 20px 0px; font-family: Helvetica, Arial, san-serif; font-size: 15px; padding: 5px; border: 1px solid #aaa; }
#contactForm .text:focus { background: #fff; }
#contactForm select { margin: 3px 0px; }
#contactForm textarea { width: 566px; height: 150px; margin: 3px 0px 20px 0px; font-family: Helvetica, Arial, san-serif; font-size: 15px; padding: 5px; border: 1px solid #aaa; }
#contactForm .submit { cursor: pointer; width: 80px; }
#reservation { padding: 15px; margin-bottom: 20px; border: 1px solid #aaa; background: #d8e0e2 url(../images/reservation_bkg.jpg) repeat-x;  }
#contactForm .error { border: 1px solid #BE1E2D; background: #FFD4D7; }
#contactForm .errorText { color: #BE1E2D; font-size: 11px; padding-left: 5px;  }
.thanks { height: 300px; padding: 20px 0px; }
.thanks h3 { padding: 0px 20px 10px 20px; font-size: 24px; }


/*---------------------- Footer styles ----------------------*/
#footer { width: 940px; margin: 0px auto; margin-top: 40px; border-top: 1px solid #ccc; }
#footer p { color: #888; font-family: Verdana, san-serif; font-size: 11px; padding: 10px 0px; }
#footer a { color: #888; border-bottom: 1px dotted #888; }
#footer a:hover { color: #333; }