/* http://chimply.com for loading ajax gif darker blue is 1a84c8 lighter blue is 489dd3 darker orange is e8920c, dark PINK e8920c lighter orange is eda83d, light PINK ed59ef */ /*box*/ .boxwrap {width:750px;float:left;text-align:left; margin-top:5px; margin-bottom:5px;} .boxtop, .boxbottom {float:left;width:750px;height:10px;background:transparent url('http://clipnabber.com/images/boxbottom.png') no-repeat; } .boxtop { background:transparent url('http://clipnabber.com/images/boxtop.png') no-repeat } .box {float:left;padding-left:15px;padding-right:8px;padding-top:5px;padding-bottom:5px;width:750px; background:transparent url('http://clipnabber.com/images/boxmiddle.png') repeat-y; color:#333} /*header*/ #corner { float:right;display:inline;position:relative;width:325px;height:80px;} #twitter {position:absolute;top:10px;} #facebook {position:absolute;top:40px;left:60px;} #bookmarklet {position:absolute;top:10px;left:195px;} #addthis {position:absolute;top:10px;left:60px;} #fblike {position:absolute;top:45px;left:100px;} #header {background:#4d4d4d;text-align:center; margin:0px auto; width:960px;} #logotext {float:left;position:relative;width:960px;height:80px;} #logo {float:left; margin-bottom:5px;display:inline;} #langs { position:absolute;top:15px;left:-185px;} /*nab area*/ #paste_url {width: 450px; color: #b8b4b4; height: 30px; font-size: 18px; margin-left:10px; margin-top:0px;} #paste-text {text-align:left;display:inline;color: #333; font-size: 18px;font-weight:bold;margin-left:0px;} #barnab {position:relative;margin-top:5px;} #nab {position:absolute;cursor:pointer;left:523px;top:-12px;width:122px;height:60px;overflow:hidden;border:0px;text-decoration: none;} #nab:hover {text-indent:-122px;} #nab:active {text-indent:-244px;} #clear {font-size:14px; color:#4d4d4d; cursor:pointer; text-decoration:underline; display:inline; margin-left:144px;} .none {display: none;} #pastesource {width:660px;margin-left:10px;margin-top:7px;display:none;font-size:13px;} #srchow { font-size: 11px; line-height: 11px; font-family: tahoma } #nonjava { text-align:left;margin-left:5px;margin-top:7px;font-size:10px; } #loading6 { position:absolute;left:551px;top:52px;width:64px;height:8px; display:none;} /*general doc*/ body,html {text-align:left;margin:0;padding:0;background:#4d4d4d;font-family:"Lucida Sans","Lucida Grande",Lucida,tahoma,verdana,sans-serif;} body {background:#4d4d4d;margin:0 auto;width:960px;} h1 { position:absolute;left:410px;top:12px;width:420px;height:76px;font-size:14px; color:#b8b4b4; z-index:9;text-decoration:none;font-weight:normal; margin:0px; padding:0px;} FORM {color: #444;} h2 {margin: 0px; color: #fff; font-size: 18px;} h3 {margin: 0px; color: #4d4d4d; font-size: 13px;line-height:0px;} h4 {margin: 0px; color: #000; font-size: 18px;} /*footer */ #footer {background:#4d4d4d;clear:both;color:#b8b4b4;} #footer a { color:#eda83d; } /*ads*/ #skyscraper { margin:auto; text-align:center; height:140px; margin-top:0px; margin-left:30px;} #skyscraper2 { margin:auto; text-align:center; } #skyscraper-general { height:600px;width:160px;display:block; float:left; margin-top:12px;} #valueclick1 { display:block; } #valueclick2 { display:block; } #leaderboard {display:block; width:750px; margin-left:10px; margin-bottom:4px;margin-top:16px;} #leaderboard2 {display:block; width:750px; margin-left:30px; margin-bottom:8px;margin-top:8px;} #leaderboard-test {} /*youtube api stuff*/ #recentnabs {clear:both;height:180px; width:750px;display:block;margin:0px auto;text-align:left;color:white;margin-left:15px;margin-top:0px;} #recentnabs a {color:white;} .result {margin-right:15px;font-size:11px;width:130px;height:170px;} .result img a { text-decoration:none;} .classification { margin-top:5px;position: relative;width: 50px;height: 9px;} .classification .cover {position: absolute;background: transparent url(http://clipnabber.com/images/stars.png) top left no-repeat;top: 0px;left: 0px;width: 50px;height: 9px;z-index: 101;} .classification .progress {position: absolute;background: transparent url(http://clipnabber.com/images/stars_full.png) top left no-repeat;top: 0px;left: 0px;height: 9px;z-index: 102;} /*youtube page stuff*/ #vidbox {position:relative;height:320px;} #info {font-size:11px;position:absolute;left:380px;top:0px;width:340px;} #tnlink { font-size:12px;font-weight:bold; } iframe { border:0; width:720px; height:78px; } #insideframe { width:720px; height:78px; background:#fff; float:left; margin:0px auto; } #dloptions { text-align:center;width:720px; height:78px; clear:both; } #generateloading { text-align:center;display:none; margin:0px auto; } #dlgenerate { margin-top:20px; font-size:17px;font-weight:bold;} #videolinkdl { font-size:15px;font-weight:bold; text-align:center; margin:5px;} /*supported sites*/ #allsites { text-align:left;font-size: 11px; line-height: 16px; font-family: tahoma; width:725px; } #spacer { width:750px; height:5px; display:block;clear: both; } /*site examples*/ SELECT.chooser_select_site_2 {text-align:left;border: #aaa 1px solid;font-size: 11px; margin-right:30px; width: 125px;color: #444; padding-top:0px; height:18px;} #choosefromlist {float:right; font-size: 14px;} /*sidebar */ #sidebar {background:#4d4d4d;float:right;text-align:center;width:180px;margin:2px 2px 2px 2px;} #main {background:#4d4d4d;float:left;width:730px;margin:5px 5px 5px 5px;} #search {background:#4d4d4d;float:left;width:750px;margin:5px 5px 5px 5px;} #sidel {background:#4d4d4d;float:left;text-align:left;width:170px;margin:2px 2px 2px 2px;font-size:12px;display:block;line-height:18px;} /* java divs */ #yt_3gplow { display:none; } #yt_3gpmed { display:none; } #yt_3gphigh { display:none; } #yt_flvlow { display:none; } #yt_flvmed2 { display:none; } #yt_flvmed { display:none; } #yt_flvhigh { display:none; } #yt_mp4high { display:none; } #yt_mp4hd { display:none; } #yt_mp4hd2 { display:none; } #yt_mp4hd3 { display:none; } #vm_low { display:none; } #vm_high { display:none; } #veehd { display:none; } #prh { display:none; } #tb8 { display:none; } #stgv { display:none; } #nvmv { display:none; } #rutu { display:none; } #dm_flv { display:none; } #dm_mp4 { display:none; } #mv_flv { display:none; } #mv_hd { display:none; } #mprn_flv { display:none; } #mprn_hd { display:none; } #drtb { display:none; } #youku0 { display:none; } #youku1 { display:none; } #youku2 { display:none; } #youku3 { display:none; } #youku4 { display:none; } #youku5 { display:none; } #youku6 { display:none; } #youku7 { display:none; } #youku8 { display:none; } #youku9 { display:none; } #youku10 { display:none; } #youku11 { display:none; } #youku12 { display:none; } #youku13 { display:none; } #youku14 { display:none; } #youku15 { display:none; } #youku16 { display:none; } #youku17 { display:none; } #youku18 { display:none; } #youku19 { display:none; } #youku20 { display:none; } #youku21 { display:none; } #youku22 { display:none; } #youku23 { display:none; } #youku24 { display:none; } #youku25 { display:none; } #youku26 { display:none; } #youku27 { display:none; } #youku28 { display:none; } #youku29 { display:none; } #youku30 { display:none; } #java_error { display:none; } #heading {margin-bottom: 15px; margin-top: 5px; text-align:center;} #maintext { width:720px; text-align:left; } P {font-size: 11px; margin: 0px 0px 2px; line-height: 16px; font-family: tahoma; } li {font-size: 11px; margin: 0px 0px 2px; color: #444; line-height: 16px; font-family: tahoma} #Math { visibility:hidden; } P.i {color: #369} A {color: #369} A:visited {color: #369} A:hover {text-decoration: none;} A.x {color: #8aa700} A.x:visited {color: #8aa700} A.t {color: #000000} A.t:visited {color: #000000} A.d {color: #888} A.d:visited {color: #888} B.error {font-weight: normal; color: #888} b { color:#333; } div#process {left: -20px; overflow: hidden; width: 1px; position: absolute; top: -20px; height: 1px} #video_info span {display: none; text-align:left;} img {border: 0px;} .s1 {display:inline; font-size: 11px; color: #444; } .s2 {color:#e8920c; font-weight:bold; display:inline; font-size: 11px;} #vheading {display:block;font-size:16px;font-weight:bold;text-align:left;clear:both;color:white;} #categories {float:left;text-align:left;font-size:12px;line-height:18px;margin-left:15px;margin-top:5px;} #categories b { font-size:16px; color: #000; } #categories a { color:#eda83d; } #downloadflv { margin:0px auto; margin-bottom:10px;display:inline;text-align:center;padding-top:-8px;margin-top:-8px; height:38px; } #videourl { display:none;text-align:left;font-size:11px; padding-bottom:15px;} #loading5 { margin-top:5px; } #applet { width: 720px; float:left; } /* ColorBox Core Style The following rules are the styles that are consistant between themes. Avoid changing this area to maintain compatability with future versions of ColorBox. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:hidden;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} /* Example user style The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, so that the structure easier to understand. */ #cboxOverlay{background:url(http://clipnabber.com/images/colorbox/overlay.png) repeat 0 0;} #colorbox{} #cboxTopLeft{width:21px; height:21px; background:url(http://clipnabber.com/images/colorbox/controls.png) no-repeat -100px 0;} #cboxTopRight{width:21px; height:21px; background:url(http://clipnabber.com/images/colorbox/controls.png) no-repeat -129px 0;} #cboxBottomLeft{width:21px; height:21px; background:url(http://clipnabber.com/images/colorbox/controls.png) no-repeat -100px -29px;} #cboxBottomRight{width:21px; height:21px; background:url(http://clipnabber.com/images/colorbox/controls.png) no-repeat -129px -29px;} #cboxMiddleLeft{width:21px; background:url(http://clipnabber.com/images/colorbox/controls.png) left top repeat-y;} #cboxMiddleRight{width:21px; background:url(http://clipnabber.com/images/colorbox/controls.png) right top repeat-y;} #cboxTopCenter{height:21px; background:url(http://clipnabber.com/images/colorbox/border.png) 0 0 repeat-x;} #cboxBottomCenter{height:21px; background:url(http://clipnabber.com/images/colorbox/border.png) 0 -29px repeat-x;} #cboxContent{background:#fff;} #cboxLoadedContent{margin-bottom:28px;} #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;} #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;} #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(http://clipnabber.com/images/colorbox/controls.png) no-repeat -75px 0px; width:25px; height:25px; text-indent:-9999px;} #cboxPrevious.hover{background-position:-75px -25px;} #cboxNext{position:absolute; bottom:0; left:27px; background:url(http://clipnabber.com/images/colorbox/controls.png) no-repeat -50px 0px; width:25px; height:25px; text-indent:-9999px;} #cboxNext.hover{background-position:-50px -25px;} #cboxLoadingOverlay{background:url(http://clipnabber.com/images/colorbox/loading_background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(http://clipnabber.com/images/colorbox/loading.gif) no-repeat center center;} #cboxClose{position:absolute; bottom:0; right:0; background:url(http://clipnabber.com/images/colorbox/controls.png) no-repeat -25px 0px; width:25px; height:25px; text-indent:-9999px;} #cboxClose.hover{background-position:-25px -25px;} /* The following fixes png-transparency for IE6. It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition Since this method does not support CSS background-positioning, it is incompatible with CSS sprites. Colorbox preloads navigation hover classes to account for this. !! Important Note: AlphaImageLoader src paths are relative to the HTML document, while regular CSS background images are relative to the CSS document. */ .cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://clipnabber.com/images/colorbox/internet_explorer/borderTopLeft.png, sizingMethod='scale');} .cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://clipnabber.com/images/colorbox/internet_explorer/borderTopCenter.png, sizingMethod='scale');} .cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://clipnabber.com/images/colorbox/internet_explorer/borderTopRight.png, sizingMethod='scale');} .cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://clipnabber.com/images/colorbox/internet_explorer/borderBottomLeft.png, sizingMethod='scale');} .cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://clipnabber.com/images/colorbox/internet_explorer/borderBottomCenter.png, sizingMethod='scale');} .cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://clipnabber.com/images/colorbox/internet_explorer/borderBottomRight.png, sizingMethod='scale');} .cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://clipnabber.com/images/colorbox/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');} .cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://clipnabber.com/images/colorbox/internet_explorer/borderMiddleRight.png, sizingMethod='scale');} /* http://www.grafpedia.com/tutorials/create-iphone-related-website http://www.grafpedia.com/tutorials/design-typography-layout */