/*******************************************************************************
 * WORDPRESS TEMPLATE CONFIG
 * ----------------------------------------------------------------------------- 
 * Theme Name: Chicago Connection Pizza
 * Theme URI: http://elementwebmedia.com
 * Description: Default theme for CCP
 * Version: 1.0
 * Author: Element Web Media
 * Author URI: http://elementwebmedia.com
 *
 ******************************************************************************/
 
/*******************************************************************************
 * TABLE OF CONTENTS
 * -----------------------------------------------------------------------------
 * =RESET
 * =GLOBAL
 * =HEADER
 * =NAVIGATION
 * =CONTENT
 *   =-PAGE/POST
 *   =-COMMENTS/FORMS 
 * =SIDEBAR
 *   =-SIDEBAR 1
 *   =-SIDEBAR 2
 * =FOOTER     
 *
 ******************************************************************************/
 
/*******************************************************************************
 * COLOR LEGEND
 * -----------------------------------------------------------------------------
 * Red             : #D61F17 
 * Tan             : #dccd91
 * Dark Grey       : #888
 * Light Grey      : #E8E8E8 (body content)      
 *
 ******************************************************************************/
 

/*******************************************************************************
 * =RESET
 -----------------------------------------------------------------------------*/
* {
  margin: 0;
  padding: 0; 
}            

img, fieldset {
  border: 0;
}

/*******************************************************************************
 * =GLOBAL
 -----------------------------------------------------------------------------*/
body {
  background: #191919 url(images/bg_repeat.gif) top center repeat-x;
  font: 13px Arial;
  color: #E8E8E8;
}

#bgWrap {
  width: 100%;
  /*height: 116px;*/
  background: url(images/bg_center_new.jpg) top center no-repeat;
}

#conWrap {
  z-index: 0;
  width: 100%;
  background: url(images/bg_conwrap.gif) top center repeat-x;
}

#container {
  width: 871px;
  margin: 0 auto;
}

.clear {
  clear: both;
}

/*******************************************************************************
 * =HEADER
 -----------------------------------------------------------------------------*/
#hdr {
  position: relative;
  z-index: 10;
  height: 159px;
}

#hdr h1, #phone, #address {  
  text-indent: -9000px;
}

#hdr h1 a {
  position: absolute;
  top: 68px;
  left: 310px;
  z-index: 10;
  width: 250px;
  height: 164px;
  background: url(images/logo.png) top center no-repeat;
}

#hdr #phone .fax {
  position: absolute;
  top: 40px;
  display: block;
  width: 200px;
  height: 20px;
}

#bgRollOver {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 116px;
  background: url(images/bg_center_new.jpg) bottom center no-repeat;
}

/*******************************************************************************
 * =NAVIGATION
 -----------------------------------------------------------------------------*/
#nav {
  position: absolute;
  top: 117px;
  left: 0;
  width: 871px;   
}

#nav ul {
  position: relative;
  width: 871px;
  height: 42px;
  background: url(images/bg_nav.gif) top center no-repeat;
  list-style: none;
}

#nav li a {
  position: absolute;
  top: 0;
  display: block;
  height: 42px;
  background: url() top center no-repeat;
  text-indent: -9000px;
}

#nav li a:hover {
  background-position: bottom center;
}

#nav li a.home {
  left: 0;
  width: 89px;
  background-image: url(images/nav_home.gif);
}

#nav li a.menu {
  left: 89px;
  width: 112px;
  background-image: url(images/nav_menu.gif);
}

#nav li a.specials {
  left: 201px;
  width: 108px;
  background-image: url(images/nav_specials.gif);
}

#nav li a.about {
  right: 229px;
  width: 85px;
  background-image: url(images/nav_about.gif);
}

#nav li a.contact {
  right: 119px;
  width: 110px;
  background-image: url(images/nav_contact.gif);
}

#nav li a.directions {
  right: 0;
  width: 119px;
  background-image: url(images/nav_directions.gif);
}

#nav li a.connections {
  right: 0;
  width: 119px;
  background-image: url(images/nav_connections.gif);
}

/*******************************************************************************
 * =CONTENT
 -----------------------------------------------------------------------------*/
#con {
  width: 871px;
  margin: 0 auto;
  background: url(images/bg_home_secondary_btm.gif) bottom center no-repeat;
}

#conBg {
  width: 801px;
  min-height: 200px;
  padding: 70px 35px 40px; /* top 50px */
  background: url(images/bg_sub_content.gif) top center no-repeat;
}

#main {
  float: right;
  width: 556px;
}

#main.swap {
  float: left;
}

#con.wide #main {
  width: 801px;
}


/* =-PAGES/POST --------------------------------------------------------------*/
#pageHeading {
  width: 871px;
  height: 115px;
  padding: 25px 0 0;
  background: url(images/bg_sub_undernav.gif) top center no-repeat;
}

#pageHeading .title {
  width: 871px;
  height: 108px;
  background: url() top center no-repeat;
}

#main h2 {
  margin: 0 0 8px;
  font: 24px Georgia;
  color: #D61F17;  
}

#main h3 {
  margin: 0 0 14px;
  font: 18px Georgia;
  color: #dccd91;  
}

#main p {
  margin: 0 0 10px;
  font: 12px/18px Arial;
}

#con a {
  color: #dccd91; 
}

#con a:hover {
  color: #BFAC5F;
}

#about {
  float: left;
  width: 48%;
}


#article {
  float: right;
  width:48%;
}

#main .post img {
  border: 6px solid #333; 
}

#main .post img.alignnone {
  display: block;
  margin: 0 0 10px;
}

#main .post img.aligncenter {
  display: block;
  margin: 0 auto 10px;
  text-align: center;
}

#main .post img.noborder {
  border: 0;
}


/* =-CONTACT US --------------------------------------------------------------*/

#ewm-contact form {
  float: left;
  position: relative;
  width: 400px;
  font: 13px Arial;
}

#ewm-contact .itf, #ewm-contact textarea {
  width: 365px;
  padding: 5px;
  background: #1F1F1F;
  border: 1px solid #2f2f2f;
  font: 13px Arial;
  color: #e8e8e8;
}

#ewm-contact textarea {
  overflow: auto;
  height: 120px;
}

#ewm-oi {
  float: right;
  width: 400px;
}

#ewm-oi h3 {
  margin: 0 0 5px;
  font: 16px Georgia;
  color: #dccd91;
}

#ewm-oi .cm-address, #ewm-oi .cm-phone {
  float: left;
  width: 50%;
}

#ewm-contact .msg {
  position: absolute;
  top: 404px;
  left: 110px;
}

#ewm-contact .isb {
  width: 200px;
  height: 33px;
  background: #fff url(images/btn_sendmessage.gif) top center no-repeat;
  border: 0;
  font: 1px Georgia;
  color: #282727;
  text-align: left;
  cursor: pointer;
}

#ewm-contact .isb:hover {
  background-position: bottom center;
}

#map {
  float: right;
  width: 400px;
  height: 250px;
  color: #000;
}

/* =-MENU --------------------------------------------------------------------*/
#menu table {
  margin: 0 0 15px;
}

#menu h3 {
  font: 30px Georgia;
  color: #D61F17;
  text-align: left;
}

#menu h4 {
  font: 20px Georgia;
  color: #D61F17;
  text-align: left;
}

#menu p {
  margin: 0 0 15px;
  font: 18px Georgia;  
}

#menu td {
  padding: 6px 0;
  font: 20px Georgia;
}

#menu .menuT {
  width: 100%;  
}

#menu .menuT th {
  font: 18px Georgia;
  color: #D61F17;
}

#menu .menuT td.c {
  text-align: center;
}

#menu td.desc {
  padding: 0 0 6px;
}

#menu .desc {
  font: italic 15px Georgia;
  color: #888;
}

#menu .menuSubT td {
  padding: 4px 20px 4px 0;
}

/* =-CONNECTION --------------------------------------------------------------*/
#main.ccn .post {
  float: left;
  width: 390px;
}

#main.ccn #comment-list {
  float: right;
  width: 400px;
}

#main.ccn #respond {
  clear: left;
  float: left;
  width: 390px;
}

#main.ccn #respond h3 {
  margin: 0 0 5px;
  font: 18px Georgia;
  color: #dccd91;
}

#main.ccn .itf, #main.ccn textarea {
  width: 350px;
  padding: 5px;
  background: #1F1F1F;
  border: 1px solid #2f2f2f;
  font: 13px Arial;
  color: #e8e8e8;
}

#main.ccn textarea {
  overflow: auto;
  height: 120px;
}

#main.ccn #comment-list h3 {
  margin: 0 0 14px;
  font: 18px Georgia;
  color: #E8E8E8;
}

#main.ccn #comment-list ul {
  list-style: none;
}

#main.ccn #comment-list li {
  margin: 0 0 10px;
  padding: 10px 20px;
  background: #1F1F1F;
  border-bottom: 1px solid #2f2f2f;
}

#main.ccn #comment-list .name {
  margin: 0 0 5px;
  font: 16px Georgia;
  color: #dccd91;
}
#main.ccn #comment-list .name a {
  font: 13px Georgia;
  color: #888;
}

#main.ccn .isb {
  width: 200px;
  height: 33px;
  background: #555 url(images/btn_submitentry.gif) top center no-repeat;
  border: 0;
  font: 1px Georgia;
  color: #282727;
  text-align: left;
  cursor: pointer;
}

#main.ccn .isb:hover {
  background-position: bottom center;
}

/* =-HOME --------------------------------------------------------------------*/
#photoBox {
  position: relative;
  z-index: 1;
  width: 871px;
  height: 285px;
  background: url(images/bg_photobox.gif) top center no-repeat;
  text-indent: -9000px;
}

#photoBox #photo {
  position: absolute;
  top: 25px;
  left: 21px;
  overflow: hidden;
  width: 573px;
  height: 235px;
}

#photoBox #photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 573px;
  height: 235px;
}

#photoBox a.toMenu {
  position: absolute;
  top: 213px;
  left: 618px;
  display: block;
  width: 220px;
  height: 32px;
  text-indent: -9000px;
}

#secondary {
  position: relative;
  width: 871px;
  background: url(images/bg_home_secondary_btm.gif) bottom center no-repeat;
}

#secondary .hd {
  width: 871px;
  min-height: 340px;
  padding: 68px 0 30px;
  background: url(images/bg_home_secondary_top.gif) top center no-repeat;
}

.boxes h4 a {
  position: absolute;
  top: 18px;
  left: 0;
  display: block;
  width: 230px;
  height: 40px;
  text-indent: -9000px;
}

.boxes p {
  font-size: 12px;
}

/* =--Box1 -------------------------------------------------------------------*/
.box1 {
  float: left;
  width: 206px;
  margin: 0 0 0 34px;
}

.box1 h4 a {
  left: 20px;
}

.box1 .photoBg {
  position: relative;
  width: 206px;
  height: 136px;
  margin: 0 0 10px;
  background: url(images/home_b1_photobg.gif) top center no-repeat;
}

.box1 .img {
  position: absolute;
  top: 22px;
  left: 10px;
  width: 188px;
  height: 103px;
  background: #ccc url(images/img_box1.jpg) center center no-repeat;
}

.box1 p {
  margin: 0 0 15px;
  padding: 0 5px 0 8px;
}

.box1 p a {
  color: #dccd91;
}

.box1 p a:hover {
  color: #BFAC5F;
}

.box1 a.btnMeet {
  display: block;
  width: 206px;
  height: 32px;
  background: #ccc url(images/box1_btn_meet.gif) top center no-repeat;
  text-indent: -9000px;
}

.box1 a.btnMeet:hover {
  background-position: bottom center;
}

/* =--Box2 -------------------------------------------------------------------*/
.box2 {
  float: left;
  width: 300px;
  margin: 0 0 0 33px;  
}

.box2 h4 a {
  left: 270px;
  width: 335px;
}

.box2 #photoCycle {
  position: relative;
  width: 328px;
  height: 170px;
  background: url(images/box2_imgbg.gif) top center no-repeat;
}

.box2 #photoBack, .box2 #photoForward {
  position: absolute;
  top: 70px;
  left: 17px;
  width: 21px;
  height: 31px;
  background: url(images/box2_btn_back.gif) top center no-repeat;
  text-indent: -9000px;
}

.box2 .img {
  position: absolute;
  top: 21px;
  left: 44px;
  overflow: hidden;
  width: 240px;
  height: 127px;
}

.box2 #photoForward {
  left: 290px;
  background-image: url(images/box2_btn_forward.gif);
}

.box2 .blurb {
  width: 305px;
  margin: 0 11px 0 12px;
  text-align: center;
}

.box2 h5 {
  margin: 0 0 10px;
  font: bold 18px Georgia;
}

.box2 hr {
  height: 1px;
  margin: 0 0 6px;
  background: #2F2F2F;
  border: 0;
  color: #2F2F2F;
}

.box2 p {
  margin: 0 0 10px;
}

.box2 a.linkMenu {
  display: block;
  width: 100%;
  height: 30px;
  font: bold 13px/30px Georgia;
  color: #dccd91;  
}

.box2 a.linkMenu:hover {
  color: #BFAC5F;
} 

/* =--Box3 -------------------------------------------------------------------*/
.box3 {
  float: right;
  width: 208px;
  margin: 0 34px;
}

.box3 h4 a {
  left: 620px;
  width: 240px;
}

.box3 .photoBg {
  position: relative;
  width: 208px;
  height: 133px;
  margin: 0 0 10px;
  background: url(images/box3_imgbg.gif) top center no-repeat;  
}

.box3 .blurb {
  width: 197px;
  margin: 0 0 10px 8px;  
}

.box3 p, .box3 h5 {
  margin: 0 0 10px;
}

.box3 h5 {
  font: bold 14px Georgia;
}

.box3 .img {
  position: absolute;
  top: 22px;
  left: 12px;
  width: 188px;
  height: 102px;
  background: #ccc url(images/img_box3.jpg) center center no-repeat;
}

.box3 hr {
  height: 1px;
  background: #2F2F2F;
  border: 0;
  color: #2F2F2F;
}

.box3 a.btnShare, .box3 a.btnConnections {
  display: block;
  width: 208px;
  height: 33px;
  margin: 0 0 10px;
  background: url(images/box3_btn_share.gif) top center no-repeat;
  text-indent: -9000px;
}

.box3 a.btnConnections {
  background-image: url(images/box3_btn_connections.gif);
}

.box3 a.btnShare:hover, .box3 a.btnConnections:hover {
  background-position: bottom center;
}

/*******************************************************************************
 * =SIDEBAR
 -----------------------------------------------------------------------------*/
#sidebar {
  float: left;
  width: 220px;
}

#sidebar.swap {
  float: right;
}

/* =-MENU --------------------------------------------------------------------*/
ul.menuPage {
  list-style: none;
}

.menuPage h4 {
  margin: 0 0 5px;
  font: italic 16px Georgia;
  color: #AFAFAF;
}

.menuPage .tempImg {
  width: 208px;
  height: 120px;
  margin: 0 0 15px;
  background: url() center center no-repeat;
  border: 6px solid #333;
}

/*******************************************************************************
 * =FOOTER
 -----------------------------------------------------------------------------*/
#ftr {
  width: 830px;
  height: 35px;
  margin: 10px auto 0;
  color: #333;
}

#ftr .left {
  float: left;
  width: 400px;
}

#ftr .right {
  float: right;
  width: 400px;
  text-align: right;
}

#ftr a {
  color: #555;
  text-decoration: none;
}

#ftr a:hover {
  color: #D61F17;
}

#ftr a span, #ftr a:hover span {
  color: #c5c5c5;
}

#ftr a span.light, #ftr a:hover span.light {
  color: #333;
}