greenshot/css/main.css

/**********************************************/
			/* BASE STYLES */
			/**********************************************/
			
			body {
				margin: 0;
				padding: 0;
				font-size: 16px;
				font-family: 'Lato', 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
				color: #333;
				padding-bottom: 10em;
			}
			
			.main-wrapper {
				width: 1150px;
				margin: 0 auto;
			}
			
			.body-content {
				display: inline-block;
				float: left;
				width: 950px;
				box-sizing: border-box;
			}
			
			h1 {
				font-family: 'Bangers', cursive;
				font-size: 2em;
				color: #6cb711;
				font-weight: normal;
			}
			
			h3 {
				color: #6cb711;
			}
			
			a {
				color:#000;
			}
			
			a:hover {
				color:#6cb711;
				text-decoration: none;
			}
			
			.clearfix:before, 
			.clearfix:after { content: " "; display: table; }
			.clearfix:after { clear: both; }
			.clearfix       { *zoom: 1; }
			
			/* wordpress theme compatibility */
			img.alignleft {
				float: left;
				padding: 4px 10px 4px 0;	
			}
			img.alignright {
				float: right;
				padding: 4px 0 4px 10px;			
			}


			/**********************************************/
			/* HEADER, NAVI */
			/**********************************************/

			.header-wrapper {
				margin-bottom:20px;
				background-color: #3d3d3d;
				padding-top: 1em;
				box-sizing: border-box;
			}
			
			.header {
				position: relative;
				width: 1150px;
				margin: 0 auto;
				min-height: 135px;
			}
			
			.logo {
				position: absolute;
				bottom: 0;
			}
			.logo img {
				display:block;			
			}
			
			nav {
				width: 100%;
				display: inline-block;
				text-align: right;
				padding-right: 200px;
				padding-left: 150px;
				box-sizing: border-box;
			}
		
			nav a,
			nav a:visited {
				font-family: 'Bangers', cursive;
				font-size: 2em;
				text-decoration: none;
			    color: white;
			    margin-left: 20px;
				white-space: nowrap;
			}
			
			nav a:hover, nav a.active {
			    color: white;
			    border-bottom: 3px solid #89e916;
			}
			
			.servicelinks {
				position:absolute;
				right:0;
				margin-bottom:20px;
				width: 100%;
				box-sizing:border-box;
				padding-right:200px;
				text-align: right;
				font-size:12px;
				color:#666;
			}
			.servicelinks a {
				color:#999;
			}

                        /* blog prev/next */
			ul.pager {
				list-style-type: none;
				margin:0;
				padding:0;
			}
			ul.pager i.fa {
				font-family: 'FontAwesome'
			}
			ul.pager li.previous {
				display:inline;
			}
			ul.pager li.next {
				display:inline;
				float:right
			}
			ul.pager a {
				text-decoration: none;
			}
			
			

			/**********************************************/
			/* FOOTER */
			/**********************************************/

			footer {
				padding: 20px 0;
				color: #ffffff;
				font-size: 0.8em;
				position: fixed;
				width: 100%;
				left: 0;
				bottom: 0;
				background-color: #3d3d3d;
			}
			
			footer .content-wrapper {
				width: 1150px;
				margin: 0 auto;
				padding-left: 2em;
			}
			
			footer a {
				color: #fff;
				text-decoration: none;
			}
			
			footer a:hover {
				color: #6cb711;
			}
			
			footer ul, footer li, footer a {
				color: #ffffff;
				display: inline-block;
				margin: 0 10px 0 0;
				padding: 0;
				text-decoration: none;
				list-style: none;
			}
			

			/**********************************************/
			/* CTA BUTTONS */
			/**********************************************/

			a.cta {
				font-family: 'Bangers', cursive;
				font-size: 2em;
				color: #ffffff;
				background-color: #26b3e1;
				text-decoration: none;
				padding: 5px 18px 3px 15px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
				width: 250px;
				display: block;
				text-align: center;
			}
			
			a.cta:hover {
				background-color: #6cb711;
			}
			
			.cta-button-main {
				float: left;
				margin-top: 1em;
			}
			
			.cta-button-main .btn-wrapper {
				float: left;
			}
			
			.cta-button-main .btn {
				float: left;
				
			}
			
			.cta-button-main .description {
				float: left;
				width: 100%;
				color: #6d6d6d;
				font-size: 0.8em;
				margin-top: 0.3em;
				line-height: 0.9em;
				text-align: center;
			}
			
			.cta-button-main .aside {
				float: left;
				font-family: 'Bangers', cursive;
				font-size: 2em;
				color: #26b3e1;
				text-decoration: none;
				padding: 5px 18px 3px 15px;
			}
			

			/**********************************************/
			/* ADS */
			/**********************************************/

			.ga-skscrpr {
				display: inline-block;
				float: right;
			}
			
			.ga-skscrpr .ga-skscrpr-wrapper {
				width: 160px;
				height: 600px;
				display: inline-block;
			}
			
			.ga-skscrpr .ga-skscrpr-text {
				text-align: right;
				color: #3d3d3d;
				font-size: 10px;
			}
			
			.ga-ldrbrd {
				display: inline-block;
				margin-bottom: 3em;
				width: 100%;
				max-width: 728px;
			}
			
			.ga-ldrbrd img {
				 width: 728px;
				 height: 90px;
			}
			

			/**********************************************/
			/* SMALL SCREENS */
			/**********************************************/

			@media screen and (max-width: 1150px) {
				
				.main-wrapper {
					width: auto;
				}
				
				.header {
					padding: 0 1em;
					width: 100%;
					box-sizing: border-box;
				}
				
				.body-content {
					width: 100%;
					padding: 0 1em;
				}
				
				.servicelinks,
				nav {
					padding-right: 0;
				}
				
				.ad-leaderboard img {
					width: 100%;
				}
				
				.ad-skyscraper {
					float: left;
					width: 100%;
					text-align: center;
				}
				.ad-skyscraper .ad-skyscraper-wrapper {
					width: 400px;
					height: 300px;
				}
				.ad-skyscraper .ad-skyscraper-text {
					text-align: center;
				}
				
			}
			
			@media screen and (max-width: 850px) {
				body {
					font-size: 14px;
				}
				a.cta {
					width: 170px;
				}
				.cta-button-right {
					clear: both;
				}
				.cta-button-right .aside {
					float: right;
				}
				.ad-skyscraper .ad-skyscraper-wrapper {
					width: 80%;
				}
			}