body { margin:0; height:100%; }
#content { position:absolute; height:100%; width:100%; overflow:hidden; font-family:sans-serif; color:white; background:#222; }
iframe { border:none; opacity:.9; }
img { border:none; }
.clear { clear:both; }

.js.opacity #ribbon .shadow { opacity:.5; }
.js #backdrop { display:block; }
.js.no-opacity #backdrop { background:#222; }
.js.opacity #backdrop { opacity:.75; }
.js.opacity #ribbon { display:none; }
.js.opacity #content .frame .overlay { display:block; }
.rgba #intro, .rgba #custom-caption { background:rgba(0,0,0,.9); }
.rgba #intro { border:6px solid rgba(0,0,0,.5); }

#content .frame { position:relative; height:50%; width:98%; margin:0 auto; background:#F0F0F0; }
#content .frame .spacer { position:absolute; width:100%; background:black; top:0; bottom:0; }
#content .frame.top .spacer { margin-bottom:22px; }
#content .frame.bottom .spacer  { margin-top:22px; }
#content .frame iframe { width:100%; height:100%; z-index:0; }
#content .frame .overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:white url(images/loading.gif) no-repeat center center; z-index:5; opacity:.75; display:none; }

#content a { color:white; }

#intro { position:absolute; left:50%; top:10%; margin-left:-22em; width:44em; height:80%; background:black; border:6px solid black; border-radius:5px; -moz-border-radius:5px; box-shadow:0 0 5px 2px rgba(0,0,0,.25); -moz-box-shadow:0 0 5px 2px rgba(0,0,0,.25); -webkit-box-shadow:0 0 15px -2px rgba(0,0,0,.5); z-index:100; overflow:auto; display:none; }
#intro .hello, #intro .letter { padding: 10px 20px; }
#intro .close { position:absolute; top:20px; right:20px; }
#intro h1 { font-size:28px; letter-spacing:-.05em; margin-top:10px; margin-bottom:15px; }
#intro h1 em { padding:4px 0; line-height:38px; background:#CA0002; }
#intro h2 { color:#F0F0F0; font-size:24px; letter-spacing:-.05em; margin-top:0; }
#intro .hello { background:#A50002; color:white; border-bottom:2px dotted white; }
#intro .hello img { vertical-align:bottom; }
#intro .hello .logowtf { background:#F0F0F0; padding-left:20px; margin-left:-20px; }
#intro form input { border:none; height:1.5em; margin-left:5px; }
#intro form input[type="text"] { padding:0 2px; }
#intro .letter { color:#F0F0F0; font-size:.9em; }
#intro .ps { font-style:italic; font-size:.8em; margin:1em 0; }
#intro p.ps { float:left; }
#intro form.ps { float:right; }
#backdrop { position:absolute; top:0; left:0; width:100%; height:100%; background:black; display:none; z-index:90; }

.logocnn { font-size:36px; font-weight:normal; font-style:normal; letter-spacing:-.1em; padding:0 4px; vertical-align:bottom; }

#ribbon { position:absolute; top:50%; height:44px; width:100%; margin-top:-22px; z-index:10; background:white; cursor:row-resize; }
#ribbon .shadow { position:absolute; top:0; left:0; width:100%; height:100%; box-shadow:0 0px 20px 2px rgba(100,50,30,.5); -moz-box-shadow:0 0px 20px 2px rgba(100,50,30,.5); -webkit-box-shadow:0 0px 20px 2px rgba(100,50,30,.5); }
#ribbon .logocnn { line-height:38px; }
#target-caption { width:99px; height:38px; font-size:34px; line-height:38px; text-transform:uppercase; font-weight:bold; letter-spacing:-0.075em; text-indent:4px; }
#target-caption.default { text-indent:-9999px; background:url(images/cnn-s.png) top left no-repeat; }
#ribbon .side { position:relative; margin-top:3px; height:38px; width:50%; float:left; z-index:1000; }
#ribbon .side.left { color:#CA0002; background:#F0F0F0; text-align:right; }
#ribbon .side.right { position:relative; background:#CA0002; }
#ribbon .side .control { position:absolute; top:0; z-index:20; }
#ribbon .side.right .control { line-height:38px; }
#ribbon .side.right form { left:20%; padding-left:1em; opacity:.75; }
#ribbon .side.left .twitter-share-button{ position:absolute; top:10px; right:20%; opacity:.75; }
#ribbon .side.left #fblike { top:10px; right:45%; opacity:.75; }

#credits { position:absolute; bottom:0; right:50px; background:#F0F0F0; border:2px solid white; border-bottom:0; padding:5px 7px; font-size:12px; border-top-left-radius:5px; border-top-right-radius:5px; z-index:50; }
#credits span { margin-right:7px; padding-right:7px; border-right:1px solid gray; }
#credits span.chromakode { border-right:none; padding-right:0; margin-right:0; }
#credits, #credits a { color:black; }
#credits img { margin-right:2px; vertical-align:middle; }