/* @group Reset Styles */

/* These will strip all the default styling applied to elemnts accross various browsers. This gets us a common starting point */
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0; }
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
/* to preserve line-height and selector appearance */
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/*to enable resizing for IE*/
input,textarea,select{*font-size:100%;}
/*because legend doesn't inherit in IE */
legend{ color:#000; }

/* @end */

/* @group Typography */

body { font-size: 12px; line-height: 1.5em; font-family:  Verdana, Helvetica, sans-serif; color: #4f4f56; }

/* Headings */
h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #16668f;  }
h1, h2, h3 { letter-spacing: -1px; margin: 0 0 1em; }
h1 { font-size: 1.6em; margin-bottom: .5em; color: #003d5a; }
h1 em { color: #888; font-style: normal; }
h2 { font-size: 1.33em; margin-bottom: .3em; }
h2 em { color: #965c21; font-style: normal; }
h3 { font-size: 1.1em; }
h4 { font-size: 1.0em; }

/* Links */
a { color: #fd8b1a; font-weight: bold; }
a:hover { color: #55c6da; }
#content a[href^="http://"],
#content a[href^="https://"] { background: url(../images/g_externallink.gif) no-repeat center right; padding-right: 12px; }
#content a[href^="http://www.mochiads.com"],
#content a[href^="https://www.mochiads.com"],
#content a[href^="https://dev.mochiads.com"],
#content a[href^="https://staging.mochiads.com"],
#content a[href^="http://www.mochimedia.com"],
#content a[href^="https://www.mochimedia.com"],
#content a[href^="https://dev.mochimedia.com"],
#content a[href^="https://staging.mochimedia.com"] { background: transparent; padding-left: 0px; }

p a {  font-weight: bold; }

/* Paragraphs */
p { line-height: 1.5em; margin: 0em 0em 1em; color: #414244;  }
p strong {  }
p.note { color: #888; font-size: .9em; }

/* Emphasis */
em { font-style: italic; }
strong { color: #844a19; font-weight: bold; }

/* Lists */
ul, ol { line-height: 1.5em; margin: 0; padding: 0; list-style: none; }
ul li { margin: 0; padding: 0; }
ol li { list-style: decimal outside; }

dl {  }
dt { font-weight: bold; margin-bottom: .2em; color: #414244; }
dd { margin-left: 2em; margin-bottom: 2em; }

ul.bullet,
ol.bullet { margin: 0 0 20px; }
ul.bullet li { background: url("../images/g_eggbullet.gif") no-repeat left 3px; padding-left: 18px; color: #844a19; }
ol.bullet { color: #844a19; list-style-type: decimal; list-style-position: inside; }

/* Misc Typographical styles */
abbr { color: #c03; cursor: help; border-bottom: 1px dashed #c03; }
hr { border: none; border-bottom: 1px solid #aaa; background: none; height: 1px; }

.contextual { font-size: .9em; }
.footnote, .note { font-size: .9em; }

/* Images */
a img { border: none; }

/* Utility classes */
.clear { clear: both; height: 1px; overflow: hidden; font-size: 1px; }
.hide { display: none; }
.show { display: block; }

/* @end */

/* @group Layout */

html { background-color: #003d5a; }

h1#logo { background: url("../images/logo.gif") no-repeat; width: 190px; height: 50px; text-indent: -9999em; overflow: hidden;  position: absolute; top: -31px; left: 5px; margin: 0 !important;}
#content { position: relative; width: 550px !important; margin: 4em auto 0; text-align: center; background: #fff; border: 10px solid #ccc; padding: 2em 4em 3em; }
#content img { margin: 0 0 1em; }
#content h1 { margin: 0 0 1em; font-size: 2.4em; letter-spacing: -2px; }
#content p { margin: 0; font-size: 1.2em; }
#content p.note { font-size: 1em; margin-top: 1em; }

#accept #game { margin: 0 0 0em; border-top: 3px solid #eee; padding-top: 1em;}
#accept #game h2 { font-size: 1.6em; margin: 0 0 .5em;}

#accept #play { margin: 0em 0 3em; }
#accept #play p { margin: 0 0 1.5em; font-size: .9em; }
#accept #play a { margin: 0em 0 0; padding: .5em 1.4em; border: 3px solid #6b90a2; text-decoration: none; font-size: 1.5em; background: #c4e1ee; color: #314e5c; letter-spacing: -1px; }
#accept #play a:hover { background: #e3f6ff; color: #3d5a68; }

#accept #rank { padding: .5em 0 0; border-top: 3px solid #eee; }
#accept #rank p { margin: 0 0 1.5em; font-size: 1em;}


/* @end */

/* @group #accept */

#accept #rank { padding-top: 20px; }
#accept #rank h1 { margin-bottom: .5em; font-size: 1.8em; }

#accept table { width: 100%; }
#accept table thead th { background: #666; color: white; font-weight: bold; }
#accept table th,
#accept table td { padding: 2px 5px; }
#accept table tr.alt td { background: #DDEEFF; }
#accept table tbody td { text-align: left; padding-bottom: 4px; }
#accept table tbody td.number { text-align: right; font-weight: bold; }

/* @end */

/* @group #fb */

#fb #content h1 { margin-top: 20px; margin-bottom: 15px; font-size: 2.5em; }
#fb #fb_logo { background: url("../images/fb_logo.gif") no-repeat right top; width: 215px; height: 50px; margin: 30px auto 5px; }

.canvas a { color: #16668f;  }
.canvas .game_list {  }
.canvas .game_thumb {  }

.samples { margin-top: 3em; border-bottom: 3px solid #e1e1e1; padding-top: 5px; margin:0 0 20px 0;float:left;width:100%; }
.sample_games { float: left; width: 60%; margin:0 0 10px 0; }
.sample_sites { float: left; width: 36%; border-top:1px solid #ccc; margin:10px 0; padding:10px 15px 0;background:#eee; }
.sample_sites ul { margin: 0 0 20px;  }
.sample_sites ul li { list-style: circle; margin-left: 20px; }

.game_list li { width: 110px; height: 135px; float: left; position: relative; margin: 0px 0 10px 0; position: relative;overflow:hidden; }
.game_thumb { width: 110px; height: 135px; float: left; position: relative; margin: 0px 0 10px 0; position: relative;overflow:hidden; }
.game_thumb .thumb_link,
.game_thumb .thumb { display: block; border: 3px solid #aaa; padding: 3px; margin: 0px auto; }
.game_thumb .thumb_link,
.game_thumb .thumb_link img { width: 75px; height: 75px; }

.game_thumb .thumb_link { position: relative; }
.game_thumb .thumb_link .lb_enabled { display: block; width: 14px; height: 13px; background: url("../images/icon_trophy.png") no-repeat; position: absolute; right: -7px; top: -6px; }

.flyout_panel { border: 2px solid #965c21; position: absolute; top: -10px; left: 90px; background: #fff; padding: 3px
; font-weight: normal; font-size: .8em; color: #555; text-decoration: none; width: 150px; z-index: 200; }
/* .game_thumb .thumb_link:hover .popup { display: block !important; } */

.game_thumb .meta { text-align: center; }
.game_thumb .meta h3 { margin: 5px 0 2px 0px; font-size: 12px; line-height: 14px; overflow: hidden; }
.game_thumb .meta h3 a { color: #16668f; text-decoration: none; line-height: 14px; }
.game_thumb .meta h3 a:hover { text-decoration: underline; }
.game_thumb .meta h4 { margin: 1px 0 0px 0; font-size: 10px; line-height: 12px; font-weight: normal; color: #5d5d60; overflow: visible; }
.game_thumb .meta h4 a { color: #16668f; font-weight: normal; text-decoration: none; }
.game_thumb .meta h4 a strong { color: #16668f; font-size: 10px; font-weight: normal; }
.game_thumb .meta h4 a:hover { text-decoration: underline; }
.game_thumb .meta p { font-size: 10px; margin: 5px 0 0 85px; line-height: 1.1em; letter-spacing: 0px; }


/* @end */