/* CSS Document */

* { margin:0px; padding:0px; }
img, div { behavior: url(/css/iepngfix.htc) }

body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 0px; background-position: center top; background-repeat: repeat-x; }
.clear { clear: both; }
.small { font-size: 10px; }

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

/*lists*/
ul { list-style-type: none; }
li { margin: 0 5px 2px 0; padding: 0; }
.section_list { margin: 0 0 10px 0; padding: 0; list-style-type: none; }
.section_list ul { list-style-type: none; }
.section_list li { margin: 0 10px 2px 0; padding: 0; }

/*v4*/
#container { margin: 0px auto; padding: 0px; }
#container #cont_top { height: 80px; background-image: url(/images/backs/top_v4_x.gif); background-position: center top; background-repeat: repeat-x; }
#container #cont_mid { height: 480px; position: relative; margin: 0px; padding: auto; background-position: center top; background-repeat: no-repeat; }
#container #cont_bot { background-image: url(/images/backs/bot_v6_x.gif); background-position: center top; background-repeat: repeat-x; margin: 0px; padding: 0px; }

/*header*/
#container #cont_top #main_header { width: 920px; margin: 0px auto; position: relative; height: 80px; background-image: url(/images/header/header.gif); }
#container #cont_top #main_header #e_list { position: absolute; top: 3px; left:420px; height: 22px; font-size: 10px; margin: 0px; padding: 0px; }
#container #cont_top #main_header #e_list  input { font-size:10px; color: #333333; font-size:10px; float:left; margin-right:4px; }
#container #cont_top #main_header #e_list #emailsub { margin-top: 2px; }

#container #cont_top ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; clear: left; }
#container #cont_top ul li a span { display:none; }
#container #cont_top ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; }

#container #cont_top #main_header #sn { position: absolute; top:0px; left:0px; background-image: url(/images/header/header.gif); width: 168px; height: 80px; margin:0px auto; }
#sn ul li a { height:80px; margin:0px; padding:0px; display: block; }
#sn ul li a.strangenotes { width: 168px; }
#sn ul li a.strangenotes:hover{ background: url(/images/header/header.gif) 0px -80px; }

#container #cont_top #main_header #top_menu { position: absolute; top:0px; left:828px; background-image: url(/images/header/header.gif) -828px 0px; width: 92px; height: 80px; margin:0px; }
#top_menu ul li a { width: 92px; margin:0px; padding:0px; display: block; }
#top_menu ul li a.video { height: 27px; }
#top_menu ul li a.store { height: 27px; }
#top_menu ul li a.connect { height: 26px; }
#top_menu ul li a.video:hover { background: url(/images/header/header.gif) -828px -80px; }
#top_menu ul li a.store:hover { background: url(/images/header/header.gif) -828px -107px; }
#top_menu ul li a.connect:hover { background: url(/images/header/header.gif) -828px -134px; }

#container #cont_top #main_header #brands { position: absolute; top:20px; left:168px; background-image: url(/images/header/header.gif) -168px -20px; width: 660px; height: 52px; margin:0px; }
#brands ul li a { height:52px; margin:0px; padding:0px; display: block; }
#brands ul li a.creature{ width:90px; }
#brands ul li a.flip{ width:83px; }
#brands ul li a.scskate{ width:65px; }
#brands ul li a.independent{ width:95px; }
#brands ul li a.ricta{ width:99px; }
#brands ul li a.mobgrip{ width:78px; }
#brands ul li a.krux{ width:86px; }
#brands ul li a.oj{ width:64px; }
/* -- Hovers -- */
#brands ul li a.creature:hover{ background: url(/images/header/header.gif) -168px -100px; }
#brands ul li a.flip:hover{ background: url(/images/header/header.gif) -258px -100px; }
#brands ul li a.scskate:hover{ background: url(/images/header/header.gif) -341px -100px; }
#brands ul li a.independent:hover{ background: url(/images/header/header.gif) -406px -100px; }
#brands ul li a.ricta:hover{ background: url(/images/header/header.gif) -501px -100px; }
#brands ul li a.mobgrip:hover{ background: url(/images/header/header.gif) -600px -100px; }
#brands ul li a.krux:hover{ background: url(/images/header/header.gif) -678px -100px; }
#brands ul li a.oj:hover{ background: url(/images/header/header.gif) -764px -100px; }


/*wraps*/
#container #wrap_mid { background-image: url(http://www.strangenotes.com/images/backs/shad_video_front.png); background-repeat: repeat-x; }
#container #wrap_micro { background-image: url(http://www.strangenotes.com/images/backs/shad_micro.png); background-repeat: repeat-x; }

#container #cont_mid #main { position: relative; margin: 0px auto; width: 1000px; height: 480px; background-image: url(/images/backs/shad_main2.png); background-position: center center; }
#container #cont_mid #main #video { position: absolute; left: 45px; top:20px; }
#container #cont_mid #main #banner { position: absolute; left: 650px; top:20px; }
#container #cont_mid #main #panel { position: absolute; left: 650px; top:287px; }
#container #cont_mid #main #panel a { text-decoration: none; }
#container #cont_mid #main #panel img { /*height: 173px; width: 300px;*/ }
#container #cont_mid #main #panel .mainlink { height: 173px; width: 300px; top:0px; left: 0px; position: absolute; }

#container #cont_bot #recent_clips { margin: 0px auto; 	padding: 0px; width: 920px; height: 145px; position: relative;  }
#container #cont_bot #recent_clips #rc_header { position: absolute; top:8px; left: 5px; }
#container #cont_bot #recent_clips #podcast { position: absolute; top:2px; right: 4px; }
#container #cont_bot #recent_clips #recent_clips_wrap { position: absolute; top:32px; }
.clip_icon a { text-decoration: none; color: #666666; }
#container #cont_bot #recent_clips .clip_icon { float: left; height: 82px; width: 141px; padding: 5px 6px; background-image: url(/images/backs/shad_clip.png); background-position: center top; background-repeat: no-repeat; position: relative; }
#container #cont_bot #recent_clips .clip_icon .over { position: absolute; top: 5px; left: 6px; width: 141px; height: 82px; }
#container #cont_bot #recent_clips .pagination { position: absolute; top:13px; left: 95px; height: 22px; width: 142px; font-size: 12px; line-height: 11px; color: #333333; text-align: center; }

#container #recent_clips_blog { margin: 0px 0px 0px -2px; padding: 0px; width: 315px; position: relative;  }
#container #recent_clips_blog #rc_header { position: absolute; top:8px; left: 5px; }
#container #recent_clips_blog .clip_icon_large { float: left; height: 225px; width: 300px; padding: 6px 7px 6px 8px; background-image: url(/images/video/shad_315.png); background-position: center top; background-repeat: no-repeat; position: relative; }
#container #recent_clips_blog .clip_icon_large .over { position: absolute; top: 6px; left: 8px; width: 300px; height: 225px; }
/*#container #recent_clips_blog .clip_icon { float: left; height: 106px; width: 142px; padding: 6px 7px 6px 8px; background-image: url(/images/video/shad_157.png); background-position: center top; background-repeat: no-repeat; }*/
#container #recent_clips_blog .clip_icon { float: left; height: 82px; width: 141px; padding: 5px 6px; background-image: url(/images/backs/shad_clip.png); background-position: center top; background-repeat: no-repeat; margin-left: 2px; margin-right: 2px; position: relative; }
#container #recent_clips_blog .clip_icon .over { position: absolute; top: 5px; left: 6px; width: 141px; height: 82px; }

#container #wrap_outer { background-repeat:no-repeat; background-position: center top; clear: both; }
#container #wrap_inner { background-position: center top; background-repeat: repeat-x; margin-top: -12px; margin-bottom: -12px;  clear: both; }
#container #cont_blog { width: 930px; margin: 12px auto; position: relative; background-image: url(/images/backs/shad_menu.png); background-repeat: repeat-x; background-color: #FFFFFF; min-height: 480px; }

/*brands*/
#creature { background-position: center top; background-repeat: no-repeat; }
.creature a { text-decoration: none; color: #2F7338; }
.creature a:hover, .creature a:active { text-decoration: underline; }

#flip { background-position: center top; background-repeat: no-repeat; }
.flip a { text-decoration: none; color: #FF0000; }
.flip a:hover, .flip a:active { text-decoration: underline; }

#independent { background-position: center top; background-repeat: no-repeat; }
.independent a { text-decoration: none; color: #CC0000; }
.independent a:hover, .independent a:active { text-decoration: underline; }

#krux { background-position: center top; background-repeat: no-repeat; }
.krux a { text-decoration: none; color: #00ABD4; }
.krux a:hover, .krux a:active { text-decoration: underline; }

#mobgrip { background-position: center top; background-repeat: no-repeat; }
.mobgrip a { text-decoration: none; color: #1CB456; }
.mobgrip a:hover, .mobgrip a:active { text-decoration: underline; }

#ricta { background-position: center top; background-repeat: no-repeat; }
.ricta a { text-decoration: none; color: #000000; }
.ricta a:hover, .ricta a:active { text-decoration: underline; }

#scskate { background-position: center top; background-repeat: no-repeat; }
.scskate a { text-decoration: none; color: #FF0000; }
.scskate a:hover, .scskate a:active { text-decoration: underline; }

#oj { background-position: center top; background-repeat: no-repeat; }
.oj a { text-decoration: none; color: #F8931D; }
.oj a:hover, .oj a:active { text-decoration: underline; }

#strangenotes { background-position: center top; background-repeat:  no-repeat; }
.strangenotes a { text-decoration: none; color: #07ADEB; }
.strangenotes a:hover, .strangenotes a:active { text-decoration: underline; }

.entry-title a { color: #000000; }
h3 { font-size: 18px; font-weight: normal; margin: 2px 0px; padding: 0px; }

/*blog front*/
#container #cont_bot #blog_front { width: 907px; margin: 0px auto; }
#container #cont_bot #blog_front #left { float: left; width: 600px; padding: 0px; margin: 0px; }
#container #cont_bot #blog_front #left img, #container #cont_bot #blog_front #left object, #container #cont_bot #blog_front #left param, #container #cont_bot #blog_front #left embed { max-width: 600px; max-height: 600px; width: expression(this.width > 600 ? 600: true); }
#container #cont_bot #blog_front #right { float: left; width: 295px; padding-left: 12px; background-image: url(http://www.strangenotes.com/images/backs/blog_front_right.gif); }
#container #cont_bot #blog_front #right ul { margin: 0px; padding: 0px; }
#container #cont_bot #blog_front #right li { padding: 0px; min-height: 60px; margin: 0px; }
/*#container #cont_bot #blog_front #right li img { height: 40px; width: 40px; }*/
#container #cont_bot #blog_front #right #banner { padding-left: 6px; }

/*blog brands*/
#container #cont_blog #right { float: left; width: 315px; padding-left: 10px; margin-top: 12px; background-image: url(http://www.strangenotes.com/images/backs/blog_front_right.gif); background-repeat: repeat-y; }
#container #cont_blog #right .listing-div { height: 12px; width: 295px; background-image: url(http://www.strangenotes.com/images/backs/blog_listing_division.gif); background-repeat: no-repeat; background-position: center center; margin: 2px auto; clear:both; }
#container #cont_blog #right .right_header { margin: 0px 0px 0px 5px; }
#container #cont_blog #right .directory { width: 300px; margin: 0px auto; }
#container #cont_blog #left { width: 600px; margin: 0px; padding: 12px 0px 10px 5px; float: left; }
#container #cont_blog #left img, #container #cont_blog #left object, #container #cont_blog #left param, #container #cont_blog #left embed { max-width: 600px; max-height: 600px; width: expression(this.width > 600 ? 600: true); }
#container #cont_blog #right #banner { padding-left: 6px; }

.prev, .next { width: 44%; padding: 0px 2%; float: left; }
.prev { text-align: left; }
.next { text-align: right; }

.share { position: relative; background-image: url(/images/blog/share.gif); width: 120px; height: 35px; margin:0px; clear:both; }
.share ul li a { height:35px; width: 24px; margin:0px; padding:0px; display: block; }
.share ul li a span { display:none; }
.share ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; }
.share ul li a.fb:hover{ background: url(/images/blog/share.gif) 0px -35px; }
.share ul li a.ms:hover{ background: url(/images/blog/share.gif) -24px -35px; }
.share ul li a.tw:hover{ background: url(/images/blog/share.gif) -48px -35px; }
.share ul li a.dg:hover{ background: url(/images/blog/share.gif) -72px -35px; }
.share ul li a.rd:hover{ background: url(/images/blog/share.gif) -96px -35px; }

/* txp blog */
.entry-title { /*font-family: Georgia, "Times New Roman", Times, serif;*/ font-size: 18px; }
.entry { margin-bottom: 20px; }
.entry-content p { margin: 2px 0px 6px 0px; }
.entry-content img { display: block; margin: 3px 0px; }
.listing-div { height: 12px; width: 295px; background-image: url(http://www.strangenotes.com/images/backs/blog_listing_division.gif); background-repeat: no-repeat; background-position: center center; clear:both; }
.comments-wrapper { color: #333333; }
.comments-wrapper input, .comments-wrapper textarea, .comments-wrapper label { margin: 5px; }
.comments-wrapper .form_left { width:  80px; display: block; }
h2#comment { color: #666666; margin-left: 95px; text-transform: uppercase; }

.comment_link { padding: 4px 0px 2px 0px; }
.entry address { padding: 8px 0px 2px 0px; }
.comment, .comment_preview { width: 500px; margin: 5px auto; }
.comment .comment_header, .comment_preview .comment_header { width: 500px; height: 15px; }
.comment .comment_content, .comment_preview .comment_content { min-height: 20px; width: 380px; margin: 0px auto; }
.comment .comment_footer, .comment_preview .comment_footer { width: 500px; height: 35px; position: relative; }
.comment .comment_footer .credit, .comment_preview .comment_footer .credit { position: absolute; top:10px; left: 120px; }

.comment { background-image: url(/images/blog/comments/comment_02.gif); background-repeat: repeat-y; }
.comment .comment_header { background-image: url(/images/blog/comments/comment_01.gif); }
.comment .comment_footer { background-image: url(/images/blog/comments/comment_03.gif); }
.comment_preview { background-image: url(/images/blog/comments/comment_preview_02.gif); background-repeat: repeat-y; }
.comment_preview .comment_header { background-image: url(/images/blog/comments/comment_preview_01.gif); }
.comment_preview .comment_footer { background-image: url(/images/blog/comments/comment_preview_03.gif); }

/*Video*/
#container #cont_bot #clip_info { margin: 0px auto; padding: 0px 0px; width: 954px; height: 120px; position: relative;  }
#container #cont_bot #clip_info #clip_icon, #container #cont_bot #clip_info h1, #container #cont_bot #clip_info #clip_desc, #container #cont_bot #clip_info #c_and_p { position: absolute; }
#container #cont_bot #clip_info #clip_icon { top:32px; left: 10px; height: 82px; width: 141px; padding: 5px 9px; background-image: url(/images/backs/shad_clip.png); background-position: center top; background-repeat: no-repeat; }
#container #cont_bot #clip_info h1 { top:6px; left: 18px; margin: 0px; padding: 0px; text-transform: capitalize; color: #333333; }
#container #cont_bot #clip_info #clip_desc { top: 40px; left: 175px; width:440px; }
#container #cont_bot #clip_info #c_and_p { top: 4px; right: 25px; width: 300px; font-size: 10px; }
#container #cont_bot #clip_info #c_and_p .line { padding:2px 0px; clear: both; height: 22px; }
#container #cont_bot #clip_info #c_and_p span { float:left; width: 45px; display: block; padding-top: 2px; color: #333333; }
#container #cont_bot #clip_info #c_and_p input { width: 250px; padding: 0px; margin: 0px; font-size: 10px; float: left; background-color: #ECECEC; color: #333333; }

#container #cont_bot #clip_info #c_and_p .vid_share { position: relative; background-image: url(/images/video/share_basic.gif); width: 72px; height: 22px; margin:0px; float: left; }
#container #cont_bot #clip_info #c_and_p .vid_share ul li a { height:22px; width: 24px; margin:0px; padding:0px; display: block; }
#container #cont_bot #clip_info #c_and_p .vid_share ul li a span { display:none; }
#container #cont_bot #clip_info #c_and_p .vid_share ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; }
#container #cont_bot #clip_info #c_and_p .vid_share ul li a.fb:hover{ background: url(/images/video/share_basic.gif) 0px -22px; }
#container #cont_bot #clip_info #c_and_p .vid_share ul li a.ms:hover{ background: url(/images/video/share_basic.gif) 48px -22px; }
#container #cont_bot #clip_info #c_and_p .vid_share ul li a.tw:hover{ background: url(/images/video/share_basic.gif) 24px -22px; }

/*carousel*/
.stepcarousel { position: relative; /*leave this value alone*/ overflow: scroll; /*leave this value alone*/ width: 920px; /*Width of Carousel Viewer itself*/ height: 120px; /*Height should enough to fit largest content's height*/ }
.stepcarousel .belt { position: absolute; /*leave this value alone*/ left: 0; top: 0; }
.stepcarousel .panel { float: left; /*leave this value alone*/ overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/ margin: 0px; /*margin around each panel*/ width: 920px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */ }

.stepcarousel2 { position: relative; /*leave this value alone*/ overflow: scroll; /*leave this value alone*/ width: 920px; /*Width of Carousel Viewer itself*/ height: 480px; /*Height should enough to fit largest content's height*/ }
.stepcarousel2 .belt { position: absolute; /*leave this value alone*/ left: 0; top: 0; }
.stepcarousel2 .panel { float: left; /*leave this value alone*/ overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/ margin: 0px; /*margin around each panel*/ width: 920px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */ height: 480px; }

#clip_panels .pagination { position: absolute; top:-14px; left: 811px; height: 22px; width: 60px; font-size: 12px; line-height: 11px; color: #333333; text-align: center; }

/*Archive*/
dl { clear:both; }
dt { clear:both; font-size: 14px; font-weight: bold; }
dd { float: left; width: 95px; margin-right: 3px; }


#container #video_archive { width: 930px; margin: 12px auto; position: relative; background-image: url(/images/backs/shad_menu.png); background-repeat: repeat-x; background-color: #FFFFFF; }

/*clip archive*/
#past_clips #sorter { clear: both; width: 900px; margin: 5px 0px 15px 0px; }
#past_clips #clip_panels { clear: both; padding: 10px 0px; width: 913px; height: 426px; position: relative; }
#past_clips #panel_container { height: 426px; }
#past_clips #sorter a, #past_clips #sorter .sort_label { text-decoration: none; float: left; display: block; padding: 2px 6px; }
#past_clips #sorter .on { background: black; color: white; }
#past_clips #sorter .off { color: #333333; background: white; }

#past_clips { width: 920px; margin: 0px auto; padding-top: 0px; height: 488px; }
#past_clips .clip_icon { float: left; height: 142px; width: 141px; padding: 5px 6px; background-image: url(/images/backs/shad_clip.png); background-position: center top; background-repeat: no-repeat; position: relative; }
#past_clips .clip_icon .over { position: absolute; top: 5px; left: 6px; width: 141px; height: 82px; }
#past_clips .spacer { float: left; height: 82px; width: 37px; }
#past_clips .clip_icon .clip_info { font-size: 10px; line-height: 11px; position: absolute; top: 90px; left: 6px; }
#past_clips .clip_icon .clip_info a { color: #208DFF; }

#container #cont_blog #right #panel { padding-left: 6px; position: relative; clear: both; }
#container #cont_blog #right #panel img { /*height: 173px; width: 300px;*/ }
#container #cont_blog #right #panel a { text-decoration: none; }
#container #cont_blog #right #panel .mainlink { height: 173px; width: 300px; top:0px; left: 0px; position: absolute; }

/*CONNECT*/
#connect { width: 700px; margin: 0px auto; color: #333333; }
#connect a { color: #666666; text-decoration: none; }
#connect a:hover { color: #333333; text-decoration: none; }
#connect #social a { text-transform: uppercase; }
#connect #social, #connect #mailing_list { width: 46%; padding: 10px 2%; float: left; }
#connect #social h1, #connect #social h2 { clear: both; }
#connect #social a span {display: none; }
#connect #social .fb, #connect #social .ms, #connect #social .tw, #connect #social .yt, #connect #social .rs { float: left; height: 42px; width: 42px; font-size: 9px; }
#connect #social .fb { background: url(/images/connect/connect_social.gif) 0px 0px; }
#connect #social .ms { background: url(/images/connect/connect_social.gif) -42px 0px; }
#connect #social .tw { background: url(/images/connect/connect_social.gif) -84px 0px; }
#connect #social .yt { background: url(/images/connect/connect_social.gif) -126px 0px; }
#connect #social .rs { background: url(/images/connect/connect_social.gif) -168px 0px; }
#connect #social .fb:hover { background: url(/images/connect/connect_social.gif) 0px -42px; }
#connect #social .ms:hover { background: url(/images/connect/connect_social.gif) -42px -42px; }
#connect #social .tw:hover { background: url(/images/connect/connect_social.gif) -84px -42px; }
#connect #social .yt:hover { background: url(/images/connect/connect_social.gif) -126px -42px; }
#connect #social .rs:hover { background: url(/images/connect/connect_social.gif) -168px -42px; }
#connect label { display: block; padding: 3px 0px; }

#right #connect { width: 295px; margin: 0px auto; color: #333333; padding: 0px; }
#right #connect #social {width: 295px; padding: 0px; float: none; margin-left: -7px; margin-bottom: 5px; }

#right .sidebar_panel { clear: both; height: 171px; width: 295px; position: relative; }
#right .sidebar_panel a { text-decoration: none; }
#right .sidebar_panel img { /*height: 173px; width: 300px;*/ }
#right .sidebar_panel .mainlink { height: 171px; width: 295px; top:0px; left: 0px; position: absolute; }

/*WIN*/
#container #cont_mid #win { position: relative; margin: 0px auto; width: 1000px; height: 480px; }
#container #cont_mid #win #contest_data { }
#contest_data label { float: left; width: 100px; }
#contest_data input, #contest_data select { float: left; width: 140px; }
#contest_data .checkbox { float: none; width: 16px; }
#contest_data p { font-size: 14px; }
#contest_data .clear { clear: both; padding: 3px; }
#win #brand_link { position: absolute; display: block; }
#win .error { color: #FF0000; font-size: 10px; }
#win .small { font-size: 10px; line-height: 11px; text-decoration: none; }
#win a { color: #FF0000; }

/*micro*/
#micro a { }

/*WIN SURVEY*/
#win #win_survey { height: 450px; width: 900px; position: absolute; top: 15px; left: 47px; }
#win #win_survey h2 { font-size: 14px; padding-top: 2px; }

/*square and portrait prize pages*/
.survey_box { font-size: 12px; line-height: 14px; }
.survey_box #prize img { max-width: 450px; max-height: 450px; width: expression(this.width > 450 ? 450: true); height: expression(this.height > 450 ? 450: true);  }
.survey_box #prize { float: left; height: 450px; width: 450px; }
.survey_box #spiel { float: left; padding: 8px 8px 0px 8px; width: 434px; }
.survey_box #error { float: left; padding: 2px 8px 0px 8px; width: 434px; }
.survey_box #personal { float: left; width: 209px; padding: 4px 8px; }
.survey_box #questions { float: left; width: 209px; padding: 4px 8px; }
.survey_box #lists { float: left; width: 434px; padding: 4px 8px; }
.survey_box #lists .list_check { float: left; width: 140px; padding: 1px 0px 1px 3px; font-size: 10px; }
.survey_box #lists .list_check_full { float: left; width: 430px; padding: 1px 0px 1px 3px;  font-size: 10px; }
.survey_box option { font-size: 10px; }
.errortext { color: red; }