/* Copyright (c) 2009-2010 Ryan Ours. */
/* www.ryanours.com */
/* Main CSS for apps.musicaldna.com */

/* Main Styles */
* { margin:0; padding:0; }
body { background:url(images/bg.png) 0 0 repeat-x scroll #2f363c; }
#main { width:960px; margin:0 auto; padding:10px 0; }
#header { width:100%; float:left; padding:0; margin:0; }
#logo { margin:0 auto; width:320px; }
#social { float:left; width:50%; }
#topnav { float:right; width:50%; }
#left { float:left; width:35%; position:relative; }
#right { float:right; text-align:left; width:65%; }
#iphone { position:relative; width:456px; height:660px; background:url(images/iphone.png) 0 0 no-repeat; left:-65px; top:38px; }
#iphone .inner { height:387px; left:97px; position:absolute; top:86px; width:258px; border:3px solid #2a2f31; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
#caption  { background:url(images/caption-bg.png) 0 0 no-repeat; height:29px; margin:0 auto; padding:14px 0 0; position:relative; top:29px; width:200px; }
#iphone-vid { position:relative; width:307px; height:567px; background:url(images/iphone-vid.png) 0 0 no-repeat; left:9px; top:38px; }
#iphone-vid .inner-vid, #iphone-vid .video-wrapper, #iphone-vid img.video-ender { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:4px solid #2A2F31; height:379px; left:25px; position:absolute; top:89px; width:252px; }
#ipad-iphone { position:relative; width:400px; height:379px; background:url(images/ipad-iphone-reflection.png) 0 0 no-repeat; left:15px; top:156px; }
#video-container .video-wrapper { float:left; margin:7px 142px; z-index:1; }
object { z-index:1; }
#video-container { background:url(images/video-bg2.png) 0 0 no-repeat; width:608px; height:520px; margin:0 auto; float:right; }
body#whats-musical-dna-page #video-container { background:url(images/video-bg.png) 0 0 no-repeat; width:608px; height:452px; margin:0 auto; float:right; }
body#whats-musical-dna-page #video-container { margin-top:10px; }
#video-container #intro-video { height:200px; margin:80px 97px; float:left; width:410px; }
#right #content { background:#22262B; float:right; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; margin:8px auto 0 auto; padding:30px 30px 25px; width:561px; }
body#mail-settings-page #right #content { padding:30px 70px 25px 70px; width:491px; }
.visit-site { margin:0 auto; width:195px; }
#nav { margin:0 auto; width:570px; }
#footer { width:100%; float:left; margin-top:25px; margin-bottom:25px; padding-bottom:25px; }
.gt-thumbs { width:530px; margin:0 auto; }
#content .guided-tour .thumb { width:83px; height:83px; float:left; }
#content .guided-tour .thumb-container { width:242px; float:left; }
#content .guided-tour .thumb-container a.title { color:#1D82FF; width:100%; float:left; padding:0 0 10px 0; text-decoration:none; }
#content .guided-tour .thumb-container a.title:hover, #content .guided-tour .thumb-container a.title.active { color:#01B83E; width:100%; float:left; padding:0 0 10px 0; }
#content .guided-tour .thumb-container p.caption { width:132px; float:left; margin-left:8px; color:#ccc; padding:0; }
#content .guided-tour .thumb-container p.time { float:left; margin-left:8px; padding:0; width:132px; color:#01B83E; }
#content .guided-tour .thumb-1 p.caption, #content .guided-tour .thumb-2 p.caption, #content .guided-tour .thumb-3 p.caption, #content .guided-tour .thumb-4 p.caption { margin-top:13px; }
#content .guided-tour .thumb-1, #content .guided-tour .thumb-3 { margin-right:15px; }
#content .guided-tour .thumb-2, #content .guided-tour .thumb-4 { margin-left:15px; }
#content .guided-tour .thumb-1, #content .guided-tour .thumb-2 { margin-bottom:15px; }
#content .guided-tour .thumb-3, #content .guided-tour .thumb-4 { margin-top:15px; }
.user-thumbs { margin:0 auto; width:444px; }
#video-container .thumb { width:55px; height:55px; float:left; border:5px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
#video-container .user-thumb-container { float:left; margin:0 17px; width:76px; }
#video-container .user-thumb-container a.title { color:#1D82FF; width:100%; float:left; padding:0 0 10px 0; text-decoration:none; margin-left:-3px; text-align:center; }
#video-container .user-thumb-container a.title:hover, #video-container .user-thumb-container a.title.active { color:#01B83E; width:100%; float:left; padding:0 0 10px 0; }
#video-container .user-thumb-container p.caption { width:132px; float:left; margin-left:8px; color:#ccc; padding:0; }
#video-container .user-thumb-container p.time { float:left; color:#01B83E; margin-left:-2px; }
#video-container .user-thumb-1 p.caption, #video-container .user-thumb-2 p.caption, #video-container .user-thumb-3 p.caption, #video-container .user-thumb-4 p.caption { margin-top:13px; }
#right .see { width:100%; float:left; }
#right .guided-tour { width:530px; margin:0 31px; }
#left .toc { position:fixed; top:514px; width:295px; padding:15px; background:#393f43; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
#left .diagram {position:fixed; top:110px;}
ul, li, p { color: #fff; font-family:Helvetica, arial, sans-serif; }
ol { list-style-position:inside; margin:10px 0 10px 20px; color:#ccc; }
ol li { padding:10px 0; color:#ccc; }
#content dl, dd, dt { font-family:Helvetica, arial, sans-serif; }
#content dl { color:#fff251; }
#content dl dd dl { color:#ccc; }
#content dd { margin-left:40px; }
#content dl dd { margin-top:15px; margin-left:0; }
#content dl dd dl dd { margin:10px 0 10px 40px; font-size:14px; background:url(images/a.png) 0 0 no-repeat; padding-left:19px; }
#content dl dd dl dt { background:url(images/q.png) 0 0 no-repeat; font-size:14px; padding-left:19px; }
#left .toc ol { list-style-position:inside; margin:0; }
#left .toc ol li { padding:2px 0; width:50%; float:left; }
#left .toc a { color:#ccc; text-decoration:none; }
#left .toc a:hover { color:#fff251; text-decoration:underline; }
#left .toc h3 { color:#fff251; font-weight:normal; text-align:center; padding-bottom:5px; font-family:Helvetica, arial, sans-serif; }
a.back-to-top { float:right; color:#f6792a; }
span.fancy-ico { padding:0; }
a.faq-thumb img { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:5px solid #999; }
a.faq-thumb:hover img { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:5px solid #187EFF; }
.faq-thumb-container { width:100%; margin:10px auto; }
#right #content .see h2 { padding:0; }
#content .mailsettings span { margin-left:10px; }
input.submit { text-transform:uppercase; }
.ipad-notice { left:9px; padding:20px; position:relative; text-align:center; top:30px; width:268px; }

/*Top Nav List Styles */
ul.topnav { list-style:none; text-indent:0; color:#fff; float:right; }
ul.topnav li { float:left; display:inline; padding:11px 5px 0 5px; font:normal bold 16px/25px Helvetica, arial, sans-serif; }
#header #topnav ul.topnav li a { color:#fff; font:normal bold 16px/25px Helvetica, arial, sans-serif; }
#header #topnav ul.topnav li a.current { color:#74ff1e; }
#header #topnav ul.topnav li a:hover { color:#74ff1e; }
#header #topnav ul.topnav li.home a { background:url(images/home.png) 0 0 no-repeat; width:20px; height:20px; float:left; }
#header #topnav ul.topnav li.home a:hover, #header #topnav ul.topnav li.home a.current { background-position:0 -20px; }

/* Main Navigational Styles */
#nav ul.navigation { list-style:none; text-indent:0; color:#fff; }
#nav ul.navigation li { float:left; display:inline; padding:0; }
#nav ul.navigation li a { background:url(images/nav-bg.png) 0 0 no-repeat; text-align:center; padding:18px 0; height:23px; width:190px; float:left; color:#fff; font:normal bold 16px/17px Helvetica, arial, sans-serif; }
#nav ul.navigation li a:hover, #nav ul.navigation li a.current { background-position:0 -66px; }

/* Image Styles */
img { border:0; }
#header img.logo { float:left; width:76px; height:76px; margin-right:20px; }

/* Link Styles */
a { outline-style:none; }
p a { outline-style:none; text-decoration:none; border:0; color:#fff; }
p a:hover { color:#6198e0; border-bottom:1px dotted #6198e0; }
#header a { color:#6F6F6F; text-decoration:none; }
#nav a { color:#6f6f6f; text-decoration:none; }
#nav a:hover { color:#fff; }
#nav a.active { color:#fff; }
p.footer a { color:#3e3d3d; }
p.footer a:hover { color:#6198e0; }
body#whats-musical-dna-page #video-container a.visit { background:url(images/visit-site.png) 0 0 no-repeat; width:195px; height:27px; text-align:center; color:#fff; text-decoration:none; float:right; padding:11px 0; }
body#whats-musical-dna-page #video-container a.visit:hover { background-position:0 -53px; }
#content .guided-tour a.gt1-thumb { background:url(images/gt1.png) 0 0 no-repeat; }
#content .guided-tour a.gt1-thumb:hover, #content .guided-tour a.gt1-thumb.active { background-position:0 -83px; }
#content .guided-tour a.gt2-thumb { background:url(images/gt2.png) 0 0 no-repeat; }
#content .guided-tour a.gt2-thumb:hover, #content .guided-tour a.gt2-thumb.active { background-position:0 -83px; }
#content .guided-tour a.gt3-thumb { background:url(images/gt3.png) 0 0 no-repeat; }
#content .guided-tour a.gt3-thumb:hover, #content .guided-tour a.gt3-thumb.active { background-position:0 -83px; }
#content .guided-tour a.gt4-thumb { background:url(images/gt4.png) 0 0 no-repeat; }
#content .guided-tour a.gt4-thumb:hover, #content .guided-tour a.gt4-thumb.active { background-position:0 -83px; }
#right #content a.youtube-link { width:100%; text-align:center; float:left; margin:25px 0 15px 0; color:#187eff; text-decoration:none; font-size:16px; }
#right #content a.youtube-link:hover { color:#01B83E; text-decoration:underline; }
#video-container a.user1-thumb { background:url(images/user1.png) 0 0 no-repeat; }
#video-container a.user2-thumb { background:url(images/user2.png) 0 0 no-repeat; }
#video-container a.user3-thumb { background:url(images/user3.png) 0 0 no-repeat; }
#video-container a.user4-thumb { background:url(images/user4.png) 0 0 no-repeat; }
#video-container a.user1-thumb:hover, #video-container a.user2-thumb:hover, #video-container a.user3-thumb:hover, #video-container a.user4-thumb:hover, #video-container a.user1-thumb.active, #video-container a.user2-thumb.active, #video-container a.user3-thumb.active, #video-container a.user4-thumb.active { border:5px solid #187EFF; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }

/* Text Styles */
#video-container p { text-align:center; color:#fff; font-weight:bold; line-height:20px; float:right; width:100%; }
#video-container .user-thumbs p { text-align:center; color:#fff; font-weight:bold; line-height:20px; float:right; width:100%; }
body#whats-musical-dna-page #video-container p { text-align:left; color:#ccc; line-height:20px; font:normal 12px/16px Helvetica, arial, sans-serif; float:none; width:382px; margin:20px auto; }
p, span { font:normal 14px/16px Helvetica, arial, sans-serif; color:#ccc; padding:10px 0; }
a { font:normal 14px/16px Helvetica, arial, sans-serif; }
small { color:#6f6f6f; font-family: Helvetica, arial, sans-serif; }
#main #header h1 { color:#ccc; float:left; padding-top:20px; letter-spacing:3px; font-weight:normal; }
p.legal { width:400px; color:#666; font:10px/14px normal Helvetica, Arial, sans-serif; padding-top:5px; text-align:center; margin:30px auto 0 auto; }
body#faq-page p.legal { margin:30px auto 0 445px; }
#caption p { color:#fff215; text-align:center; font-weight:bold; padding:0; font-size:16px; }
#right h1 { color:#fff; padding:0; text-align:center; font-family:Helvetica, Arial, sans-serif; float:right; width:608px; margin:10px 0; }
#right h2 { color:#fff251; font-family:Helvetica,arial,sans-serif; font-weight:normal; padding:10px 0; text-align:center; font-size:22px; }
.see p { float:left; padding:10px 32px 20px 32px; width:500px; line-height:20px; font-size:15px; }
ul.features { float:left; width:507px; padding:0 42px; }
ul.features li { float:left; width:233px; margin:5px 10px; color:#01B83E; }
ul.features li span { color:#fff; }
#connect p { color:#666; padding:5px 0; text-align:center; }
#connect h3 { color:#1D82FF; font:bold 18px/22px Helvetica,arial,sans-serif; text-align:center; }
#connect h3.share-song { margin-top:10px; }
span.email { color:#1D82FF; }
#right .guided-tour h2 { margin-bottom:10px; }

/* Social Networking Styles */
ul.social-networking { list-style:none; text-indent:0; }
ul.social-networking li { float:left; display:inline; height:39px; padding:0 5px; }
ul.social-networking li a { float:left; height:39px; }
ul.social-networking li a.facebook { width:101px; }
ul.social-networking li a.twitter { width:89px; }
ul.social-networking li a.myspace { width:93px; }
ul.social-networking li a.youtube { width:70px; }
a.facebook { background:url(images/facebook.png) no-repeat 0 0; }
a.twitter { background:url(images/twitter.png) no-repeat 0 0; }
a.myspace { background:url(images/myspace.png) no-repeat 0 0; }
a.youtube { background:url(images/youtube.png) no-repeat 0 0; }
a.facebook:hover, a.twitter:hover, a.myspace:hover, a.youtube:hover { background-position:0 -39px; }