/************************ CSS Hacks *************************/

/* Clearing floats easily, for all browsers */
.clearfix:after { content: "."; visibility: hidden; height: 0; display: block;clear: both; }
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/***************** General Styles *********************/

* { border: 0; margin: 0; padding: 0; }
html, body { width: 100%; min-width: 750px; }

body { background: #fff url(http://images.videolan.org/images/bg.png) repeat-x top;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px; line-height: 17px; color: #222; text-align: center; }

img { border: none;}
ol, ul { list-style-type: none; }
ul.bullets { list-style-type: disc; padding-left: 2.5em; margin-bottom: 1em; }

form { padding: 4px 0;}
table { border: none; width: 100%; margin-bottom: 5px; border-collapse: collapse; }
a, a:link, a:visited { color: #2D58AE; }
a:hover, a:active { color: #000;}

.clearme { clear:both; }

input { border: 1px solid #666; }

h1 { font-weight: bold; font-size: 22px;
    line-height: 16px;
    color: #333;
    padding: 14px 0 12px;
    border-bottom: 1px solid #CCC;
    margin-bottom: 8px;
}
h1#motto { margin-bottom: 0px; }
#right h1 { border: none; }

.header-buttons { position:absolute; right:0px; font-size:10pt; }

.header-buttons a, .grey-button{
    background: #CCC; color: #FFF;
    padding: 2px !important; margin: 0px !important;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #BBB;
}

.grey-button {font-size: 11pt; border-color: rgb(0, 51, 255); background: none repeat scroll 0% 0% rgb(102, 153, 255); font-weight: bold; }
.header-buttons a:hover, .grey-button:hover { background: #BBB; }

h2, #donate{
    font-family: Helvetica, Verdana, Arial, sans-serif;
    font-weight: bold; font-size: 18px;
    margin-top: 6px;
    padding: 6px 0 4px 0;
    line-height: 19px;
    color: #333;
}

h2 { margin-top: 15px; }

h2 a, h2 a:link, h2 a:visited {
    color: #2D58AE;
    text-decoration: none;
}

h2 a:hover {color: #F60;}

h3 { font-family: Helvetica, Verdana, Arial, sans-serif;
     font-weight: bold; font-size: 15px;
     color: #333;
     padding: 10px 0 4px 0;
     border-bottom: 2px dotted #E4E7E9;
     margin: 10px 0 3px 0;
}

hr { border: 1px solid #2D58AE; }

code { font-family: Courier, monospace, fixed; }

p.center { text-align:center; }
img.center { display: block; margin: auto; }
.hidden { display:none; }

#pagecontainer { min-width: 780px; max-width: 1600px; width: 90%; height: 100%; margin: 0 auto; }

/************************ Header ***********************/

#navmenucontainer, #submenucontainer { width: 100%;}
#header { margin-bottom: 19px; }

/* Main menu */
#navmenucontainer { height: 28px; }

#navmenu { float: left; padding: 4px 0;    vertical-align: middle;}
#navmenu li { display: inline; margin: 0 16px 0 0; padding: 0; }
#navmenu li a { font-weight: bold; font-size: 11px; text-decoration: none;color: #039; }

#navmenu .selected a {
    font-weight: bold;
    font-size: 11px;
    text-decoration: none;
    color: #FFFFFF;
    text-shadow: 0px 1px 1px #669;
}

#navmenu li a:hover { color: #004;text-decoration: none;}

/* Submenu */
#submenucontainer { text-align: left; height: 47px;}
#submenucontainer ul { padding: 0; }
#submenucontainer ul li { display: inline; }
#submenucontainer ul li a {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-weight: normal; color: #2D58AE;font-size: 17px;
    text-decoration: none;
    float: left; padding: 14px 20px 10px 0;
}

#submenucontainer .selected a {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-weight: normal; color: #2D58AE;font-size: 17px;
    text-decoration: none;
    /*font-style: italic;*/
    text-shadow: 0px 1px 3px #2D58AE;
    /*filter: Shadow(Color=#4D78CE, Direction=180, Strength=2), Shadow(Color=#4D78CE, Direction=150, Strength=1), Shadow(Color=#4D78CE, Direction=210, Strength=1);*/
    /*margin-top: -1px;*/
    float: left; padding: 14px 20px 10px 0;
    color: #FFFFFF;
}

#submenu li a:hover, #submenu li a:active { color: #2E3A6B; text-decoration: underline; }

/******************* Main page content - Global ***********************/

#maincontent {clear: both; text-align: left; min-width: 780px;
max-width: 1400px; margin: 0 auto; }

.fixed_table { table-layout: fixed; margin-top: 0; }
.fixed_table td { padding: 0px 15px; margin: 0;}
.fixed_table th { padding: 0px 15px; margin: 0; color: #07296E; font-size: 15px; }

.fronttable td { text-align: justify; line-height: 175%; }

th img { padding: 3px 0; vertical-align: middle; }

td {
    font-size: 11px;
    padding: 5px 7px;
    line-height: 135%;
    /*border-top: 1px solid #D4E0F7;
    background: #F4F7FD;*/
    vertical-align: top;
}

#left, .left { float:left; width: 56%; padding-bottom: 10px;  }
#right, .right { float:right; width: 36%; padding-bottom: 10px; margin-left: 2px;}
#fullwidth { padding-bottom: 55px; float:left; }

#left p, #right p, #fullwidth p {
     padding: 0 0 10px 0; line-height: 135%;
}
.date { color: #75818A; font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px; position: relative; top: -20px; float: right; margin-bottom: -30px; }


#news p, .press p { margin: 3px 7px 12px 7px; font:12px/19px  !important; }
#news br{ margin-bottom: 7px;}
.item { padding: 2px 14px 0px; }

/************** Main page content - Specific styles ******************/

/* DL */

a.download { font-size: 20px; text-decoration: none; font-weight: bold; }
.dl-info { font-size: 12px; font-style: italic; color: #555 }
.dl-other { font-size: 10px; font-style: italic; padding-top: 6px; float: right; }
.dl-button a { color: white; text-decoration: none; }
.dl-button { -moz-appearance:none;
    border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    -webkit-border-radius:  0.3em;

    box-shadow:0 -1px 0 rgba(0, 0, 0, 0.3), 1px 0 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(0, 0, 0, 0.3), -1px 0 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:0 -1px 0 rgba(0, 0, 0, 0.3), 1px 0 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(0, 0, 0, 0.3), -1px 0 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow:0 -1px 0 rgba(0, 0, 0, 0.3), 1px 0 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(0, 0, 0, 0.3), -1px 0 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5);

    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;

    background: -moz-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.15) 50%, transparent 50%, rgba(0, 0, 0, 0.2));
    background: -webkit-gradient(linear, center top, center bottom, from(rgba(255, 255, 255, 0.5)), color-stop(50%, rgba(255, 255, 255, 0.15)), color-stop(50%, transparent), to(rgba(0, 0, 0, 0.2)));

    border-color:rgba(255, 255, 255, 0.698) rgba(255, 255, 255, 0.2) -moz-use-text-color;
    border-left:  1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-style: solid solid none;
    border-width: 1px 1px medium;

    cursor:pointer;
    overflow:hidden;
    font: bold 1em/1em sans-serif;
    text-align:center;
    text-decoration:none;
    text-shadow:-1px -1px 1px rgba(0, 0, 0, 0.3);

    background-color:#408ACD;
    color:#FFFFFF;
    font-size:21px;

    vertical-align:middle;
    white-space:nowrap;

    width: 13em;
    height:1.8em;
    padding:0.36em 1em;
    margin: 0 auto;
}

.os, .otheros, .mirror { padding: 0 0 12px 15px; line-height: 20px; }
.os li, .otheros li { padding-left: 25px;
    background: url(http://images.videolan.org/images/12-em-down.png) left no-repeat;}

.os1 { float:left; }
.os2 { float:left;margin-left:3em; }

/* Pictures */
.videolan-logo { float: left; width: 120px; height: 45px; }

.vlc-screenshot {
    float: right; width: 300px; height: 200px;
    margin-top: -25px; padding-left: 40px;
}

.vlc-logo {
    float: left;width: 64px;height: 64px;
    margin-left: -5px; padding-bottom: 4px;
    background: url(http://images.videolan.org/images/vlc64x64.png) left top no-repeat;
}

.vlc-dl-logo {
    float: left;width: 64px;height: 64px;
    margin-left: -5px; padding-bottom: 4px;
    background: url(http://images.videolan.org/images/dl-vlc.png) left top no-repeat;
}

div.screenshot{
    float:left;
    margin-right: 3em;
    text-align:center;
    width: 150px;
}

/* Misc */
/* Feature pages */
.notes { font-size: 9px; }
.notes ol { list-style-type: decimal; padding-left: 30px; margin-bottom: 1em; }
.notes li { line-height: 135%; padding: 0 0 4px 5px; list-style-position: outside; }

.vlcversion { font-size: 16px; }
#vlccounter { font-weight: bold; }

#description { padding: 0 0 15px; border-bottom: 2px dotted #E4E7E9;}
#description p { padding: 0 0 15px 0; line-height: 19px; }
#description ul { padding: 35px 0 15px; line-height: 19px;}

.feature-icon-container { float: left;
    border-top: 2px dotted #E4E7E9;
    padding-top: 5px;  width: 100%; }

.feature-icon li { display: inline;
    list-style-type: none;
    padding-right: 20px; }

#disclaimer { font-style: italic; }

a.en {
    padding-right: 18px;
    background: transparent url(http://images.videolan.org/images/flags/us.png) no-repeat top right;
}

.installbtn {
    float: right;
    width: 135px;
    height: 38px;
    text-align: center;
    background: transparent url(http://images.videolan.org/images/inst_btn.png) no-repeat scroll
    top left;
}

.installbtn a {
      display: block;
      height: 38px;
      line-height: 36px;
      margin-left: 25px;
      text-decoration: none!important;
}

.blue-bullet { padding: 0; line-height: 19px;}
.blue-bullet li {
    background: url(http://images.videolan.org/images/bullet-blue.png) left top no-repeat;
    padding: 0 0 4px 25px;
}


/************************ Footer Layout ****************************/

#spacer { float: left; width: 0; height: 95%; font-size: 1px; /* to make sure width is not overridden */ }

#footer {    color: #75818A;    background: #E4E7E9;
        font-size: 11px; text-align: center;
        clear: both; height: 40px; padding: 15px;
        border-top: 1px solid #C8CDD0;
        margin-top: 20px;
}
#footer a { color: #75818A; text-decoration: underline; }
#footer a:hover { color: #333; text-decoration: none; }
#footer p { line-height: 20px; }

/**** New front page ****/
#mainbox {
    height: auto;
background: #FFF bottom center repeat-x url('http://images.videolan.org/images/frontpage/background.png');
  -moz-border-radius: 5px;
  -webkit-border-radius:  5px;
  border-radius: 5px;
  border: 1px solid #F0F0F0;

  box-shadow: 0px 3px 5px #888;
  -moz-box-shadow: 0px 3px 5px #888;
  -webkit-box-shadow: 0px 3px 5px #888;
  z-index: 999;
  overflow:hidden;
  padding: 10px;
  margin: 24px auto 32px;
}
#ieShadow {
  position: absolute;
  text-align: center;
  background: #888;
  z-index: -999;
  height: 420px;
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.50')
}
#ieMove {
  position: relative;
  top: -400px;
}

#mainbox h1 {
  font-size: 16pt;
  font-weight: bold;
  border: 0px;
  padding: 0px;
  padding-top: 5px;
  margin-bottom: 5px;
  line-height: 16pt;
}

#mainbox .download {
  padding-left: 18px;
  background: url(images/frontpage/download.png) left center no-repeat;
}

p.image { float: left; padding: 14px 5px 0px 5px; }

#project_statement p { color: #686868;}
#project_statement h2 { margin-top: 0px; color: #555;}
h2.project_name { margin-top: 0; padding-top: 0;}
#mainbox p { line-height: 150%; margin: 0.5em 0 0.5em 0; }

div.project { padding: 0 5px 2px; cursor: pointer; }
div.project h3 { font-size: 12px; color: #666; border-bottom: none; margin: 0 }

ul.menu {
  list-style-type: none;
}
ul.menu li {
  display: inline;
  padding: 0 2em 0 0;
}
ul.menu a:link {
  text-decoration: none;
  color: #2D58AE;
}