/* 
 *     root element for the scrollable. 
 *         when scrolling occurs this element stays still. 
 *         */ 
div.scrollable { 
 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    height:106px; 
    padding-top: 1px;
    background:#111;
} 
 
/* 
 *     root element for scrollable items. Must be absolutely positioned 
 *         and it should have a super large width to accomodate scrollable items. 
 *             it's enough that you set width and height for the root element and 
 *                 not for this element. 
 *                 */ 
div.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
} 
 
/* 
 *     a single item. must be floated on horizontal scrolling 
 *         typically this element is the one that *you* will style 
 *             the most. 
 *             */ 
div.scrollable div.items div { 
    float:left; 
} 

div.scrollable .scrollitem {
     width: 200px;
     font-size: 14pt;
}
 
/* you may want to setup some decorations to active item */ 
div.items div.active { 
//    border:1px inset #ccc; 
//    background-color:#333; 
}

.prev { 
     background: transparent url(/images/carouselLeft.gif) 0 0 no-repeat;
     width: 61px; height: 107px;
     float: left;
     cursor: pointer;
}

.next { 
     background: transparent url(/images/carouselRight.gif) 0 0 no-repeat;
     width: 61px; height: 107px;
     float: right;
     cursor: pointer;
}









/***** DATE PICKER **************/

/* Overlay for stuff */
/* the overlayed element */ 
div.overlay { 
     
    /* growing background image */ 
    background-image:url(/images/black.png); 
     
    /* dimensions after the growing animation finishes  */ 
    width:600px; 
    height:470px;         
     
    /* initially overlay is hidden */ 
    display:none; 
     
    /* some padding to layout nested elements nicely  */ 
    padding:55px; 
} 
 
/* default close button positioned on upper right corner */ 
div.overlay div.close { 
    background-image:url(/images/close.png); 
    position:absolute; 
    right:5px; 
    top:5px; 
    cursor:pointer; 
    height:35px; 
    width:35px; 
} 
 
 
/* black */ 
div.overlay.black { 
    background:url(/images/transparent.png) no-repeat !important; 
    color:#fff; 
} 
 
/* petrol */ 
div.overlay.petrol { 
    background:url(/images/petrol.png) no-repeat !important; 
    color:#fff; 
} 
 
div.black h2, div.petrol h2 { 
    color:#ddd;         
}



/* tooltip styling. uses a background image (a black box with an arrow) */
div.tooltip {
    background:transparent url(/images/tooltip_bg.png) no-repeat scroll 0 0;
    font-size:14pt;
    height:153px;
    padding:30px;
    width:310px;
    font-size:14pt;
    display:none;
    color:#fff;
    text-align: center;
}
/* tooltip title element (h3) */
div.tooltip h3 {
    margin:0;
    font-size:16pt;
    color:#fff;
}
.entry .tooltip p { font-size: 10pt; }
.tooltip p { line-height: 1em; }



table.jCalendar {
	border: 1px solid #000;
	background: #aaa;
    border-collapse: separate;
    border-spacing: 2px;
}
table.jCalendar th {
	background: #333;
	color: #fff;
	font-weight: bold;
	padding: 3px 5px;
}

table.jCalendar td {
	background: #ccc;
	color: #000;
	padding: 3px 5px;
	text-align: center;
}
table.jCalendar td.other-month {
	background: #ddd;
	color: #aaa;
}
table.jCalendar td.today {
	background: #666;
	color: #fff;
}
table.jCalendar td.selected {
	background: #f66;
	color: #fff;
}
table.jCalendar td.selected.dp-hover {
	background: #f33;
	color: #fff;
}
table.jCalendar td.dp-hover,
table.jCalendar tr.activeWeekHover td {
	background: #fff;
	color: #000;
}
table.jCalendar tr.selectedWeek td {
	background: #f66;
	color: #fff;
}
table.jCalendar td.disabled, table.jCalendar td.disabled.dp-hover {
	background: #bbb;
	color: #888;
}
table.jCalendar td.unselectable,
table.jCalendar td.unselectable:hover,
table.jCalendar td.unselectable.dp-hover {
	background: #bbb;
	color: #888;
}

/* For the popup */

/* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */

div.dp-popup {
	position: relative;
	background: #ccc;
	font-size: 10px;
	font-family: arial, sans-serif;
	padding: 2px;
	width: 171px;
	line-height: 1.2em;
}
div#dp-popup {
	position: absolute;
	z-index: 199;
}
div.dp-popup h2 {
	font-size: 12px;
	text-align: center;
	margin: 2px 0;
	padding: 0;
}
a#dp-close {
	font-size: 11px;
	padding: 4px 0;
	text-align: center;
	display: block;
}
a#dp-close:hover {
	text-decoration: underline;
}
div.dp-popup a {
	color: #000;
	text-decoration: none;
	padding: 3px 2px 0;
}
div.dp-popup div.dp-nav-prev {
	position: absolute;
	top: 2px;
	left: 4px;
	width: 100px;
}
div.dp-popup div.dp-nav-prev a {
	float: left;
}
/* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */
div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a {
	cursor: pointer;
}
div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled {
	cursor: default;
}
div.dp-popup div.dp-nav-next {
	position: absolute;
	top: 2px;
	right: 4px;
	width: 100px;
}
div.dp-popup div.dp-nav-next a {
	float: right;
}
div.dp-popup a.disabled {
	cursor: default;
	color: #aaa;
}
div.dp-popup td {
	cursor: pointer;
}
div.dp-popup td.disabled {
	cursor: default;
}

/* root element for tweetScroll */ 
div.tweetScroll {   
    position:relative; 
    height: 237px;      
    width: 240px;     
     
    /* required settings */ 
    overflow:hidden;     
 
    /* vertical scrollers have typically larger height than width */     
} 
 
/* root element for tweetScroll items */ 
div.tweetScroll div.items {     
    position:absolute; 
    height:1000em;     
     
    /* this time we have very large space for height */     
}

.wpcf7-form-control-wrap span { display: block; color: #fff200; }
.wpcf7-captcha-captcha-906 { width: 180px; height: 90px; }