/* The following styles are combination of styles from the following css files on the live site: */
/*
/site/css/layout.css
/site/css/common.css
/products/css/products.css
/products/filemaker-pro/css/fmp.css
*/
/*-------------------------------------------------*/

/* Full width class */
body.full #lower-area                 { width: 100%; }
body.full #right-col                  { display: block; }

/* #main { background-image: url(/global_images/site/bg_body_top.png) !important; }*/

/* GENERAL */
/*-------------------------------------------------*/

#lower-area h2                        { color: #222 !important; letter-spacing: -.04em; }
#lower-area h2, 
#lower-area h3, #lower-area h4, 
#lower-area h5, #lower-area h6        { font-family: "Lucida Grande", Helvetica, Arial, sans-serif; }
#lower-area h3                        { color: #222; font-weight: bold; font-size: 130%; }
#lower-area h4                        { font-weight: bold; font-size: 120%; }
.intro                                { color: #8c8c8c; font-size: 125%; }
.intro.intro-main                     { color: #333; font: normal 120%/150% "Lucida Grande", Helvetica, Arial, sans-serif; }
#buy-box h4                           { font-size: 120%; }

img.before                            { float: left; margin: 5px 30px 0 0; }
img.after                             { float: right; margin: 5px 0 0 30px; }
#lower-area .left                     { float: left; margin: 0 20px 10px 0; }
#lower-area .right                    { float: right; margin: 0 0 10px 20px; }

h2.topmost                            { margin-bottom: 3px !important; }

#sub-header h2                        { font-size: 210%; margin-top: 26px; }

#lower-area .button-gray              { display: inline; }

.callout                              { background: #eee; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border: 1px solid #ddd; padding: 20px; }
.callout                              { background: url(/global_images/fm11/fmp/bg_overview_callout.png) repeat-x 0 0; }

/* SUB-NAV */
/*-------------------------*/

#sub-header                           { height: 72px; }
#sub-header h2                        { margin-top: 26px; font: normal 170% "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 32px 0 0 20px; float: left; }
#sub-nav                              { float: right; margin-top: 40px; margin-right: 15px; }
#sub-nav li                           { float: left; font-size: 90%; }
#sub-nav a                            { text-decoration: none; padding: 5px 10px; font-size: 1.1em; }
  #sub-nav a:link                       { color: #616161; }
  #sub-nav a:visited                    { color: #616161; }
  #sub-nav a:hover                      { color: #06f; }
  #sub-nav a:active                     { color: #616161; }
  #sub-header h2 a:link                 { color: #333; }
  #sub-header h2 a:visited              { color: #333; }
  #sub-header h2 a:hover                { color: #06f; text-decoration: none; }
  #sub-header h2 a:active               { color: #333; }
#sub-nav li.selected a                { color: #000; }

/* Lists */
/*-------------------------*/

#lower-area ul.bulleted, 
#lower-area ol                        { margin: 0 0 10px 25px; }
#lower-area ul.bulleted li            { list-style: disc; }
#lower-area ul.bulleted ul            { margin-left: 15px; }

#lower-area ul.link-list              { margin: 0 0 10px 18px; }
#lower-area ul.link-list li a         { padding-left: 8px; background: url(/global_images/fm11/buttons/arrow_blue_right.gif) no-repeat 0 4px; }
#lower-area ul.link-list.jump li a    { padding-left: 12px; background: url(/global_images/fm11/buttons/arrow_blue_down.gif) no-repeat 0 6px; }

#lower-area ul.indent                 { margin-left: 25px; }

/* Columns */
/*-------------------------*/

.oftwo                                { width: 45%; float: left; padding-right: 10px; }

/* More Info (at the bottom of some pages) */
/*-------------------------------------------------*/
.more-info													  { margin-top: 30px; padding-top: 20px; border-top: 1px solid #ddd; background: url(/global_images/fm11/fmp/icon_learnmore.png) no-repeat 0 20px; }
.more-info h3, 
.more-info p 													{ margin-left: 70px !important; }
.more-info ul 												{ margin-left: 90px !important; }


/* Bottom Callout */
/*-------------------------------------------------*/
#callout-bottom                           { margin: 25px 0; padding-top: 10px; background: url(/products/filemaker-pro/images/bg_bottom_callout_top.png) no-repeat 0 0; }
.callout-bottom-wrapper                   { padding: 0 20px 0 20px; background: url(/products/filemaker-pro/images/bg_bottom_callout_bottom.png) no-repeat 0 100%; }
#callout-bottom .offour                   { margin-top: 10px; padding: 0 10px; width: 225px; float: left; text-align: center; }
#callout-bottom .firstcolumn              { padding-left: 0;  }
#callout-bottom .lastcolumn               { padding-right: 0; }
#callout-bottom h3                        { margin-bottom: 5px; color: #333; font: bold 120% 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; }
#callout-bottom h3 a                      { color: #333; text-decoration: none; }
#callout-bottom p                         { margin: 5px 0; color: #616161; line-height: 130%; }


/* Expandable Blue Button (from common.css) */
/*------------------------------------------*/

.button, .button span                 { background: url(/site/images/buttons/bg_button_blue_left.png) no-repeat 0 0; padding: 8px 0 8px 0; font-size: 11px; }
.button span                          { margin-left: 13px; height: 30px; background: url(/images/buttons/bg_button_blue_right.png) no-repeat 100% 0; padding: 8px 20px 8px 7px; color: #fff; }
.button a                             { text-decoration: none; }
.button.red                           { background-image: url(/site/images/buttons/bg_button_red_left.png); }
.button.red span                      { background-image: url(/site/images/buttons/bg_button_red_right.png); }
.button.gray                          { background-image: url(/site/images/buttons/bg_button_gray_left.png); }
.button.gray span                     { background-image: url(/site/images/buttons/bg_button_gray_right.png); }

/* Buy Box */
/*-------------------------*/

#buy-box                              { height: 100px; padding: 10px 15px; margin-bottom: 10px; background: url(/global_images/fm12/bg_buy_now.png) repeat-x 0 0; border: 1px solid #d9cae0; }
#buy-box                              { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }
#buy-box.server                       { background-image: url(/global_images/fm12/server/bg_buy_now.png) !important; border: 1px solid #A99BCF; }
#buy-box.server a                     { color: #431ca6; }
#buy-box a                            { color: #6b0863; background-image: url(/global_images/fm12/arrow_purple_right.png); }
#buy-box img, #buy-box-server img     { float: left; }
#buy-box h4											     	{ margin: 5px 0 5px 80px; font-weight: bold; font-family: 'Lucida Grande', Helvetica, Arial, Tahoma, sans-serif; }
#buy-box p, #buy-box-server p     		{ margin: 0 0 5px 80px; font-size: 95%; }
#buy-box a, #buy-box-server a     		{ font-size: 95%; }

/* Button styling */

.button-gray                          { display: block; padding: 4px 15px; font: normal .9em "Helvetica Neue", Helvetica, Arial, sans-serif; color: #616161; text-decoration: none !important; letter-spacing: .03em;  
                                        border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } 
.button-blue, 
.button-green, 
.button-red, 
.button-purple,
.button-dpurple,
.button-bluepurp                      { padding: 5px 14px !important; font: normal 1em "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #616161; text-decoration: none !important; letter-spacing: .08em;  
                                        border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; 
                                        box-shadow: 0 0 5px #777; -moz-box-shadow: 0 0 5px #777; -webkit-box-shadow: 0 0 5px #777;
                                        text-shadow: 1px 1px 1px #333; -moz-text-shadow: 1px 1px 1px #333; -webkit-text-shadow: 1px 1px 1px #333; }
                                        
.button-purple                        { box-shadow: inset 0 1px 1px 0 #dcbbd6, 0 1px 0 0 #6e3483, 0 0 1px 1px #ccc; 
                                        -moz-box-shadow: inset 0 1px 1px 0 #dcbbd6, 0 1px 0 0 #6e3483, 0 0 1px 1px #ccc; 
                                        -webkit-box-shadow: inset 0 1px 1px 0 #dcbbd6, 0 1px 0 0 #6e3483, 0 0 1px 1px #ccc;  }
                                        
.button-dpurple                       { box-shadow: inset 0 1px 0 0 #d5bce7, 0 1px 0 0 #6e3483, 0 0 1px 1px #ccc; 
                                        -moz-box-shadow: inset 0 1px 0 0 #d5bce7, 0 1px 0 0 #6e3483, 0 0 1px 1px #ccc; 
                                        -webkit-box-shadow: inset 0 1px 0 0 #d5bce7, 0 1px 0 0 #6e3483, 0 0 1px 1px #ccc;  }                                        

.button-gray                          { color: #333 !important; background: url(/site/images/buttons/bg_button_gray.png) repeat-x 0 0; border: 1px solid #ccc; }
.button-blue                          { color: #fff !important; background: #2060A6 url(/site/images/buttons/bg_button_blue.png) repeat-x 0 0; border: 1px solid #173174; }
.button-green                         { color: #fff !important; background: #508C64 url(/site/images/buttons/bg_button_green.png) repeat-x 0 0; border: 1px solid #34684c; }
.button-red                           { color: #fff !important; background: #76020E url(/site/images/buttons/bg_button_red.png) repeat-x 0 0; border: 1px solid #350104; }
.button-purple                        { color: #fff !important; background: #8e367d url(/site/images/buttons/bg_button_purple.png) repeat-x 0 0; border: 1px solid #6c285a; }
.button-dpurple                       { color: #fff !important; background: #7134b1 url(/site/images/buttons/bg_button_dpurple.png) repeat-x 0 0; border: 1px solid #6e3483; }
.button-bluepurp                      { color: #fff !important; background: #2f3ecb url(/site/images/buttons/bg_button_bluepurp.png) repeat-x 0 0; border: 1px solid #2f3ecb; }

.button-gray                          { font-size: 100%; font-weight: bold; display: inline; }

#sub-nav .button-red, 
#sub-nav .button-blue, 
#sub-nav .button-green, 
#sub-nav .button-purple,
#sub-nav .button-dpurple, 
#sub-nav .button-bluepurp             { margin-left: 15px; display: inline; font-size: 1em;  }

.feature-legacy .button-gray, 
#right-col .button-gray               { display: inline; }