@font-face { font-family: Agency; src: url('AgencyFB.woff'); } html,body,div,header,footer,a,p,h1,h2,h3,h4,h5,ul{ padding:0; margin:0; outline: none } body { padding-bottom: 40px; color:#d8d8d8; background: url('../img/bg_b.jpg') 50% 0% repeat; font-family: 'Century Gothic',verdana,arial,helvetica,sans-serif; overflow-x:hidden; } a{ text-decoration: none; color:#00baff; } h1{ padding-bottom:5px; } h2{ padding:20px 0 10px; } h3{ padding:10px 0; } h4{ padding:30px 0 5px; text-align: center } h1,h2,h3,h4{ color:#EFEFEF; } .iioapps canvas{ border:1px solid #6F6F6F; cursor: pointer } .iioapps canvas:hover{ border:1px solid #00baff; } /*BACKGROUND*/ #bg_glow{ position: absolute; width: 1024px; left: 50%; margin-left: -512px; z-index: -10; top:0; } /*COLORBAR*/ .colorbar{ width:100%; height:5px; background-color: white; z-index: 101; } /*MAIN*/ #main{ max-width: 900px; margin:10px auto; } #content{ margin-left: 130px; margin-top: 20px; margin-right: 25px; } #content p{ padding-top: 5px; padding-bottom: 5px; } .iioapps{ margin-top: 15px; } /*HEADER*/ #header{ position: fixed; top:6px; left:0; font-family: Agency; z-index: 100 } #header ul{ list-style: none; } #iio{ margin-bottom:10px; } #iio a{ font-size: 80px; color:white; background-color: #00baff; padding: 0 25px 10px; border-top: 1px solid #00baff; border-bottom: 1px solid #00baff; } #iio a:hover{ color:#00baff; background-color: white; } #header ul{ margin-top: 10px; } #header p{ border-bottom: 1px solid gainsboro; font-size: 26px; color:white; padding:5px 15px 5px 16px; } #header p:hover, #header .active{ background-color:white; color:#00baff; } /*FOOTER*/ #footer{ position: fixed; z-index: 100; left:0; bottom:5px; width:110px; font-size: 14px; font-family: Agency; background-color: white; color:black; padding:1px 0; } #footer a{ color:black; } #footer p{ text-align: center; padding: 3px 5px 0px 0px; } #footer a:hover{ color:#00baff; } #footer .left{ padding-left: 5px; } /*ARROW BUTTON CONTAINER*/ .arrows_btns{ width:100%; margin: 30px 0px; } .btn_wrap{ width: 380px; margin:0 auto; } /*TESTS*/ #categories a{ color:white; font-size: 20px } #categories{ padding: 10px 20px; list-style: square; } /*DEMOS*/ .demo_wrap{ float:left; margin-right: 20px; margin-bottom: 10px; } .demo{ border:1px solid white; } .demo_title{ padding-top: 10px } /* API */ #api_menu ul, #api_content ul{ list-style: none; overflow: hidden; } #api_menu{ width: 160px; color:black; height:100%; float:left; margin-left: -15px; margin-top: -16px; position: fixed; overflow-y: auto; /*background-color: white;*/ } #api_content{ margin-left: 165px } #api_content .api_list{ margin: 20px; } #api_content p{ padding-bottom: 6px; font-family: verdana; font-size: 14px; line-height: 1.4em; } .api_list_item{ font-size: 17px; margin: 0; border-left: 4px solid #e5e5e5; padding: 6px 10px; color: #e5e5e5; display: inline-block; font-family: monospace; } .api_list_info{ display: inline-block; font-size: 14px; margin-left: 0; } #api_items{ margin-bottom: 100px; } #api_menu h5{ font-size: 18px; color:white; padding: 5px; padding-top: 15px; border-bottom: 1px solid #e5e5e5; background-color: rgba(20, 20, 20, .4); } #api_content h2{ font-weight: normal; border-bottom: 1px solid #e5e5e5; } .api_item{ cursor: pointer; /*background-color: rgb(149, 18, 20); */ } .api_item:hover{ /*background-color: #00baff;*/ } .api_item_sub a{ display: block; padding:10px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; font-size: 14px; /*background-color: white;*/ font-weight: bold; background-color:rgba(30, 30, 30, .4); } .api_item_sub .hashed{ background-color: #444444; color:white; } .api_item_sub a:hover{ background-color: #00baff; color:black; } .divide{ border-top: 1px solid #6F6F6F; margin: 25px 0 25px; } #api_menu .api_property_list{ padding-left:4px; } #api_menu .api_property a{ border-top: 1px solid #6F6F6F; border-bottom: none; color: white; font-weight: normal; font-size: 11px; background-color:rgba(22, 22, 22, .4); } #api_menu .api_property a:hover{ background-color: #00baff; color:black; } #api_menu .first_prop a{ border-top: none; } #api_menu .api_property .hashed{ background-color: #00baff; color:black; font-weight: bold; } #api_menu .api_property_list{ } .overview_anchor{ position: absolute; top: -20px; } /* FULLSCREEN APP */ #iioapp_fullscreen{ position: absolute; top:0; bottom: 0; width: 100%; height:100%; z-index: 10; margin:0; padding:0; border: none; cursor: default; } #iioapp_fullscreen:hover{ border: none; } #fullscreen_header{ background-color:white; margin-top: -1px } #fullscreen_header h1{ color:black; display: inline-block; font-size:16px; font-weight: normal; padding: 0 10px 5px; } #fullscreen_header a{ padding: 0 10px 5px; } /* PRETTIFY CSS -------------------------------------------------- */ /* Pretty printing styles. Used with prettify.js. */ /* Vim sunburst theme by David Leibovic */ pre .str, code .str { color: #00baff; } /* string - green */ pre .kwd, code .kwd { color: #65B042; } /* keyword - dark pink */ pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */ pre .typ, code .typ { color: #F00000; } /* type - light blue */ pre .lit, code .lit { color: #00baff; } /* literal - blue */ pre .pun, code .pun { color: #E8E8E8; } /* punctuation - white */ pre .pln, code .pln { color: #E8E8E8; } /* plaintext - white */ pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */ pre .atn, code .atn { color: #e0c589; } /* html/xml attribute name - khaki */ pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */ pre .dec, code .dec { color: #89bdff; } /* decimal - blue */ pre.prettyprint, code.prettyprint { background-color: transparent; } pre.prettyprint { width: 95%; margin: 10px auto; padding: 0; border:none; overflow: auto; } /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */ li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9 { list-style-type: inherit; background-color: black;} /* Alternate shading for lines */ li.L1,li.L3,li.L5,li.L7,li.L9 { } @media print { pre .str, code .str { color: #060; } pre .kwd, code .kwd { color: #006; font-weight: bold; } pre .com, code .com { color: #600; font-style: italic; } pre .typ, code .typ { color: #404; font-weight: bold; } pre .lit, code .lit { color: #044; } pre .pun, code .pun { color: #440; } pre .pln, code .pln { color: #000; } pre .tag, code .tag { color: #006; font-weight: bold; } pre .atn, code .atn { color: #404; } pre .atv, code .atv { color: #060; } } .prettyprint ol.linenums li { padding-left: 10px; border-left: 3px #00baff solid; background:transparent; } pre{ background-color: black; font-family: monospace; font-size: 14px; tab-size: 2; } .prettyprint ol.linenums { list-style: decimal; margin-left: 6px; } /*BUTTON*/ .big-btn { font-family: 'Trebuchet MS'; display: inline-block; } .btn-iio, .btn-primary { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #49afcd; background-image: -moz-linear-gradient(top, #00baff, #0077b3); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00baff), to(#0077b3)); background-image: -webkit-linear-gradient(top, #00baff, #0077b3); background-image: -o-linear-gradient(top, #00baff, #0077b3); background-image: linear-gradient(to bottom, #00baff, #0077b3); background-repeat: repeat-x; border-color: #0077b3 #0077b3 #1f6377; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .btn-iio:hover, .btn-primary{ background-color: #49afcd; background-image: -moz-linear-gradient(top, #00A6E3, #0077b3); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00A6E3), to(#0077b3)); background-image: -webkit-linear-gradient(top, #00A6E3, #0077b3); background-image: -o-linear-gradient(top, #00A6E3, #0077b3); background-image: linear-gradient(to bottom, #00A6E3, #0077b3); background-repeat: repeat-x; border-color: #0077b3 #0077b3 #1f6377; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } a.btn-iio:hover{ text-decoration: none; color:white; } .big-btn a, .big-btn button { padding: 15px 10px; font-size: 20px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -khtml-border-radius: 15px; } .big-btn .grey{ text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); background-color: whiteSmoke; background-image: -moz-linear-gradient(top,white,#a1a1a1); background-image: -webkit-gradient(linear,0 0,0 100%,from(white),to(#a1a1a1)); background-image: -webkit-linear-gradient(top,white,#a1a1a1); background-image: -o-linear-gradient(top,white,#a1a1a1); background-image: linear-gradient(to bottom,white,#a1a1a1); background-repeat: repeat-x; border: 1px solid #BBB; border-color: #a1a1a1 #a1a1a1 #a1a1a1; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-bottom-color: #A2A2A2; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05); color: black; } .big-btn .grey:hover{ color:black; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); background-color: whiteSmoke; background-image: -moz-linear-gradient(top,#dedede,#a1a1a1); background-image: -webkit-gradient(linear,0 0,0 100%,from(#dedede),to(#a1a1a1)); background-image: -webkit-linear-gradient(top,#dedede,#a1a1a1); background-image: -o-linear-gradient(top,#dedede,#a1a1a1); background-image: linear-gradient(to bottom,#dedede,#a1a1a1); background-repeat: repeat-x; border: 1px solid #BBB; border-color: #a1a1a1 #a1a1a1 #a1a1a1; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-bottom-color: #A2A2A2; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05); } /*UNIVERSALS*/ a,h2,h5,canvas,input[type='submit'],.btn,#drag_overlay,.api_item{ -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; } #header p,#footer a{ -o-transition:.3s; -ms-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s; transition:.3s; } .top,.bottom{ position: fixed; } .top{ top:0 } .bottom{ bottom: 0 } .left{float:left} .right{float:right} .blue{ background-color:#00baff; color:white; padding:0 3px; } .kwd{ color: #65B042; } .red{ color: red; } .small{ font-weight: normal; font-size: 14px } .big-arrow{ display: none; } .clear{ clear:both; display: block } /*COLS*/ .col_two{ float:left; width:50%; } .col_two p, .col_two h2{ padding:10px 30px 10px 0; } .col_two .big-btn{ padding:0; } @media only screen and (min-width:900px) { #header,#footer{ left:inherit; margin-left: -140px; } #content{ position: relative; } }