@charset "utf-8";

#griddle { display: block; }
#griddle * { margin: 0; padding: 0; }
#griddle a { color:#004363; text-decoration:none;}
#griddle img { border: none;}
#griddle ul, ol, li { list-style: none;}

#griddle .grid { padding: 40px 0; color:#333;}
#griddle .grid aside { width: 125px; float:left; padding-top:110px; text-align:right;}
#griddle .grid aside li { line-height:51px; height: 51px; font-size:11px; overflow: hidden; }
#griddle .grid .sections { width:782px;  height: 511px; background:url(images/bg-grid-box.png) no-repeat left top; float: right; }
#griddle .grid section { float:left; text-align:center; height:509px;}
#griddle .grid .sections > div { width:105%;}
#griddle .grid h3 { font-size:18px; color:#fff; text-shadow: 0 1px 0 #000; height:54px; line-height:50px;}
#griddle .grid h4 { font-size:24px; color:#333; text-shadow: 0 1px 0 #fff; height:32px; padding: 4px 0 18px;}
#griddle .grid header span { font-size:11px; display:block; text-transform:uppercase; line-height:1em; font-weight:normal; margin-top:-3px;}
#griddle .grid footer ul { padding: 0 20px;}
#griddle .grid footer ul li { line-height: 46px; padding-bottom:6px; position:relative; }
#griddle .grid footer ul li.last { padding-top:20px; line-height:normal;}
#griddle .grid .btn, .grid .btn span { background-repeat: no-repeat; display:inline-block; white-space:nowrap;text-shadow: 0 1px 0 #fff; }

#griddle .grid section:hover { position:relative; padding: 6px 0 9px; margin-top:-6px; cursor:pointer; }
#griddle .grid section:hover footer ul li { font-size:18px; font-weight:bold;color:#fff;}
#griddle .grid section:hover h3 { font-size:20px;}
#griddle .grid section:hover h4 { font-size:30px;}
#griddle .grid section:hover h4 span { font-size:10px;}

#griddle .col3 section {width:262px;  }
#griddle .col3 section.last:hover { width:260px;}
#griddle .col3 section:hover {background:url(images/bg-section3.png) no-repeat left top; }
#griddle .col3 .btn, .col3 .btn span { background-image:url(images/bg-button3.png); }
#griddle .col3 .btn { background-position: left top; padding-left:34px;}
#griddle .col3 .btn span { background-position: right top; padding-right:34px; color:#333; font-size:16px;font-weight:bold; line-height:34px; padding-top:6px; padding-bottom:7px; }
#griddle .col3 section:hover .btn { background-position: left -46px;}
#griddle .col3 section:hover .btn span { background-position: right -46px; line-height:42px; font-size:18px;}

#griddle .col4 section {width:195px;  }
#griddle .col4 section:hover {background:url(images/bg-section4.png) no-repeat left top; width:220px; margin-right:-13px; margin-left:-12px; }
#griddle .col4 .btn, .col4 .btn span { background-image:url(images/bg-button4.png); }
#griddle .col4 .btn { background-position: left top; padding-left:30px;}
#griddle .col4 .btn span { background-position: right top; padding-right:30px; color:#333; font-size:14px;font-weight:bold; line-height:31px; padding-top:7px; padding-bottom:7px; }
#griddle .col4 section:hover .btn { background-position: left -46px;}
#griddle .col4 section:hover .btn span { background-position: right -46px; line-height:35px; font-size:16px;}

#griddle .col5 section {width:156px;  }
#griddle .col5 section:hover {background:url(images/bg-section5.png) no-repeat left top; width:180px; margin-right:-19px; margin-left:-5px; }
#griddle .col5 .btn, .col5 .btn span { background-image:url(images/bg-button.png); }
#griddle .col5 .btn { background-position: left top; padding-left:28px;}
#griddle .col5 .btn span { background-position: right top; padding-right:28px; color:#333; font-size:12px;font-weight:bold; line-height:25px; padding-top:7px; padding-bottom:7px; }
#griddle .col5 section:hover .btn { background-position: left -40px;}
#griddle .col5 section:hover .btn span { background-position: right -40px; line-height:30px; font-size:14px;}


#griddle .tooltip { position:absolute; background: url(images/bg-tooltip.png) no-repeat right bottom; width:272px; padding-bottom:36px; z-index:2; font-size:13px; line-height:1.35em; color:#333; left:70%; top:-35px; display:none; text-align:left; font-weight:normal; }
#griddle .tooltip > div { background: url(images/bg-tooltip.png) no-repeat left top; padding: 30px 30px 0 45px;}
#griddle .tooltip h3 { font-size:14px;}