/*=====================================================================
 *
 * Filename: global.css
 * Website: Concrete Culture
 * Author: Simon Thenie
 * Date Created: 08/05/2010
 * Media: Screen
 *
 * Description
 * -----------
 * General Styling for templates
 * 
 *
 *=====================================================================*/
 

/* Utility Classes ****************************/
.clear { clear: both; height: 0px; overflow: hidden; }
.clearboth { clear:both; }
.left {float:left;}
.right {float:right;}
.small {font-size:0.95em;}
.bold {font-weight:bold;}
.nopadding { padding:0;}
.nomargin { margin:0 }
.morepaddingtop { padding-top:10px; }
.hide {display:none;}
.smallerspace { width:100%; height:7px; }
.space { width:100%; height:15px; }
.biggerspace { width:100%; height:30px; }
.biggestspace { width:100%; height:60px; }
.separationspace { width:100%; height:15px; background-image:url(../images/bg-submenu-li-bottom.jpg); background-repeat:no-repeat; }
.nowrap { white-space:nowrap; }


a { text-decoration: none; outline: none; color:#CC6601; }
a:hover	{text-decoration: underline; }
a.active {outline: none; }
.nodisplay { display:none; }
.ta_right { text-align:right; }
.ta_left { text-align:left; }
.ta_center { text-align:center; }
.tc_red { color:#F00; }
.tc_green { color:#00cc00; }
.tt_uppercase { text-transform:uppercase; }
h3 { }
h5 { }

p { font-size:14px; padding:0 0 15px 0; margin:0; line-height:1.33em; }

html, body, #wrapper {height: 100%;}
body { margin:0; padding:0; font-family:"Times New Roman", Times, serif; font-size:12px; background-image:url(../images/bg.jpg); background-position:center top;  }




#wrapper { width:1000px; margin:0 auto; }

#header { background-image:url(../images/bg-header.jpg); background-repeat:no-repeat; height:182px; border-bottom:solid 1px #999999; }
#header .top { float:left; width:960px; height:149px; }
#header h1 a { background-image:url(../images/logo.jpg); background-repeat:no-repeat; display:block; width:263px; height:149px; text-indent:-99999em; margin:0; float:left; }
#header h2 { display:block; width:457px; height:49px; text-indent:-99999em; margin:98px 0 0 0; float:right; }
#header .menu { float:right; padding:0 45px 0 0; }
#header .menu ul li { float:left; padding:0 0 0 0; }
#header .menu ul li a { font-size:18px; color:#050505; padding:0 15px 0 15px; float:left; line-height:33px; text-transform:uppercase; }
#header .menu ul li.current_page_item a { background-color:#e28427; color:#D8CF98; }
#header .menu ul li a:hover { text-decoration:none; color:#D8CF98; }


#content-container { background-image:url(../images/bg-shadows.png); background-repeat:repeat-y; }
#content-container #content { background-color:#FFF; width:960px; margin:0 auto; }
/*
.home #content-container #content { background-image:url(../images/bg-img-home.jpg); background-repeat:no-repeat; background-position:bottom right; }
*/
.page-template-page-landing-php #actual-content .content { background-color:#f3f3fa; border-right:solid 1px #999999; border-left:solid 1px #999999; padding:0 20px; margin:0 0 20px 0; }

.page-template-page-landing-php #actual-content .content .item-container { float:left; width:50%; text-align:center; min-height:140px; position:relative; }
.page-template-page-landing-php #actual-content .content .item-container .item { bottom:16px; clear:both; margin:0; overflow:hidden; position:absolute; width:100%; }

.page-template-page-landing-php #actual-content .content .item p { padding:0 0 5px 0; line-height:1em; }
.page-template-page-landing-php #actual-content .content .item p a img { border:2px solid #000; }
.page-template-page-landing-php #actual-content .content .item p a:hover img { border:2px solid #CC6601; }

/*
.page-template-page-gallery-php #content-container #content { background-image:url(../images/bg-gallery.jpg); background-repeat:no-repeat; background-position:bottom right; }
*/
.page-template-page-gallery-php #actual-content h3 { margin:0; }

.page-template-page-gallery-php .gallery-box { float:left; padding:30px 0 0 0 }

.page-template-page-gallery-php .carousel li { border-right:solid 1px #000; }
.page-template-page-gallery-php .carousel li img { float:left; }
.page-template-page-gallery-php .carousel { float:left; border-left:solid 1px #000; border-top:solid 1px #000; border-bottom:solid 1px #000; }
.page-template-page-gallery-php .prev { float:left; background-image:url(../images/icon-arrows.jpg); height:33px; width:33px; text-indent:-99999em; display:block; margin:30px 4px 0 7px }
.page-template-page-gallery-php .next { float:left; background-image:url(../images/icon-arrows.jpg); background-position:right top; height:33px; width:33px; text-indent:-99999em; display:block; margin:30px 0 0 4px }
.page-template-page-gallery-php  h4 { font-size:16px; padding:0 0 5px 44px; color:#000; }

.page-template-page-contact-php #actual-content h3 { margin:0; }
.page-template-page-contact-php #actual-content .left { width:385px; padding:20px 20px 0 0; }
.page-template-page-contact-php #actual-content .left h4 { font-size:16px; padding:0 0 5px 0; }
.page-template-page-contact-php #actual-content .left table td { padding:0 10px 0 0; font-size:14px; line-height:1.33em; }
.page-template-page-contact-php #actual-content .right { width:248px; background-color:#333333; border:solid 1px #000; }
.page-template-page-contact-php #actual-content .right .title { color:#FFF; background-color:#666666; padding:5px 10px; font-size:16px; }
.page-template-page-contact-php #actual-content .right .form { padding:10px 20px; }
.page-template-page-contact-php #actual-content .right .form ul { list-style:none; }
.page-template-page-contact-php #actual-content .right .form ul li { clear:both; }
.page-template-page-contact-php #actual-content .right .form ul li.label { font-size:12px; color:#FFF; padding:0 0 2px 5px; }
.page-template-page-contact-php #actual-content .right .form ul li.label .lighter { color:#999999; }


.page-template-page-contact-php #actual-content .right .form ul li.input { padding:0 0 6px 0; }
.page-template-page-contact-php #actual-content .right .form ul li.input input { border:solid 1px #000; padding:1px; font-family:"Times New Roman", Times, serif; font-size:14px; width:204px; }
.page-template-page-contact-php #actual-content .right .form ul li.input input.error { border:1px dotted red; }
.page-template-page-contact-php #actual-content .right .form ul li.input textarea { border:0; padding:2px; font-family:"Times New Roman", Times, serif; font-size:14px; width:204px; }

.page-template-page-contact-php #actual-content .right .form ul li label { float:left; padding:4px 0 6px 0; color:#F00; }

.page-template-page-contact-php #actual-content .right .form .submit { background-image:url(../images/button-submit.jpg); background-repeat:no-repeat; display:block; height:26px; width:91px; text-align:center; font-size:16px; color:#000; margin:5px 0 0 60px; border:none; font-family:"Times New Roman", Times, serif; padding:0 0 3px 0; cursor:pointer; }
.page-template-page-contact-php #actual-content .right .form .submit:hover { text-decoration:none; background-position:left -26px; }

#main-content { background-image:url(../images/bg-menu.jpg); background-repeat:repeat-y; background-position:left top; }

#main-content #submenu { width:263px; float:left; padding:0 0 20px 0; }
#main-content #submenu p.heading { font-size:20px; color:#000; padding:10px 0 0 20px; font-weight:bold; }
#main-content #submenu ul { margin:10px 0 5px 22px; border-left:solid 1px #999999; }
#main-content #submenu ul li { border-top:solid 1px #999999; }
#main-content #submenu ul li.first { border-top:none; }
#main-content #submenu ul li a { text-transform:uppercase; font-size:14px; color:#000; line-height:1.13em; padding:6px 0 6px 15px; display:block; }
#main-content #submenu ul li a:hover { color:#cc6600; text-decoration:none; }
#main-content #submenu ul li.current_page_item a,
#main-content #submenu ul li.current_page_parent a {background-color:#F3F3FA; }

#main-content #submenu .design-ideas { margin:15px 0 0 84px; background-image:url(../images/bg-design-ideas.jpg); background-repeat:no-repeat; font-size:14px; color:#000; width:111px; height:auto; display:block; padding:98px 0 0 0; text-align:center; }

#main-content #actual-content { padding:20px; float:left; width:655px; position:relative;}
.home #main-content #actual-content { min-height:467px;}


.home #main-content #actual-content .we-are-green { clear:both; margin:0; overflow:hidden; width:100%; bottom:16px; padding:4px 0 9px 5px; position:absolute; color:#00cc00; background-image:url(../images/bg-green-text.jpg); background-repeat:no-repeat; }


#actual-content h3 { background-color:#f3f3fa; color:#999999; font-size:30px; border-right:solid 1px #999999; border-left:solid 1px #999999; padding:0 20px; margin:0 0 20px 0; line-height:40px; }
#actual-content ul { list-style-type: disc; list-style-position: inside; font-size:14px; line-height:1.33em; padding:0 0 15px 0; }
#actual-content ul.nostyle { list-style:none; }
#actual-content .lighter { color:#999999; }

#actual-content .we-are-green { padding:4px 0 9px 5px; color:#00cc00; background-image:url(../images/bg-green-text.jpg); background-repeat:no-repeat; }

/* Begin Images */
p img {	padding: 0;	max-width: 100%; }
/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */
img.centered { display: block; margin-left: auto; margin-right: auto; }
img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.alignleft {	padding: 4px; margin: 0 7px 2px 0; display: inline; }
.alignright { float: right; }
.alignleft { float: left; }
/* End Images */

.galleriffic .controls { display:none; }
.navigation .thumbs { display:none; } 

.slideshow { width:227px; float:right; padding:10px 0 0 20px; }

#actual-content .typical-use { padding:10px 0 0 0; }
#actual-content .typical-use .title { font-size:14px; padding:0 0 5px 0; }
#actual-content .typical-use .content { background-color:#e9e9e9; border:solid 1px #999999; }
#actual-content .typical-use .content p { padding:4px; }

#actual-content .back { padding:0 0 5px 0; font-size:12px; }

#footer-container { background-image:url(../images/bg-footer.png); background-repeat:no-repeat; }
#footer-container #footer { height:38px; width:960px; margin:0 auto; text-align:center; color:#FFF; font-size:12px; padding:20px 0 0 0 }