/*---------------------------------------------------*/
/* Grid Stuff                                        */
/*---------------------------------------------------*/

div.two-col {
  width:240px;
}

div.one-block,
div.one-block-after {
  width:780px;
  margin:0 0 0 40px;
}

div.one-block-after {
  padding:20px 0 0 0;
}


/*---------------------------------------------------*/
/* Home page video                                   */
/*---------------------------------------------------*/

a#video-link {
  left: 237px;
  top: 150px;
  width: 428px;
  height: 328px;
}
a#video-link span {
  width: 428px;
  height: 328px;
  background-position: 50% 50%;
}

* html a#video-link span {
  margin-left: 173px;
  margin-top: 130px;
}

/* Video in gallery for home page */
#video_wrapper {
  position: absolute;
  left: 35px;
  top: 35px;
  width: 640px;
  height: 519px;
}
#video_wrapper p {
  padding: 200px 20px;
  text-align: center;
  color: #FFF;
  height: 100px;
  background-color: #000;
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter:alpha(opacity=50);
}

/*---------------------------------------------------*/
/* Page Headers                                      */
/*---------------------------------------------------*/

div.page_header {
  position:absolute;
  top:113px;
  left:50%;
  margin-left:-450px; /* has to be reset via JS for IE */
  width:900px;
  height:379px;
  z-index:1000;
}

div#page_header_start {
  background:url(../images/startpage-header.jpg) left top no-repeat;
  height:560px;
}

div#page_header_overview {
  background:url(../images/page-header-overview.jpg) left top no-repeat;
}

div#page_header_organize {
  background:url(../images/page-header-organize.jpg) center top no-repeat;
}

div#page_header_deliver {
  background:url(../images/page-header-deliver.jpg) center top no-repeat;
}

div#page_header_tools {
  background:url(../images/page-header-tools.jpg) center top no-repeat;
}

/*---------------------------------------------------*/
/* Rocket Columns                                    */
/*---------------------------------------------------*/

div.rocket_col {
  position:absolute; 
  left:50%;
  top:540px;
  font-size: 11px;
  width:240px;
}

div#overview_1, div#organize_1, div#deliver_1 { margin-left:-410px; }
div#overview_2, div#organize_2, div#deliver_2 { margin-left:-125px; }
div#overview_3, div#organize_3, div#deliver_3 { margin-left:160px; }

/*---------------------------------------------------*/
/* Kicker                                            */
/*---------------------------------------------------*/

div#kicker {
  width:900px;
  height:40px;
  line-height:41px;
  font-size: 11px;
  color:#4b4b4b;
  margin:0 auto 20px auto;
  background:url(../images/kicker.gif) left top no-repeat;
  text-indent:37px;
}

div#kicker_left {
  float:left;
  padding:0;
  margin:0;
}

div#kicker_right {
  float:right;
  margin-right:37px;
}

div#kicker a {
  color:#fff;
}

div#kicker a.active, div#kicker span {
  color:#666;
  text-decoration:none;
}


/*---------------------------------------------------*/
/* Tools Choose OS                                   */
/*---------------------------------------------------*/

div#tools_tabs,
div#tools_tabs_tools {
  position:absolute;
  height:28px;
  top:460px;
  left:50%;
  margin:0 0 0 -140px;
  z-index:1001;
}

div#tools_tabs_tools {
  margin:0 0 0 -85px;
}

ul#choose_os,
div#tools_tabs span { float:left; }

div#tools_tabs span {
  font-size:11px;
  margin:12px 20px 0 0;
}

ul#choose_os li {
  display:block;
  float:left;
}

ul#choose_os li a {
  display:block;
  line-height:34px;
  height:28px;
  text-align:center;
  text-decoration:none;
  font-size: 11px;
  color:#dedede;
  position:relative;
  width:98px;
  bottom:-2px;
  background:url(../images/tools-inactive-tab.png) center bottom no-repeat;
}

ul#choose_os li a.active {
  background:url(../images/tools-active-tab.png) center bottom no-repeat;
  color:#fff;
  bottom:-4px;
  line-height:30px;
}

/*---------------------------------------------------*/
/* fluxUp! Download Boxes                            */
/*---------------------------------------------------*/

a.download-fluxup {
  font-size:15px;
  color:#fff;
}

a.download-fluxup {
  font-weight:bold;
  display:block;
}

div#download_mac,
div#download_pc {
  position:absolute;
  margin:0 0 0 -83px;
  width:310px;
  top:320px;
  left:50%;
  z-index:1001;
}

div#download_mac span,
div#download_pc span { font-size:11px; }

/*---------------------------------------------------*/
/* fluxUp! Installation Guide                        */
/*---------------------------------------------------*/

div#macosx_1, div#windows_1,
div#macosx_2, div#windows_2 {
  position:absolute;
  top:520px;
  left:50%;
  margin:0 0 0 -375px;
  width:365px;
  height:658px;
}

div#macosx_2, div#windows_2 {
  margin:0 0 0 12px;
}

.column-wrapper {
  position: relative;
  zoom: 1;
}

.numbered-guide {
  float: left;
  margin: 0;
  padding: 0;
  font-size: 12px;
  width: 365px;
  height: 658px;
}

.numbered-guide li {
  display: block;
  margin: 10px 0 0 0;
  padding: 5px 10px 10px 40px;
  line-height: 1.5;
  width: 300px;
}

li.bullet-1 { background:url(../images/bullet-1.gif) no-repeat; }
li.bullet-2 { background:url(../images/bullet-2.gif) no-repeat; }
li.bullet-3 { background:url(../images/bullet-3.gif) no-repeat; }
li.bullet-4 { background:url(../images/bullet-4.gif) no-repeat; }
li.bullet-5 { background:url(../images/bullet-5.gif) no-repeat; }
li.bullet-6 { background:url(../images/bullet-6.gif) no-repeat; }


/* Mac OS X Install Screenshots */
img#mac_download,
img#mac_install,
img#mac_expand                { margin:10px 0 15px 0px; }
img#mac_eject                 { margin:10px 0 15px 15px }

/* Windows XP Install Screenshots */
img#windows_save,              
img#windows_download_complete, 
img#windows_destination,
img#windows_additional        
img#windows_startmenu,
img#windows_complete          { margin:10px 0 15px 0; }


/*---------------------------------------------------*/
/* Sub Navigation                                    */
/*---------------------------------------------------*/

div#subnavigation {
  height:195px;
  width:900px;
  background:url(../images/submenu-background.gif) no-repeat;
  margin-top:-30px;
}

div#subnavigation ul {
  position:absolute;
  top:175px;
  left:50%;
  margin-left:-80px;
  width:500px;
  height:100px;
}

div#subnavigation ul li a {
  display:block;
  width:80px;
  height:100px;
  line-height:45px;
  color:#b1b6b6;
  margin:0 60px 0 0;
  padding:65px 0 0 0;
  text-decoration:none;
  text-align:center;
  font-size:12px;
}

div#subnavigation ul li a span {
  display:block;
  width:67px;
  height:22px;
  line-height:22px;
  margin:0 0 0 7px;
}

div#subnavigation ul li a.active {
  color:#fff;
}

div#subnavigation ul li a.active span {
  background:url(../images/submenu-active.png) center top no-repeat;
}

a#overview { background:url(../images/submenu-overview.png) center top no-repeat; }
a#organize { background:url(../images/submenu-organize.png) center top no-repeat; }
a#deliver { background:url(../images/submenu-deliver.png) center top no-repeat; }

/*---------------------------------------------------*/
/* Content                                           */
/*---------------------------------------------------*/

div#content {
  color:#ccc;
}

img.feature-icon {
  float:left;
  margin:0 10px 0 0;
}

/* Screenshots */
img.screenshot-two-col    { margin:0 0 20px 0; }
img.screenshot-one-block  { margin:15px 0 20px 5px; }
img.enlargeable { cursor: pointer; }

p {
  margin:0 0 15px 0;
  line-height:1.5;
}

p a {
  color:#fff;
}

div.one-block p,
div.one-block-after p { width:450px; }

em.ext {
  font-style:normal;
  font-size:10px;
  color:#fff;
}

div.seperator {
  height:1px;
  border-top:1px solid #626262;
  margin-bottom:40px;
  width:900px;
}

div#start_content {
  position:relative;
  width:380px;
  left:475px;
  top:190px;
}

div#start_content p {
  color:#e6f3de;
  font-size:12px;
}

div#start_content p em {
  color:#fff;
}

div#signup_and_tour {
  line-height:23px;
  font-size:12px;
  position:absolute;
  bottom:35px;
  left:340px;
}

div#signup_and_tour a#start_tour {
  color:#fff;
} 

a.green_signup_button {
  display:block;
  width:114px;
  height:26px;
  background:url(../images/green-signup-button.gif);
  margin:0 5px 0 0;
  text-indent:-9000px;
  float:left;
}

div#tabs {
  position:absolute;
  top:649px;
  width:900px;
  height:77px;
  background:url(../images/tabs-background-rounded.gif) #00ff00;
}

a.tab {
  width:199px;
  height:53px;
  display:block;
  text-indent:-9000px;
  float:left;
  margin:0 0 0 8px;
}

a.tab.firstchild { margin:0 0 0 40px;}

a#tab_feature_tour { background:url(../images/tab-feature-tour.gif); }
a#tab_case_studies { background:url(../images/tab-case-studies.gif); }
a#tab_fluxup { background:url(../images/tab-fluxup.gif); }
a#tab_api { background:url(../images/tab-api.gif); }

.mini-screenshot {
  position: relative;
  display: block;
  margin: 0 0 20px 0;
  padding: 5px;
  width: 220px;
  background: #444;
  border: 1px solid #646464;
}
.mini-screenshot img,
.mini-screenshot img.screenshot-two-col {
  display: block;
  margin: 0;
  padding: 0;
}


/*---------------------------------------------------*/
/* Rounded Boxes                                     */
/*---------------------------------------------------*/

div.rounded-boxes {
  width:850px;
  margin:0 0 0 -20px;
}

div.rounded-box {
  float:left;
  width:268px;
  height:263px;
  margin:0 0 0 15px;
  background:url(../images/rounded-box.gif) no-repeat;
}

div.rounded-box h3,
div.rounded-box p,
div.rounded-box img.screenshot-rounded-box { margin:15px 0 0 15px; }

div.rounded-box h3  { font-size:12px; }
div.rounded-box p   { width:240px; font-size: 11px; }

div#mini_features {
  position:absolute;
  z-index:1003;
  top:1250px;
}

div#get_started_box {
  width:820px;
  height:200px;
  position:absolute;
  z-index:1003;
  top:1210px;
  background:#00ff00;
  padding:0;
}

a#get_started_big_button {
  background:url(/images/get-started.png);
  width:820px;
  height:200px;
  display:block;
  text-indent:-9000px;
}

div#footnotes_overview,
div#footnotes_deliver {
  height:30px;
  width:500px;
  font-size:10px;
  color:#777;
  position:absolute;
  top:1420px;
  left:50%;
  margin-left:-250px;
  line-height:1.5;
  text-align:center;
}

div#footnotes_overview { top:1850px; }

/* Three Cols */

div.three-col {
  width:220px;
  line-height:1.5;
  position:absolute;
  top:280px;
}

div.three-col p { margin-left:0; }

div.three-col.first-child {
  left:10px;
}

div.three-col.second-child {
  left:295px;
}

div.three-col.third-child {
  left:575px;
}

div.three-col ul, div.three-col h3 {
  margin-left:0;
  padding-left:0;
}

div.three-col h3 {
  font-size:14px;
}

div.three-col ul { 
  color:#999;
  font-size:11px;
}

div.three-col ul li { margin-bottom:7px; }

div.three-col ul em {
  color:#fff;
}

span.outside, span.outside a {
  color:#666;
  font-size:10px;
}

img#logo { border:none; background:none; }

/*---------------------------------------------------*/
/* Headlines                                         */
/*---------------------------------------------------*/

/*
h2.subheadline,
h2.subheadline-long {
  display:block;
  width:250px;
  height:37px;
  margin:15px 0 10px 0;
  text-indent:-9000px;
}

h2.subheadline-long { width:700px; }

/* Overview 

h2#start_finding            { background:url(../images/start-finding.gif) left top no-repeat; }
h2#add_files                { background:url(../images/add-files.gif) left top no-repeat; }
h2#involve_your_teammates   { background:url(../images/involve-your-teammates.gif) left top no-repeat; }
h2#dig_deeper               { background:url(../images/dig-deeper.gif) left top no-repeat; }
h2#show_who_you_are         { background:url(../images/show-who-you-are.gif) left top no-repeat; }
h2#a_rockstar_userinterface { background:url(../images/a-rockstar-userinterface.gif) left top no-repeat; }

/* Organize 
h2#click_to_organize        { background:url(../images/click-to-organize.gif) left top no-repeat; }
h2#type_to_search           { background:url(../images/type-to-search.gif) left top no-repeat; }
h2#finetune_your_assets     { background:url(../images/finetune-your-assets.gif) left top no-repeat; }
h2#creating_tags_is_fun     { background:url(../images/creating-tags-is-fun.gif) left top no-repeat; }
h2#find_the_right_version   { background:url(../images/find-the-right-version.gif) left top no-repeat; }
h2#convenience_is_king      { background:url(../images/convenience-is-king.gif) left top no-repeat; }
h2#and_what_about_delivery  { background:url(../images/and-what-about-delivery.gif) left top no-repeat; }

/* Deliver 
h2#put_your_assets_on_stage { background:url(../images/put-your-assets-on-stage.gif) left top no-repeat; }
h2#instantly_share_assets   { background:url(../images/instantly-share-assets.gif) left top no-repeat; }
h2#stay_tuned               { background:url(../images/stay-tuned.gif) left top no-repeat; }

/* Tools 
h2#downloading_fluxup_for_macosx { background:url(../images/downloading-fluxup-for-macosx.gif) left top no-repeat; }
h2#downloading_fluxup_for_windows { background:url(../images/downloading-fluxup-for-windows.gif) left top no-repeat; }
*/

h2 {
  font-size:12px;
  color:#fff;
  text-transform:uppercase;
  margin:0 0 15px 0;
  letter-spacing:1px;
  line-height:1.5;
}

h2.start_headline {
  width:220px;
  height:25px;
  text-indent:-9000px;
}

h2#file_chaos_solved        { background:url(../images/file-chaos-solved.gif) no-repeat; }
h2#get_started_immediately  { background:url(../images/get-started-immediately.gif) left bottom no-repeat; padding-top:13px; }

h3 {
  color:#fff;
  font-size:11px;
  margin:0 0 15px 0;
}

/*---------------------------------------------------*/
/* Gallery                                           */
/*---------------------------------------------------*/

div#gallery {
  width:1px; /*750px*/
  height:1px; /*500px*/
  position:absolute;
  z-index:10000;
  top:50%;
  left:50%;
  margin:0px;
}

div#gallery_close {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background: url(../images/closebox.png) 0 0 no-repeat;
  z-index: 1000;
}

.magnifier {
  position:absolute;
  bottom: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  background: url(../images/magnifier.png);
  cursor: pointer;
  z-index: 900;
}

div#gallery_spinner_wrapper {
  position:absolute;
  left:50%;
  margin-left:-20px;
  width:50px;
  height:50px;
  overflow: hidden;
  z-index:10000;
}
div#gallery_spinner {
  position: relative;
  left: 0;
  top: 0;
  width:600px;
  height:50px;
  background: url(../images/spinner50x50.png) 0 0 no-repeat;
}