/*
	AppRecommender Stylesheet

	Copyright 2011 Tássia Camões, Tiago Vaz and Valessio Brito

	This stylesheet is free software; you can redistribute it and/or modify it
	under the terms of the GNU General Public License, version 2, as published by
	the Free Software Foundation.

	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 General Public License for more details.

	You should have received a copy of the GNU General Public License along with
	this program; if not, write to the Free Software Foundation, Inc., 51 Franklin
	Street, Fifth Floor, Boston, MA 02110-1301 USA.

	The license text can also be found at http://www.gnu.org/copyleft/gpl.html
*/

/* Reset */
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl,
dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td { 
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

body            { line-height: 1; color: black; background: white; }
ol, ul          { list-style: none; }
table           { border-collapse: separate; border-spacing: 0; }
blockquote, q   { quotes: "" ""; }
html            { background-color: transparent; }
:focus          { outline: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
p		{ margin-bottom: 5px; }

/*
 * Layout, font, size.. colors..
 */

body{
background: #b7d2ef;
font-family: Arial, Verdana, sans-serif;
font-size: 0.9em;
line-height: 1.3;
font-weight: normal;
}

#wrap {
min-width: 470px;
max-width: 960px;
padding-top: 55px;
margin-top: 40px;
margin-bottom: 40px;
margin-right: auto;
margin-left: auto;
border-radius: 10px;
box-shadow: 0 2px 20px #545454;
}

.about #wrap { max-width: 780px; padding-top: 0px; } 
.about .innertube { padding: 30px; }

#header {
position: absolute;
top: 0px;
left: -310px;
margin-left: 50%;
width: 620px;
height: 50px;
border-radius: 0 0 20px 20px;
box-shadow: 0 2px 20px #545454;
outline: medium none;
padding: 15px;
}

body.about #header { display: none; }

#logo span { display: none; }
#logo { 
display: none;
position: absolute; /* FIXME: Remove Logo */
top: 0;
left: -32px;
background: url('../images/icon95.png') no-repeat;
width: 105px;
height: 95px;
margin: 0px;
}

#navbar { 
list-style: none;
height: 20px;
padding:0;
margin-bottom: 5px;
float: left;
}

#navbar li { 
display: inline;
}


#navbar li a { 
color: black; 
float: left; 
display: block;
font-size: 1.0em;
padding: 4px 10px; 
margin-left: -1px; 
position: relative; 
left: 1px; 
text-decoration: none;
border-right: 1px solid gray;
}

#navbar li a:hover { 
color: red;
}

#sidebar {
width: 370px;
min-height: 475px;
float: right;
padding-bottom: 20px;
}

#maincontent {
padding-top: 10px;
padding-bottom: 10px;
}

.align-left {
float: left;
}

.align-right {
float: right;
}

.innertube {
margin: 30px;
}

#footer {
clear: both;
display: block;
color: gray;
font-size: 0.8em;
text-align: center;
padding: 20px;
}


/* Links */

a:link {
color: #0035c7;
text-decoration: none;
}
a:visited {
color: #54638c;
}
a:link:hover {
text-decoration: none;
color: #00207a;
}
a:visited:hover {
text-decoration: none;
}
a:active {
color:#c2c3c7;
}
a img {
border:0;
}

/* Titles and subtitles */

h1
, h2
, h3
, h4
, h5
, h6 {
font-family: Verdana, Arial, sans-serif;
font-weight: 600;
color: black;
margin-bottom: 0.7em;
margin-top: 0.5em;
}
h1 {
font-weight: normal;
font-size: 1.8em;
color: #4b86d1;
}
h2 {
font-size: 1.4em;
font-weight: normal;
color: #678cbb;
}
h3 {
font-size: 1.125em;
}
h3 {
font-size: 1em;
font-weight: bold;
}
h4 {
font-weight: normal;
font-style: italic;
color: #444;
}
h5 {
font-style: italic;
font-size: 0.75em;
color: #444;
}
pre {
margin: 1.5em 0 1.5em 0;
font-size: 1.3em;
overflow: auto;
font-family: monospace;
white-space: pre;
color: black;
}
tt, code {
font-family: monospace;
color: black;
}
code {
white-space: pre;
padding: 0.5em;
display: block;
background-color: #f5f6f7;
border: 0.1em solid #d2d3d7 ;
overflow: auto;
}
tt {
margin: 0;
padding:0;
}

/* Tip */
div.tip
, div.important
, div.warning
, div.note 
, div.trans-note {
padding:0 2em 0 4em;
margin: 1.85em 0 1.85em 0;
background-repeat: no-repeat;
background-position: 0.5em 0.5em;
font-size: 0.75em;
line-height: 2em;
background-color:#FFFFCB;
border:0.15em solid #CCCCA3;
border-radius: 10px;
box-shadow: 0 1px 5px #545454;
}
div.tip p
, div.important p
, div.warning p
, div.note p 
, div.trans-note p {
margin: 1em 0 1em 0;
}
div.tip {
background-image: url('../images/admon-tip.png');
}
div.important{
background-image: url('../images/admon-important.png');
}
div.warning {
background-image: url('../images/admon-warning.png');
}
div.note
, div.trans-note  {
background-image: url('../images/admon-note.png');
}


/* Recommender BOX */

#recommender-box {
height: 43px; 
position: relative;
margin:0;
vertical-align: top;
border: 1px solid #888a85;
border-radius: 4px;
box-shadow: 0 1px 4px gray inset;
background: #ffffff;
z-index: 3;
}

#recommender-box label {
font-size: 1.3em;
}

#recommender-box #upfile {
width: 22px;
height: 22px;
float: right;
display: block; 
background:url('/static/images/upload.png') no-repeat; 
cursor:pointer;  
margin: 0;
padding: 0;
position: absolute;
right: 0px;
top: 2px;
z-index: 1;
}

#pkgs_list, #input-box {
padding:10px;
position: relative;
width: auto;
}

#pkgs_list {
font-size: 13px;
font-family: Arial, Verdana, Sans-serif;
color: gray;
border: 0 none;
margin: 0;
outline: 0 none;
padding: 3px;
background: none;
width: 420px;
text-align: center;
}

#pkgs_list:hover, #pkgs_list:active, #pkgs_list:focus {
color: black;
}

#submit-box {
float: right;
display: block;
width: 135px;
height: 45px;
overflow: hidden;
position: relative;
}

#submit-button {
border: 1px solid #888a85;
box-shadow: 0 1px 4px gray inset;
border-radius: 0;
color: #585C60;
font-size: 12px;
font-weight: bold;
width: 135px;
height: 30px;
line-height: 14px;
margin: 0;
padding: 5px;
position: absolute;
right: -1px;
top: -1px;
z-index: 2;
cursor: pointer;
}

#submit-button:hover {
background: #ffffff; 
}

/* Advance Query */

#advanced-button {
color: #888a85;
font-size: 10px;
font-weight: 600;
height: 15px;
width: 135px;
line-height: 14px;
margin: 0;
position: absolute;
right: -1px;
text-align: center;
bottom: -1px;
z-index: 2;
cursor: pointer;
}

#advanced-button:hover { color: black; }

#upload-slide,
#advanced-slide { display: none; }

#upload-slide label,
#advanced-slide legend {
font-weight: bold;
}

#upload-slide,
#advanced-slide fieldset {
font-size: 0.9em;
padding: 5px;
margin: 10px;
}

#tip-upload {
display: none;
position: absolute;
top: 90px;
z-index: 1;
}

#upload-slide:hover #tip-upload {
display: block;
}


/* Gradients */

.graybox { 
background: #dfdfdf;
border-radius: 5px;
padding: 5px;
}

.horiz-grad {
background: #dfdfdf; /* Old browsers */
background: -moz-linear-gradient(left, #dfdfdf 51%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(51%,#dfdfdf), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, #dfdfdf 51%,#ffffff 100%); /* W3C */
}

.vert-grad {
background: #dfdfdf; /* Old browsers */
background: -moz-linear-gradient(top, #dfdfdf 51%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,#dfdfdf), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #dfdfdf 51%,#ffffff 100%); /* W3C */
}

.glass {
background: #e2e2e2; /* Old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
}