/* 
Theme Name: JCP WordPress re-design
Theme URI: http://jcpdowntown.com
Description: A custom WordPress theme for the Jewish Community Project
Version: 1.0
Author: Andrea Mignolo 
Author URI: http://andreamignolo.com


Copyright JCP Downtown 2009

*/


/*-------------------------------------------    

    Overrides

-------------------------------------------*/

html, body, form, fieldset, h1, h2, h3, h4, h5, h6, pre, blockquote, ul, ol, dl, address, .more-link  { margin:0; padding:0; }
a, a:link, a:visited { outline: none; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }



/*-------------------------------------------    

    Layout

-------------------------------------------*/

#wrapper { width: 960px; margin: 0 auto; }
#content { width: 100%; clear: both; padding-top: 40px; overflow: hidden; }
#main { width: 555px; float: left; display: inline; clear: both; margin-right: 30px; }
#main.page { margin-bottom: 30px;}
#video { clear: both; }
#sidebar { width: 360px; float: right; display: inline; }
#footer { clear: both; }

#gallery { width: 100%; overflow: hidden; margin-bottom: 20px;}
.post { width: 555px; overflow: hidden; margin-bottom: 30px; }
#content .post a img { border: 0; }


/*-------------------------------------------    

    Global Navigation Layout

-------------------------------------------*/

ul#g_upper_nav  { float: right; display: inline; background: url(images/topnav_bg.png) right center no-repeat; width: 650px; height: 36px; z-index: 0; margin-top: 5px; }
ul#g_lower_nav { float: right; display: inline; background: url(images/bottomnav_bg.png) right center no-repeat; width: 704px; height: 53px; z-index: 0; margin-top: 5px;}
ul#g_upper_nav li, ul#g_lower_nav li { float: left; display: inline; }

ul#g_upper_nav li { width: 90px;  padding-top: 10px; height: 36px;}
ul#g_upper_nav li.page-item-1963 { margin-left: 30px; }
ul#g_upper_nav li.page-item-2001 { margin-left: -20px;}
ul#g_upper_nav li.page-item-2005 { width: 160px; }
ul#g_upper_nav li.page-item-2046 { width: 100px; }
ul#g_upper_nav li ul li { height: auto; }


ul#g_lower_nav li { width: 100px; margin-right: 10px;  padding-top: 10px; height: 53px;}
ul#g_lower_nav li.page-item-2057 { margin-left: 35px; }
ul#g_lower_nav li.page-item-2238 { margin: 0;} 
ul#g_lower_nav li ul li { height: auto;}

ul#g_upper_nav li ul, ul#g_lower_nav li ul {  position: relative; visibility: hidden; height: 100%; z-index: 15; }
ul#g_upper_nav li:hover ul, ul#g_lower_nav li:hover ul { position: relative; visibility: visible; z-index: 10;  }
ul#g_upper_nav li ul li, #g_lower_nav li ul li { float: left; text-align: left; padding-top: 0; }
ul#g_upper_nav li ul li a, ul#g_lower_nav li ul li a { display: block; width: 250px; padding: 3px;}
ul#g_upper_nav li ul li, ul#g_lower_nav li ul li { float: none; display: block;}

/*-------------------------------------------    

    Search

-------------------------------------------*/

#search { float: right; width: 312px; height: 27px; background: url(images/search_bg.png) right center no-repeat; margin-top: 30px; font-size: 11px; }
#search span { padding-left: 15px; color: #FFF; padding-right: 5px; text-transform: uppercase; float: left; margin-top: 9px;}
#search input#s { height: 10px; margin-top: 4px; float: left; font-size: 10px;}
input#searchsubmit { border: 0; margin-top: 0px; background: #81426e; color: #FFF; display: block; float: left; margin: 5px 0 0 5px; }


/*-------------------------------------------    

    Styles

-------------------------------------------*/

#outerwrapper { width: 1040px; margin: 0 auto; background: url(images/bg.jpg) no-repeat; margin-top: 15px; overflow: hidden; height: 100%;}
h1 a { text-indent: -9999px; display: block; width: 180px; height: 145px; background: url(images/logo.png) no-repeat; overflow: hidden; float: left; margin-top: 15px; }
#shmuse { background: url(images/one_col_red_bg.jpg) center left no-repeat; width: 236px; height: 24px; margin-bottom: 20px;}
#shmuse a { color: #FFF; font-size: 12px; padding-left: 10px; padding-top: 3px; display: block; }
.callout { float: left; width: 236px; font-size: 12px; margin-bottom: 15px;}
.callout h2 { background: url(images/one_col_red_bg.jpg) center left no-repeat; width: 236px; height: 24px; }
.callout.staff { margin-right: 70px; }
.callout h2 a { display: block; font-size: 14px; color: #fff; padding-left: 10px; padding-top: 5px; }
.callout h2 { margin-bottom: 10px; }

#video h2 { background: url(images/full_col_red_bg.jpg) center left no-repeat; width: 549px; height: 27px; font-size: 14px; color: #FFF; margin-bottom: 10px;}
#video h2 a { padding-left: 10px; color: #FFF; display: block; padding-top: 8px;}

#footer { border-top: 1px solid #3f2236; font-size: 10px; color: #3f2236; }

a { color: #990000; }
a:hover { color: #CF2626; }
p#breadcrumbs a { color: #f58234; }
p#breadcrumbs { color: #ba5533; padding-bottom: 5px; margin-top: -5px; margin-bottom: 10px; }

#content.home #sidebar h2 { margin-bottom: 10px; }

.alignright { float: right; margin-left: 10px; }
.alignleft { float: left; margin-right: 10px; }

.links { margin-top: 5px; color: #999; }
.links a { color: #999;}

a.register { display: block; text-indent: -9999px; background: url(images/register.png); width: 145px; height: 24px; }

/*-------------------------------------------    

    Typography

-------------------------------------------*/

body { font-family: Helvetica, Arial, verdana, sans-serif; color: #222; }
#content { line-height: 18px; font-size: 13px;}
#content .post, #content .page { line-height: 24px;}

ul#g_upper_nav a { color: #EEE; font-size: 12px; text-transform: uppercase; }
ul#g_upper_nav li ul li a { background: #CF6540; text-transform: none; padding: 5px 0 5px 10px; border-bottom: 1px dotted #AF4520; }
ul#g_upper_nav li ul li a:hover { background: #DF7753;}


ul#g_lower_nav a { color: #FFF; font-size: 14px; text-transform: uppercase; }
ul#g_lower_nav li ul li a { background: #FF954F; text-transform: none; padding: 5px 0 5px 10px; border-bottom: 1px dotted #CF6219; font-size: 12px; }
ul#g_lower_nav li ul li a:hover { background: #FF9F5F; }

#main.page p { padding: 9px 0 ;}
#main.page li { padding: 7px 0;}

#main.page h3 { padding: 15px 0 0 0; color: #3E2133; text-transform: uppercase; font-size: 12px; font-weight: bold; border-bottom: 1px dotted #3E2133;}
#main.page h4 { color: #BA5533; font-weight: bold;  }

#footer p { padding: 10px 0;}

#content .post ol, #content .page ol { list-style-type: decimal; padding-left: 20px; line-height: 14px; }
#content .post ul, #content .page ul { list-style-type: disc; padding-left: 30px; line-height: 14px; }

/*-------------------------------------------    

    Sidebar Styles + Layout

-------------------------------------------*/

#content.home #sidebar h2 { background: url(images/one_col_purple_bg.jpg) center no-repeat; width: 360px; height: 26px; }
#content.home #sidebar h2 span { color: #FFF; font-size: 14px; padding-left: 10px; display: block; padding-top: 5px;}

#sidebar ul { list-style-type: none;}
#sidebar #subnav ul { width: 360px; height: 100%; background: url(images/purplebg.jpg) repeat;}
#sidebar #subnav ul { padding: 0 15px;}
#sidebar #subnav ul li ul { padding: 0 0 0 20px; }
#sidebar #subnav ul li a { display: block; color: #FFF; size: 14px; padding: 5px; border-bottom: 1px solid #59354e; margin-right: 20px;}
#sidebar #subnav ul li a:hover { background: #744c67;}
#sidebar #subnav .current_page_item a { background: #744c67;}
#sidebar #subnav .current_page_item ul li a { background: #502f46;}

#sidebar #upcoming, #sidebar #highlights { margin-top: 25px;}

#sidebar #upcoming h3 { color: #990000; text-transform: uppercase; margin-bottom: 0;}
#sidebar #upcoming p { margin-bottom: 15px; }

#sidebar #highlights li { margin-top: 15px; clear: both; }
#sidebar #highlights h3 a { text-transform: uppercase; color: #f58234; font-size: 12px; display: block; margin-top: -5px; margin-bottom: -5px; font-weight: bold; }
#sidebar #highlights span.date { font-size: 10px; text-transform: uppercase; color: #3f2236; }
#sidebar #highlights img { float: left; margin-right: 10px; border: 1px solid #222;}
#sidebar h3 { color: #3f2236; text-transform: uppercase; font-size: 12px; margin-bottom: 5px;}

#sidebar #subnav span.subnav_top { display: block; background: url(images/subnav_top.png); width: 360px; height: 20px; }
#sidebar #subnav span.subnav_bottom { display: block; background: url(images/subnav_bottom.png); width: 360px; height: 20px; margin-bottom: 30px;}

#main.page h2 { color: #990000; text-transform: uppercase; }
#main.page span.date { color: #BA5533; }

.post ul { list-style-type: disc; }

/*-------------------------------------------    

    Image Gallery

-------------------------------------------*/
.archive_nav .left { float: left; text-align: left;}
.archive_nav .right { float: right; text-align: right; }
.archive_nav { width: 100%; margin-bottom: 20px; overflow: hidden; }
p.attachment img { border: 1px solid #222;}
.archive_nav img { border: 1px solid;}

#content .gallery a img.attachment-thumbnail { padding: 3px; border: 1px solid #CCC;}

/*-------------------------------------------    

    Rotating Image Gallery

-------------------------------------------*/

#s3slider {
   width: 550px; /* important to be same as image width */
   height: 367px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
   width: 555px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 374px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   bottom: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
}