
/*===============================================================================================================

Project:		CarbonBelch
Version:		1.0
Last Changed:	12/07/2012
Author:			Mihai Pacurar

===============================================================================================================*/


/*===============================================================================================================

[Table of Contents]

1. GENERAL [style for body, headers, default behaviour of paragraphs, images, links etc]
2. LAYOUT [elements used to define the layout of the site]
	2.1 HEADER
	2.2 CONTENT
	2.3 FOOTER
3. NAVIGATORS [navigation for the site]
	3.1 MAIN NAVIGATOR
4. FORMS
5. CONTENT ELEMENTS
	5.1 HOMEPAGE
	5.2 ARTICLE HOMEPAGE
	5.3 LOGIN POPUP

===============================================================================================================*/






/* 1. GENERAL
===============================================================================================================*/

@font-face {
    font-family: 'FuturaBook';
    src: url('../../fonts/futuran-webfont.eot');
    src: url('../../fonts/futuran-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/futuran-webfont.woff') format('woff'),
         url('../../fonts/futuran-webfont.ttf') format('truetype'),
         url('../../fonts/futuran-webfont.svg#WebfontRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FuturaBoldC';
    src: url('../../fonts/futurabc-webfont.eot');
    src: url('../../fonts/futurabc-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/futurabc-webfont.woff') format('woff'),
         url('http://carbonbelch.com/images/fonts/futurabc-webfont.ttf') format('truetype'),
         url('../../fonts/futurabc-webfont.svg#WebfontRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body { margin: 0; padding: 0; font: normal 14px 'Arial', Helvetica, sans-serif; font-weight: 500; color: #000000; }
h1 { margin: 0 0 10px 0; font-size: 28px; font-family: 'FuturaBoldC'; font-weight: 500; color: #6d882d; text-transform: uppercase; }
h2 { margin: 10px 0; padding: 0 0 0 8px; font-size: 24px; font-family: 'FuturaBoldC'; font-weight: 500; text-transform: capitalize; color: #6d882d; }
a { color: #2f3f5e; text-decoration: none; }
a:hover { color: #ec4b14; }
p { margin: 10px 0; }
img { border: 0; }
.clearAll { clear: both; height: 0; font-size: 0; line-height: 0; overflow: hidden; }

/* 2. LAYOUT
===============================================================================================================*/

.inner { width: 940px; margin: 0 auto; padding: 0 10px; }

	/* 2.1 HEADER
	-----------------------------------------------------*/
	
	header { height: 250px; overflow: hidden; background: url(../../general/bg-header.jpg) repeat-x top left; }
	.inner-header { width: 960px; height: 250px; margin: 0 auto; background: url(../../general/bg-header-inner.jpg) no-repeat; }
	.inner-header .account-info { float: right; width: 139px; height: 46px; margin: 0 10px 0 0; background: url(../../general/bg-account-info.jpg) no-repeat top left; }
	.inner-header .account-info ul { list-style-type: none; }
	.inner-header .account-info li { float: left; height: 27px; cursor: pointer; text-indent: -9999px; }
	.inner-header .account-info li.login { width: 40px; background: url(../../general/bg-account-login.png) no-repeat center; }
	.inner-header .account-info li.register { width: 52px; margin: 0 2px; background: url(../../general/bg-account-register.png) no-repeat 20px 7px; }
	.inner-header .account-info li.contact { width: 42px; background: url(../../general/bg-account-contact.png) no-repeat center; }
	.inner-header .account-info .option { width: 139px; height: 19px; text-align: center; text-transform: uppercase; }
	.inner-header .account-info .option a { color: #ffffff; }
	.inner-header .account-info .option a:hover { color: #ffffff; text-decoration: underline; } 
	
	
	/* 2.2 CONTENT
	-----------------------------------------------------*/
	
	#content { overflow: hidden; }
	#content .inner { overflow: hidden; background: url(../../general/bg-content-inner.jpg) no-repeat; }
	.inner-content { float: left; width: 570px; padding: 15px 0 0 0; }
	.inner-content h1 { margin: 10px 0; }
	.sidebar { float: right; width: 326px; background-color: #333333; border-left: 1px solid #9f9f9f; }
	.sidebar .block { padding: 0 8px 0 9px; border-bottom: 1px solid #5c5c5c; }
	.sidebar .block h2 { margin: 0; font-size: 18px; color: #ffffff; }
	.sidebar .block h2 span { color: #6d882d; }
	.inner-content ol { list-style-type: decimal; margin: 10px 0px 10px 15px; }
	.inner-content li { margin: 6px 0; text-align: justify; }
	.pledge { margin: 15px 0; padding: 10px 10px; background-color: #e4e4e4; color: #666666; font-size: 14px; font-weight:bold; line-height: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
	
	.sidebar-members { float: right; width: 280px; background-color: #333333; border-left: 1px solid #9f9f9f; padding: 10px 0 20px 0;}
	.sidebar-members .block { margin: 20px 20px; padding: 0 8px 0 9px; }
	
	/* 2.3 FOOTER
	-----------------------------------------------------*/
	
	footer { position: relative; /*height: 367px;*/ background: #030303 url(../../general/bg-footer.jpg) repeat-x; color: #ffffff; font-size: 13px; }
	footer .inner-footer { width: 940px; margin: 0 auto; padding: 0 10px; padding: 87px 0 0 0; /*background: url(../../general/bg-footer-inner.jpg) no-repeat;*/ }
	footer .copyright { /*position: absolute; bottom: 31px;*/ padding: 0 0 31px 0; width: 100%; height: 41px; line-height: 41px; font-size: 12px; background: url(../../general/bg-copyright.jpg) repeat-x; }
	footer .copyright a { color: #6d882d; }
	footer .copyright a:hover { text-decoration: underline; }
	footer .column { float: left; }
	footer .friends { width: 230px; /*width: 360px;*/ }
	footer .tweets { width: 450px; /*width: 330px;*/ padding: 0 30px 0 0; }
	footer .links { width: 220px; }
	footer .friends img { border: 1px solid #E4E4E4; padding: 1px; }
		footer .friends .banner { margin: 0 0 6px 20px; }
	footer h2 { margin: 0 0 15px 0; padding: 0; color: #ffffff; font-size: 22px; font-weight: 500; }
	footer ul { list-style-type: none; }
	footer li { padding: 3px 22px; background: url(../../general/bg-footer-list-item.png) no-repeat 2px center; }
	footer li a { color: #ffffff; text-decoration: none; }
	footer li a:hover { color: #ffffff; text-decoration: underline; }
	footer p { padding: 5px 0; }
	footer .time { font-size: 11px; font-style: italic; }
	
	
/* 3. NAVIGATORS
===============================================================================================================*/

	/* 3.1 MAIN NAVIGATOR
	-----------------------------------------------------*/	
		
	.header-menu { /*width: 705px;*/width: 940px; height: 60px; margin: 120px 0 0 0; padding: 0 10px; background: url(../../general/bg-menu.jpg) no-repeat; }
	.header-menu ul { list-style-type: none; }
	.header-menu li { float: left; height: 55px; line-height: 45px; padding: 0 2px 0 0; background: url(../../general/bg-menu-item.jpg) no-repeat top right; text-transform: uppercase; }
	.header-menu li a { display: block; height: 55px; line-height: 45px; padding: 0 15px; color: #ffffff; font-size: 13px; }
	.header-menu li a:hover { color: #ff9600; }
	.header-menu li.active a { background: url(../../general/bg-menu-item-active.jpg) repeat-x; }
	
	.header-menu .socials { float: right; height: 45px; line-height: 45px; padding: 10px 20px 0 0; } 
	.header-menu .socials a:first-child { padding: 0 5px 0 0; }
	
	/* 3.2 GROUP NAVIGATOR
	-----------------------------------------------------*/
	
	.sidebar-members  ul { width: 180px; list-style-type: none; padding: 10px 0 20px 0;}
	.sidebar-members  li { float: left; font-size: 13px; line-height: 26px; text-transform: uppercase; }
	.sidebar-members  li a { display: block; font-size: 13px; line-height: 26px; color: #ffffff; }
	.sidebar-members  li a:hover { color: #ff9600; }
	.sidebar-members  li.active a { color: #ff9600; }
	

/* 4. FORMS
===============================================================================================================*/
	form { margin: 0; padding: 0; overflow: hidden; }
	form br { clear: left; }
	form label { float: left; width: 120px; margin: 10px 0 0 0; }
	form .form-field { width: 247px; margin: 4px 0; padding: 10px 15px; font-size: 12px; color: #666666; border: 1px solid #eaeaea; }
	form .form-field.search { width: 235px; padding: 5px; margin: 8px 0 4px 0; }
	form .form-buttons { clear: both; float: left; line-height: 27px; padding: 5px 0 0 0; vertical-align: middle; }
	button { height: 27px; line-height: 27px; padding: 0 10px; background: url(../../general/bg-button.jpg) repeat-x; border: 0 none; border-radius: 4px 4px 4px 4px; font-size: 14px; font: 500 14px 'Arial',Helvetica,sans-serif; color: #FFFFFF; cursor: pointer; text-transform: uppercase; }
	.form-holder { width: 500px; margin: 20px 0 20px 0; overflow: hidden; }
	.form-select { float: left; width: 278px; padding: 10px 15px; margin: 0; border: 1px solid #eaeaea; }
	.form-textarea { float: left; width: 350px; height: 130px; padding: 4px 10px; margin: 0; border: 1px solid #eaeaea; }
	.form-notes { clear: both; margin: 10px 0; font-style: italic; color: #888888; }
	.form-message { margin: 15px 0; }
	
	fieldset { padding: 20px 0 20px;  border-bottom: 1px solid #eaeaea; }
	
	.radiobutton { float: left; margin: 3px 0 0 20px; }
	.radiobutton-info { float: left; margin: 1px 0 0 5px; } 
	.calculate-label { width: auto; padding: 0 5px; margin: -8px 0 0 0; background-color: #ffffff; }
	.calculate-question { width: 536px; padding: 0 15px 10px 15px; margin: 15px 0; border: 1px solid #eaeaea; }
	
	.security-input { height: 15px; font-size: 10px; }
	


/* 5. CONTENT ELEMENTS
===============================================================================================================*/

	.slideshow { height: 331px; padding: 9px 0; background: url(../../general/bg-slideshow.jpg) no-repeat; }  
	.slideshow ul { list-style-type: none; }
	.slideshow li { width: 920px; height: 301px; padding: 15px 10px; background: url(../../general/bg-slide.jpg) repeat-x; }
	
	.slideshow .slide-content { float: right; width: 355px; margin: 0 25px 0 0; }
	.slideshow .slide-content h1 { margin: 20px 0; text-align: center; color: #ffffff; }
	.slideshow .slide-content a { color: #6D882D; }
	.slideshow img { float: left; }
	.slideshow p { color: #ffffff; text-align: justify; }
	
	.slideshow .bx-prev { position: absolute; right: 66px; top: 287px; width: 20px; height: 20px; background: url(../../general/bt-slide-prev.png) no-repeat; text-indent: -999999px; }
	.slideshow .bx-next { position: absolute; right: 38px; top: 287px; width: 20px; height: 20px; background: url(../../general/bt-slide-next.png) no-repeat; text-indent: -999999px; }
	
	.co2-amount { height: 54px; padding: 25px 0 25px 16px; background: url(../../general/bg-co2-amount.jpg) no-repeat 240px center; }
	.co2-amount h2 { padding: 0; line-height: 24px; text-transform: uppercase; }
	.co2-amount h2 span { font-size: 24px; line-height: 30px; }
	
	.counter { background: url(../../general/bg-counter.jpg) no-repeat; }
	.counter ul { list-style-type: none; }
	.counter ul li { float: left; min-width: 31px; margin: 0 10px 0 0; padding: 2px 0 0 3px; line-height: 10px; }
	.counter ul li:first-child { min-width: 41px; margin: 0 10px 0 10px;  } 
	.counter ul li span { color: #ffffff; font-size: 10px; font-family: 'FuturaBook'; }
	.counter ul.items li { float: left; line-height: 24px; min-width: 27px; margin: 0 10px 0 0; padding: 5px 0 0 7px; color: #f5f5f5; font-size: 24px; font-family: 'FuturaBoldC'; background: url(../../general/bg-counter-item.jpg) no-repeat top left; }
	.counter ul.items li:first-child { min-width: 37px; margin: 0 10px 0 10px; background: url(../../general/bg-counter-item-long.jpg) no-repeat top left; }
	.video-news { height: 336px; margin: 11px 0; background: url(../../general/bg-video-news.jpg) no-repeat; }
	.video-news h2 { padding: 10px 0 0 16px; color: #ffffff; }
	.subscribe { height: 220px; margin: 11px 0; background: url(../../general/bg-subscribe.jpg) no-repeat; }
	.subscribe form { padding: 0 15px; }
	.subscribe h2 { padding: 10px 0 10px 16px; color: #ffffff; }
	.subscribe .form-buttons { float: right; }
	.featured-posts { padding: 16px 0 !important; }
	.featured-posts h2 { padding: 0 0 0 25px; color: #ffffff; }
	.featured-posts ul { list-style-type: none; }
	.featured-posts li { padding: 10px 0 9px 36px; background: url(../../general/bg-featured-posts-item.png) no-repeat 13px 10px; }
	.featured-posts li:hover { background-color: #686868; }
	.featured-posts li a { color: #ffffff; }
	.advertisement { padding: 16px 0; text-align: center; }
	.advertisement h2 { padding: 0 0 16px 25px; color: #ffffff; text-align: left; }
	.tag-cloud { padding: 27px; color: #787878; font-weight: 700; }
	.tag-cloud h2 { margin: 0 0 10px 0; padding: 0; color: #ffffff; text-transform: uppercase; font-size: 18px; line-height: 18px; }
	.tag-cloud a { color: #787878; }
	.tag-cloud a:hover { text-decoration: underline; }
	.social-networks { float: right; width: 283px; height: 33px; margin: 10px 0 0 0; padding: 0 22px; line-height: 33px; font-size: 11px; color: #666666; background: url(../../general/bg-social-networks.jpg) no-repeat; }
	.social-networks .facebook { float: left; margin: 0 0 0 11px; padding: 0 0 0 38px; border-left: 1px solid #c7c7c7; color: #000000; background: url(../../general/bg-facebook-small.jpg) no-repeat 16px center; }
	.social-networks .twitter { float: left; padding: 0 0 0 31px; color: #000000; background: url(../../general/bg-twitter-small.jpg) no-repeat 10px center; }
	.social-networks a { color: #000000; }
	.social-networks a:hover { text-decoration: underline; }
	
	.counter { padding: 0 8px 5px 25px !important; }
	.counter h2.count { margin: 0 0 5px 0; padding: 23px 0 0 0; text-transform: uppercase; color: #000000; }
	.counter h2 { padding: 12px 0 0 0; }
	.sec-field {opacity: 0; filter: alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; height: 0px;}
	.page-nav { float: right; height: 20px; margin: 20px 0 0 0; }
	.page-nav .prev { float: left; display: block; width: 20px; height: 20px; text-indent: -999999px; background: url(../../general/bt-slide-prev.png) no-repeat; }
	.page-nav .next { float: left; display: block; width: 20px; height: 20px; margin: 0 0 0 8px; text-indent: -999999px; background: url(../../general/bt-slide-next.png) no-repeat; }
	
	.breadcrumbs ul { list-style-type: none; }
	.breadcrumbs li { display: inline-block; padding: 0 0 0 10px; margin: 0 0 0 10px; background: url(../../general/bg-breadcrumb-item.png) no-repeat left center; }
	.breadcrumbs li:first-child { padding: 0; margin: 0; background: none; }
	
	.blog-manage-list ul { margin: 0; list-style-type: none; }
	.blog-manage-list ul.titles li { border-top: 1px solid #9F9F9F; text-align: center; }
	.blog-manage-list ul li { float: left; min-height: 28px; margin: 0; padding: 0 10px; border-bottom: 1px solid #9F9F9F; }
	.blog-manage-list ul li.manage-list-subject { width: 200px; border-left: 1px solid #9F9F9F; }
	.blog-manage-list ul li.manage-list-author { width: 100px; border-left: 1px solid #9F9F9F; }
	.blog-manage-list ul li.manage-list-date { width: 90px; border-left: 1px solid #9F9F9F; text-align: center; }
	.blog-manage-list ul li.manage-list-status { width: 70px; border-left: 1px solid #9F9F9F; border-right: 1px solid #9F9F9F; text-align: center; }
	
	.blog-manage-comments { width: 620px; font-size: 12px;}
	.blog-manage-comments ul { margin: 0; list-style-type: none; }
	.blog-manage-comments li { list-style: none; border-bottom: 1px solid #9F9F9F; margin: 10px 0; }
	.blog-manage-comments ul.titles li { border-top: 1px solid #9F9F9F; text-align: center; }
	.blog-manage-comments .manage-list-entry { width: 500px; float: left; margin-right: 30px; }
	.blog-manage-comments .manage-list-aprove { width: 70px; float: left; margin: 20px 0; }
	.content-comments { margin: 15px 0; padding: 3px 8px; background-color: #e4e4e4; color: #666666; font-size: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
	
	.blog-manage-articles { width: 620px; font-size: 12px;}
	.blog-manage-articles ul { margin: 0; list-style-type: none; }
	.blog-manage-articles li { list-style: none; border-bottom: 1px solid #9F9F9F; margin: 10px 0; }
	.blog-manage-articles ul.titles li { border-top: 1px solid #9F9F9F; text-align: center; }
	.blog-manage-articles .manage-list-entry { width: 500px; float: left; margin-right: 30px; }
	.blog-manage-articles .manage-list-aprove { width: 70px; float: left; margin: 20px 0; }
	
	/* 5.1 HOMEPAGE	
	-----------------------------------------------------*/
	.article-preview { margin: 17px 0 0 0; padding: 0 0 35px 0; background: url(../../general/bg-article-preview.jpg) no-repeat bottom left; }
	.article-preview  a { color: #6d882d; }
	.article-preview  a.more { float: right; color: #6d882d; font-size: 14px; font-family: 'FuturaBoldC'; }
	.article-preview  a.more:hover { text-decoration: underline; }
	.article-preview  a.more span { padding: 0 0 0 17px; background: url(../../general/bg-more.png) no-repeat; }
	.article-preview .featured-pic { width: 530px; height: 226px; padding: 14px 20px; background: url(../../general/bg-featured-pic.jpg) no-repeat; }
	.article-preview .featured-pic img { border: 4px solid #ffffff; }
	
	/* 5.2 ARTICLE HOMEPAGE	
	-----------------------------------------------------*/

	article header { height: auto; background: none; }
	article header h1 { color: #6d882d; font-family: 'FuturaBoldC'; font-size: 24px; font-weight: 500; margin: 10px 0; padding: 0 0 0 8px; text-transform: capitalize; }
	article hgroup { margin: 0 0 15px 0; padding: 3px 8px; background-color: #e4e4e4; color: #666666; font-size: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
	article p { text-align: justify; }
	article h2 { font-size: 20px; }
	article h2 span  { color: #666666; }
	.article-date { display: inline-block; height: 22px; line-height: 22px; padding: 0 20px 0 25px; background: url(../../general/entry-calendar.gif) no-repeat 0 center; }
	.article-author { display: inline-block; height: 22px; line-height: 22px; padding: 0 0 0 25px; background: url(../../general/entry-author.gif) no-repeat 0 center; }
	.article-comments-count { display: inline-block; height: 22px; line-height: 22px; float: right; }
	.article-comments-count span { display: inline-block; width: 20px; height: 22px; line-height: 22px; margin: 0 5px 0 0; text-align: center; color: #ffffff; background: url(../../general/entry-baloon.gif) no-repeat 0 center; }
	.article-tags { margin: 15px 0; padding: 3px 8px; background-color: #e4e4e4; color: #666666; font-size: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
	.article-tags a { color: #000000; text-decoration: none; }
	.article-tags a:hover { text-decoration: underline; }
	.article-tags-support { float: left; width: 530px; padding: 16px; margin: 10px 0; border: 4px solid #e4e4e4; }
	
	.article-comments { padding: 10px 0; }
	.article-comments h3 { margin: 0 0 15px 0; }
	.article-comments ul { list-style-type: none; }
	.article-comments li { overflow: hidden; margin: 0 0 3px 0; padding: 14px 0; border-bottom: 1px solid #e4e4e4; background-color: #f2f2f2; }
	.article-comments-author { float: left; font-weight: bold; text-align: center; width: 100px; }
	.article-comments-author span { color: #999999; font-style: italic; font-weight: normal; }
	.article-comments-author-avatar { background: url(../../general/avatar.jpg) no-repeat; height: 48px; margin: 0 auto; overflow: hidden; width: 48px; }
	.article-comments-author-avatar img { height: 48px; width: 48px; }
	.article-comments-comment { float: right; width: 436px; padding: 0 15px; position: relative; }
	.article-comments-date { color: #666666; float: right; font-size: 10px; }
	.article-comments-subject { font-size: 12px; font-weight: bold; color: #666666; }
	.article-comments-body { border-top: 1px solid #e4e4e4; clear: both; margin: 5px 0 0 0; padding: 10px 3px; background-color: #ffffff; }
	
	/* 5.3 LOGIN POPUP
	-----------------------------------------------*/

	/* Style for the contact form and status messages */
	#loginForm, .statusMessage { color: #515151; background-color: #0d1730; border: none; }

	/* The form dimensions */
	#loginForm { width: 200px; height: 250px; padding: 0 15px 15px 15px; margin: 0 auto; }

	/* Position the form in the middle of the window (if JavaScript is enabled) */
	#loginForm.positioned { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin-top: auto; margin-bottom: auto; }

	/* Dimensions and position of the status messages */
	.statusMessage { display: none; margin: auto; width: 200px; height: 40px; padding: 10px; position: fixed; top: 0;bottom: 0; left: 0;right: 0; }
	.statusMessage p { text-align: center; margin: 0; padding: 0; }

	/* The header at the top of the form */
	#loginForm h2 { font-size: 18px/24px; font-style: bold; letter-spacing: 5px; margin: 0px 0px 0px -15px; padding: 10px; width: 210px; color: #3898b1; background: #0e1528 15em -3em; border-bottom: 1px solid #ffffff; }

	/* Give form elements consistent margin, padding and line height */
	#loginForm ul { list-style: none; margin: 0; padding: 0; }
	#loginForm ul li { margin: 10px 0 0 0; padding: 0; }
	#loginForm input, #loginForm label {line-height: 10px; }
	#formButtonsLogin { margin: 10px 0 0 0;}

	/* The field labels */
	.labelLogin{ display: block; text-align: right; width: 12px; padding: 0px 0px 10px 0; margin: 0 0 0 0; font-weight: bold; }

	/* The fields */
	.inputLogin { display: block; margin: 0; padding: 5px; width: 80%; font-family: 'Rosario', Arial; font-size: 12px; border: 1px solid #aaaaaa; background: #ffffff; }

	/* Place a border around focused fields, and hide the inner shadow */
	#loginForm *:focus {
	  border: 1px solid #3898b1;
	  outline: none;
	  box-shadow: none;
	  -moz-box-shadow: none;
	  -webkit-box-shadow: none;
	}

	/* Display correctly filled-in fields with a green background */
	#sendLoginData, #cancelLoginData { float: left; margin: 15px 20px 10px 0px; width: 5.4em; padding: .5em; border: none;color: #ffffff; background: #E86200; font-size: 1em; font-variant:small-caps;
	 line-height: 1em; font-weight: bold;
	  opacity: .7;
	  -webkit-appearance: none;
	  -moz-transition: opacity .5s;
	  -webkit-transition: opacity .5s;
	  -o-transition: opacity .5s;
	  transition: opacity .5s;*/
	}

	#sendLoginData,
	#sendLoginData,
	#cancelLoginData,
	#cancelLoginData { cursor: pointer; opacity: 1;}

	#cancelLoginData { background: #E86200; }

	/* Header/footer boxes */
	.wideBox { clear: both; text-align: center; margin: 70px; padding: 10px; background: #ebedf2; border: 1px solid #333;}
	.wideBox h1 { font-weight: bold; margin: 20px; color: #666; font-size: 1.5em; }