/***** Clear Styles *****/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;font-weight:normal}
ol,ul{list-style:none;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
a, a:hover, a:active {outline: none;text-decoration:none;color:inherit;}
a:hover {text-decoration:underline}
html {overflow-y: scroll;}

/***** Custom Styles *****/
body{font-family:"Open Sans",Helvetica,Arial,sans-serif;font-size:14px;color:#389fff;background:#222;}

.top{background:url("images/bg.png") repeat #303135;padding-top:10px;border-bottom:1px solid #444444;}
.bottom{background:url("images/bgBlue.png") repeat #389eff;color:#ddd;color:#fff;text-shadow: 0px -1px 0px #808080;filter: dropshadow(color=#808080, offx=0, offy=-1);-webkit-box-shadow: inset 0px 0px 10px 0px #000;-moz-box-shadow: inset 0px 0px 10px 0px #000;box-shadow: inset 0px 0px 10px 0px #000;}

.top .content{width:800px;margin:0px auto;}
.bottom .content{width:800px;margin:0px auto;padding-top:30px;}
h1{text-align:center;font-size:28px;font-weight:bold;text-shadow: 0px -1px 0px #000000, 0px 1px 0px rgba(200,200,200,0.3);}
h2{text-align:center;font-size:16px;font-weight:bold;text-shadow: 0px -1px 0px #000000, 0px 1px 0px rgba(200,200,200,0.3);}
.instructions{margin:50px 0px 0px 100px;width:300px;text-shadow: 0px -1px 0px #000000, 0px 1px 0px rgba(200,200,200,0.3);}
.title{font-weight:bold;margin-bottom:10px;}

.twitter{margin:30px 0px 0px 120px;width:200px;font-family:"Open Sans",Helvetica,Arial,sans-serif;font-size:16px;color:#ddd;padding:15px;border:1px solid #444444;background-color:#303135;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .75);-moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .75);box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .75);text-shadow: 1px 2px 0px #000;filter: dropshadow(color=#000000, offx=1, offy=2);}
input:focus{outline: none;-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .75), 0px 0px 5px 0px #2c7ecc;-moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .75), 0px 0px 5px 0px #2c7ecc;box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .75), 0px 0px 5px 0px #2c7ecc;}

.outputSection{min-height:400px;width:285px;margin:40px 0px 0px 0px;border:1px solid #444444;background-color:#303135;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box-shadow: inset 0px 0px 21px 0px rgba(0, 0, 0, .75);-moz-box-shadow: inset 0px 0px 21px 0px rgba(0, 0, 0, .75);box-shadow: inset 0px 0px 21px 0px rgba(0, 0, 0, .75);}
.outputSectionFlash{min-height:400px;width:285px;float:right;margin:40px 0px 0px 0px;border:1px solid #444444;background-color:#303135;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box-shadow: inset 0px 0px 21px 0px rgba(0, 0, 0, .75), 0px 0px 15px 0px #2c7ecc;-moz-box-shadow: inset 0px 0px 21px 0px rgba(0, 0, 0, .75), 0px 0px 15px 0px #2c7ecc;box-shadow: inset 0px 0px 21px 0px rgba(0, 0, 0, .75), 0px 0px 15px 0px #2c7ecc;}

.output{font-size:14px;color:#ddd;padding:20px;display:none;text-shadow: 1px 2px 0px #000;filter: dropshadow(color=#000000, offx=1, offy=2);}

.originalOutputPrompt{margin-top:100px;text-align:center;font-size:14px;color:#ddd;text-shadow: 1px 2px 0px #000;filter: dropshadow(color=#000000, offx=1, offy=2);}

.twitterButton{width:150px;margin:25px 0px 0px 160px;text-align:center;border:1px solid #205d96;background-color:#2c7ecc;color:white;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.twitterButton:hover{cursor:pointer;-webkit-box-shadow: 0px 0px 10px 0px #2c7ecc;box-shadow: 0px 0px 10px 0px #2c7ecc;color:#ddd}
.twitterButton .innerborder{padding:8px 3px;border-top:1px solid #aaa;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}

.horz-related{width:730px;margin:0px auto 25px auto;}


.leftColumn{width:400px;float:left;}
.leftColumn .blockAd{margin:20px 0px 0px 90px;}
.rightColumn{width:300px;float:right;}

.viewportMobile{display:none;}

.spacer{clear:both;height:20px;}

.bottom .foot1{float:left;width:240px;margin-right:40px;}
.bottom .foot2{float:left;width:240px;margin-right:40px;}
.bottom .foot3{float:left;width:240px;}
.bottom .footSpacer{clear:both;height:30px;}


/** Tablet Portrait size to standard 960 (devices and browsers) **/
@media only screen and (min-width: 569px) and (max-width: 960px) {
	
	.top .content{width:600px;}
	.bottom .content{width:600px;}

	.leftColumn{width:310px;}
	.leftColumn .instructions{width:300px;margin:50px 0px 0px 0px;}
	.leftColumn .twitter{margin-left:40px;}
	.leftColumn .twitterButton{margin-left:80px;}
	.leftColumn .blockAd{margin-left:3px!important;}
	
	.rightColumn{width:290px;}

	.bottom .content div{margin-bottom:35px!important;}
	.bottom .content div:nth-child(4) {margin-bottom:0px!important;}
	
}

/** Mobile Phones (both Portrait and Landscape) **/
@media only screen and (min-width : 0px) and (max-width : 568px) { 
	
	.top .content{width:310px;}
	.bottom .content{width:310px;}
	
	.leftColumn{width:310px;}
	.leftColumn .instructions{margin:50px 0px 0px 5px;}
	.leftColumn .twitter{margin-left:40px;}
	.leftColumn .twitterButton{margin-left:80px;}
	.leftColumn .blockAd{margin-left:3px!important;}
	
	.rightColumn{width:300px;}
	
	.bottom .content div{width:300px!important;margin:10px auto 35px auto!important;float:none!important;}
	.bottom .content div:nth-child(4) {margin-bottom:0px!important;}
	
	.viewportMobile{display:inline;}
	.viewportNormal{display:none;}
	
}