/*
    Framapack est un installeur de logiciels libres.
    Copyright (C) 2009  Simon Leblanc <contact@leblanc-simon.eu>

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see http://www.gnu.org/licenses/.
*/

html {
  margin: 0px;
  padding: 0px;
}

body {
  margin: 0px;
  padding: 0px;
  font-size: 1em;
  background-image: url("http://www.framasoft.net/css/fond.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
}

a:active, a:link, a:visited {
  color: #0000CC;
  text-decoration:none;
}

a:hover, a:focus {
  color: #FF8800;
  text-decoration: underline;
}

.border {
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-left: solid 1px #c4c4ff;
  border-top: solid 1px #c4c4ff;
  border-right: solid 2px #c4c4ff;
  border-bottom: solid 2px #c4c4ff;
}

.selected {
  background-color: #e5e5ff !important;
}

.clear {
  clear: both;
}

img {
  border: 0px;
}

/*********************************************
 *  Header
 *********************************************/
#header {
  clear: both;
  width: 1000px;
  position: relative;
  height: 110px;
  margin: 0 auto;
  margin-top: 10px;
}

#header .bloc {
  width: 60%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
}

#header .bloc .logo {
  position: absolute;
  top: 3px;
  left: 10px;
}

#header .bloc .description {
  position: absolute;
  top: 12px;
  left: 340px;
  font-size: 0.85em;
  font-weight: bold;
}

#header .bloc .description ul {
  margin: 0;
  padding: 0;
}

#header .bloc .description ul li {
  list-style: none;
  margin: 5px 0;
  padding: 0;
}

#header .network {
  width: 39%;
  position: absolute;
  top: 0;
  left: 61%;
  height: 100px;
  font-size: 0.9em;
}

#header .network p {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 10px;
  left: 10px;
}

#header .network ul {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 30px;
  left: 10px;
  width: 100%;
}

#header .network ul li {
  list-style: none;
  float: left;
  width: 25%;
  margin: 3px 0;
  padding: 0;
}


/*********************************************
 *  Footer
 *********************************************/
#footer {
  clear: both;
  width: 1000px;
  position: relative;
  margin: 10px auto;
  padding: 10px 0;
}

#footer .details {
  padding: 0 10px;
}

#footer p, #footer ul {
  color: #777777;
  font-size: 0.7em;
  text-align: left;
  margin-top: 0;
  margin-bottom: 5px;
}

#footer li {
  margin-top: 0;
  margin-bottom: 5px;
}


/*********************************************
 *  Content
 *********************************************/
#content {
  clear: both;
  width: 1000px;
  position: relative;
  margin: 10px auto;
}

#content form {
  float: left;
}


/*********************************************
 *  Content Select
 *********************************************/
#content #select {
  width: 810px;
  position: relative;
  float: left;
}
#content #select #category {
  width: 790px;
  float: left;
  margin-bottom: 10px;
  margin-left: 1%;
}
#content #select #category .category {
  width: 184px;
  float: left;
  margin-left: 8px;
  margin-top: 5px;
  text-align: center;
  background-color: #f5f5ff;
  font-size: 0.9em;
  font-weight: bold;
  cursor: pointer;
}
#content #select #category .category:hover {
  background-color: #e5e5ff !important;
}
#content #select #application {
  clear: both;
  width: 810px;
  float: left;
  position: relative;
}
#content #select #application .list-applications {
  float: left;
  display: block;
}
#content #select #application .application {
  width: 255px;
  height: 110px;
  float: left;
  margin-bottom: 1%;
  margin-left: 7px;
  position: relative;
  background-color: #f5f5ff;
}
#content #select #application .application:hover {
  background-color: #e5e5ff !important;
}
#content #select #application .application .logo {
  position: absolute;
  height: 32px;
  width: 32px;
  top: 10px;
  left: 111px;
}
#content #select #application .application .name {
  position: absolute;
  top: 45px;
  font-size: 0.9em;
  font-weight: bold;
  width: 100%;
  text-align: center;
}
#content #select #application .application .description {
  position: absolute;
  top: 65px;
  left: 5px;
  width: 245px;
  font-size: 0.9em;
}
#content #select #application .application .checkbox {
  position: absolute;
  left: 7px;
  top: 7px;
}
#content #select #application .application .information {
  position: absolute;
  right: 7px;
  top: 7px;
}
#content #select #application .application .version {
  font-size: 0.6em;
  font-weight: normal;
}


/*********************************************
 *  Content Right
 *********************************************/
#content #right {
  width: 190px;
  position: relative;
  float: right;
}
#content #right .don {
  margin: 20px auto;
  width: 90px;
  height: 90px;
}
#content #right .share {
  margin-bottom: 15px;
  text-align: center;
}
#content #right .share .explain{
  font-size: 0.7em;
  text-align: center;
  position: relative;
}
#content #right .share .explain .popup{
  text-align: center;
  position: absolute;
  background-color: #f5f5ff;
  z-index: 2;
  display: none;
  padding: 3px;
  left: -280px;
  top: -25px;
  width: 250px;
}
#content #right .share .link input{
  font-size: 0.6em;
}
#content #right .selection {
  text-align: center;
  font-size: 0.7em;
}
#content #right #cart {
  margin: 10px auto;
  width: 170px;
  padding: 5px;
}
#content #right #cart .application {
  font-size: 0.7em;
  position: relative;
  margin-bottom: 2px;
}
#content #right #cart .application img, .delete {
  position: absolute;
  right: 0;
  cursor: hand;
}
#content #right .download {
  margin: 10px auto;
  width: 128px;
  height: 128px;
  position: relative;
}
#content #right .download .text {
  font-size: 0.8em;
  font-weight: bold;
  position: absolute;
  bottom: 0;
  left: 25px;
}

#content #right .download input {
  border: 0;
  padding: 0;
  background: none;
  background-image: url(./images/arrow-disque-telecharger-icone-7878-128.png);
  width:128px;
  height:128px;
  cursor: pointer;
  z-index: 2;
}
#content #right .download .text-download {
  font-size: 0.8em;
  font-weight: bold;
  left: 0;
  position: absolute;
  text-align: center;
  top: 105px;
  width: 128px;
  z-index: 1;
}

/*********************************************
 *  Faq
 *********************************************/
#content .list-faq {
  margin: 10px;
}

#content .list-faq li {
  list-style: circle;
  font-size: 0.9em;
}

#content .question {
  margin: 5px 10px;
}

#content .question h2 {
  font-size: 1em;
  margin: 0;
  margin-top: 25px;
  border-bottom: 1px solid #000000;
}

#content .question p {
  margin: 5px 0;
  text-align: justify;
  font-size: 0.9em;
}

#content .question h3 {
  font-size: 0.7em;
  margin-left: 10px;
  text-decoration: underline;;
}

#content .question pre {
  margin-left: 30px;
}