@import url(http://fonts.googleapis.com/css?family=Raleway);

@font-face {
  font-family: 'junction';
  src: url('fonts/junction/junction.eot');
  src: local('☺'), url('fonts/junction/junction.otf') format('otf'), url('fonts/junction/junction.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.junction {
  font-family: junction;
}
h1.junction {
  font-size: 26px;
}

html {
  background-color: #D1D3D4;
}
body {
  border-top: 3px solid #333;
  margin: 0px;
  background:none;
}
h1.fancy {
  font-size: 50px;
}
.fancy {
  font-family: 'Raleway';
  color: #888 !important;
  margin: 30px 0 0 0!important;
  
}
hr.space {
  visibility: hidden;
}
.listless{
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.inline {
  display:inline;
}
.fine {
  font-size: 11px;
  color: #999;
}
.right {
  float: right;
}
.center{
  display: block;
  text-align: center
}

#wrapper {
  margin-top: 0;
  background: none;
  position: relative;
}
#header{
  padding: 0
}
#main {
  padding: 20px 0 0 0
}
#access, #access .menu-header{
  margin: 0 auto;
}
#site-title {
  font-size: 95px;
  margin-bottom: 0px; 
  height: 140px;
  margin-top: 10px;
  width: 100%;
  line-height: 1;
  background: url('img/popcornjs.png') no-repeat center;
  text-indent: -9999em;
}
.brands {
  display: block;
  margin-bottom: 0px; 
  width: 100%;
  text-indent: -9999em;
}
#footer .brands {
  height:83px;
}


.pocornjsbrand {
  background: url('img/popcornjs.png') no-repeat center;
}
.butterbrand {
  background: url('img/butterapp-footer.png') no-repeat center;
}

#site-description {
  margin: 6px 0 3px 0;
  width: 100%;
  text-align: center;
}
#sidebar {  
  margin-top: 20px;
}
#sidebar h1{  
  color: black;
  line-height: 1.5em;
  margin: 0 0 20px 0;
}
.subnav {
}
.subnav li {
  font-size: 18px;
  padding: 5px 5px 5px 0px;
}

.listitems li {
  padding: 10px;
  background: #eee;
  position: relative;
     -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
          border-radius: 9px;
  -webkit-box-shadow: 0 1px 0 #ccc, 
             0 2px 0 #c9c9c9,
             0 3px 0 #bbb,
             0 4px 0 #b9b9b9,
             0 5px 0 #aaa,
             0 6px 1px rgba(0,0,0,.1),
             0 0 5px rgba(0,0,0,.1),
             0 1px 3px rgba(0,0,0,.3),
             0 3px 5px rgba(0,0,0,.2),
             0 5px 10px rgba(0,0,0,.25),
             0 10px 10px rgba(0,0,0,.2),
             0 20px 20px rgba(0,0,0,.15);
}
.listitems li.instance-property .typeofodc{
  background: url('img/ribbon-red.png') no-repeat center;
}
.listitems li.static-methods .typeofodc{
  background: url('img/ribbon-blue.png') no-repeat center;
}
.listitems li.instance-methods .typeofodc{
  background: url('img/ribbon-yellow.png') no-repeat center;
}
.listitems li.popcorn-js-method .typeofodc{
  background: url('img/ribbon-pink.png') no-repeat center;
}
.listitems li.native-pass-through-method .typeofodc{
  background: url('img/ribbon-green.png') no-repeat center;
}
.listitems li.parsers .typeofodc{
  background: url('img/ribbon-darkred.png') no-repeat center;
}
.listitems li.player .typeofodc{
  background: url('img/ribbon-darkgreen.png') no-repeat center;
}
.listitems li.modules .typeofodc{
  background: url('img/ribbon-purple.png') no-repeat center;
}
.listitems li.effects .typeofodc{
  background: url('img/ribbon-orange.png') no-repeat center;
}
.listitems li.plugins .typeofodc{
  background: url('img/ribbon-black.png') no-repeat center;
}

.listitems li .typeofodc{
  width: 134px;
  font-size: 12px;
  color: #f4f4f4;
  height: 34px;
  padding: 5px 10px;
  font-family: sans-serif;
  position: absolute;
  top: 15px;
  right: -12px;
}
.listitems a {
  color: #333;
}

.listitems .type-API a {
	text-decoration: underline;
}

.listitems .typeofodc a {
  color: #fff;
}

.listitems p {
  margin: 0;
  padding: 0;
}
.listitems h2 {
  font-size: 20px;
  width: 545px;
  font-family: monospace;
  border-bottom: none;
}
.listitems .meta{
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ddd;
  padding: 5px 10px ;
     -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
          border-radius: 9px;
  -webkit-box-shadow: 
    0 1px 0 #ddd inset, 
    0 2px 0 #ccc inset,
    0 3px 0 #bbb inset,
    0 4px 0 #b9b9b9 inset,
    0 5px 0 #aaa inset,
    0 6px 1px rgba(0,0,0,.1) inset,
    0 0 5px rgba(0,0,0,.1) inset,
    0 1px 3px rgba(0,0,0,.1) inset,
    0 10px 10px rgba(0,0,0,.2) inset;
  -moz-box-shadow: 
    0 1px 0 #ddd inset, 
    0 2px 0 #ccc inset,
    0 3px 0 #bbb inset,
    0 4px 0 #b9b9b9 inset,
    0 5px 0 #aaa inset,
    0 6px 1px rgba(0,0,0,.1) inset,
    0 0 5px rgba(0,0,0,.1) inset,
    0 1px 3px rgba(0,0,0,.1) inset,
    0 10px 10px rgba(0,0,0,.2) inset;
  -o-box-shadow: 
    0 1px 0 #ddd inset, 
    0 2px 0 #ccc inset,
    0 3px 0 #bbb inset,
    0 4px 0 #b9b9b9 inset,
    0 5px 0 #aaa inset,
    0 6px 1px rgba(0,0,0,.1) inset,
    0 0 5px rgba(0,0,0,.1) inset,
    0 1px 3px rgba(0,0,0,.1) inset,
    0 10px 10px rgba(0,0,0,.2) inset;
  box-shadow: 
    0 1px 0 #ddd inset, 
    0 2px 0 #ccc inset,
    0 3px 0 #bbb inset,
    0 4px 0 #b9b9b9 inset,
    0 5px 0 #aaa inset,
    0 6px 1px rgba(0,0,0,.1) inset,
    0 0 5px rgba(0,0,0,.1) inset,
    0 1px 3px rgba(0,0,0,.1) inset,
    0 10px 10px rgba(0,0,0,.2) inset;
}
#container.wide, .wide #content{
  margin: 0px 0px 40px 0px;
}
h1 {
  margin-bottom: 20px;
}
h1 .small {
  font-size: 0.3em; color:#000; font-weight:normal;display:block
}
h2 {
  font-size: 2em; color: #222; margin: 40px 0 0 0; clear: both;
}
h3 {
  margin: 40px 0 0 0; font-weight: bold; font-size: 1.5em;font-weight: normal;
}
h4{
  margin: 10px 0 4px 0;
}
a {
 color: #336699; text-decoration: none
}
a img{
  border: none
}
hr {
  border: 0; width: 80%; border-bottom: 1px solid #aaa
}
#footer {
  border-top: 3px solid #222;
  background: #333;
  padding: 30px 0px 50px 0px;
  margin: 50px 0 0 0;
}
#footer a {
  margin: 0px;
  color: #fff;
}
#footer img {
  margin: 0px 10px;
}
#footer p {
  margin: 0 0 15px 0;
  padding: 0px;
}
pre {
  font-size: 12px;  padding: 15px;
}
nav ul li a{ 
  padding:2px 10px;
  font-size: 15px;
  text-decoration: none;
  color: #
}
.last{
  clear:right;
}
.half, .quarter, .third, .fifth, .sixth, .twoquarter, .threequarter{
  float: left;
  margin-left: 0px !important;
  margin-right: 0px !important;
}
.half{
  width: 45%;
  margin-right: 5%;
}
.last.half{
  width: 49%;
}
.quarter {
  width: 20%;
  margin-right: 5%;
}
.twoquarter {
  width: 45%;
  margin-right: 5%;
}
.threequarter{
  width: 70%;
  margin-right: 5%;
}
.last.quarter {
  width: 25%;  
}
.last.twoquarter {
  width: 50%;  
}
.last.threequarter{
  width: 75%;
}
.last.half, .last.quarter, .last.twoquarter, .last.threequarter{
  margin-right: 0;
}

#content .box h3 {
  font-family: sans-serif;
  font-weight: normal;
  font-size: 18px;
  color: #333;
  margin: 0px;
  line-height: 1;
}
.box{
  width: 175px;
  padding: 10px;
  margin: 20px;
  float: left;
}
.attachment-thumbnail{
  border: 1px solid #ccc;
}
#menu-footer-menu{
  display: block; clear: both; margin: 0px 0px 10px 0px
}
#menu-footer-menu li { margin-right: 10px; list-style-type: none; display: inline}

input[type=text] {
  border: 1px solid #aaa;
  outline: none;
  padding: 5px 10px;
     -moz-border-radius: 12px; /* FF1+ */
  -webkit-border-radius: 12px; /* Saf3-4 */
          border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome */ 
}

.panel {
  background: #aaa;
  height: 350px;
}

#video {
  width: 550px;
  margin: 15px;
  -webkit-box-shadow: rgba(0,0,0, .5) 0 0 5px;  
     -moz-box-shadow: rgba(0,0,0, .5) 0 0 5px;  
       -o-box-shadow: rgba(0,0,0, .5) 0 0 5px;  
          box-shadow: rgba(0,0,0, .5) 0 0 5px;  
}

#thecode{
  display:block;
  color: #000;
}
#content #runDemo{
  font-weight: normal;
  cursor: pointer;
  text-decoration: none;
  background: #8DC63F;
  color: #333;
  border: 3px solid #6Da631;
  font-size: 16px;
  font-family: sans-serif;
  text-align: center;
  padding: 5px 0;
  margin : 0px 10px 0px 30px;
  width: 230px;
  
  float: left;
  
}

#content pre {
    font-size: 11px;
    padding: 10px;
    overflow-x: auto;
    background-color: #FBF9EA;
    border: 1px solid #E2E1D5;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin: 0px 0 10px 0;
    border-top-left-radius: 2px 2px;
    border-top-right-radius: 2px 2px;
    border-bottom-right-radius: 2px 2px;
    border-bottom-left-radius: 2px 2px;
}
.demo {
  height: 140px;
  float: right;
  width: 310px;
}
.butter-plugin{
  border: 4px solid #666;
  background-color: #F4f4f4;
  margin: 0 0 10px 0;
  height: 300px;
  width: 325px;
  padding: 0px;
  float: right;
  text-align: center;
  overflow: hidden;
}

.sidepanel {
  margin: 15px;
  height: 240px;
  width: 320px;
  float: right;
}

/* button */
#access {
  background: none;
}
#access .menu-header, div.menu {
  width: 550px;
}

#menu-main-menu li {
  margin-right: 10px
}

#menu-main-menu li.current-menu-item a, #menu-main-menu li a:hover{
  color: #fff;
  background: #333;
  -webkit-box-shadow: 0px 2px 2px #888;
  -moz-box-shadow: 0px 2px 2px #888;
  -o-box-shadow: 0px 2px 2px #888;
  box-shadow: 0px 2px 2px #888;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.widget-area li {
  margin-bottom: 30px
}

#content .sponsors img {float: left; width: 58px; padding: 0 10px 0 0}
.sponsors li {height: 120px;}

#primary, #secondary {
  width: 230px;
}