/*
	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: ""; }



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

body{
font-family: Arial, Verdana, sans-serif;
font-size: 0.9em;
line-height: 1.1;
font-weight: normal;
background-image: url('../images/pattern.gif');
}

#wrap {
min-width: 470px;
max-width: 960px;
padding-top: 55px;
margin-top: 40px;
margin-bottom: 40px;
margin-right: auto;
margin-left: auto;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 20px #000000;
background: #e0e0e0; /* Old browsers: generate by http://www.colorzilla.com/gradient-editor/ */
background: -moz-linear-gradient(top, #e0e0e0 0%, #ffffff 46%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(46%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e0e0e0 0%,#ffffff 46%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e0e0e0 0%,#ffffff 46%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #e0e0e0 0%,#ffffff 46%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #e0e0e0 0%,#ffffff 46%); /* W3C */
}

#header {
position: absolute;
top: 0px;
left: -310px;
margin-left: 50%;
width: 620px;
height: 60px;
border-radius: 0 0 10px 10px;
box-shadow: 0 -1px 5px #000000 inset, 0 2px 20px #545454;
outline: medium none;
padding: 15px;
background: #6f2525;
/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#babdb6', endColorstr='#000000');
 * background: -webkit-gradient(linear, left top, left bottom, from(#babdb6), to(#000000));
 * background: -moz-linear-gradient(top,  #babdb6,  #000000);
 */
}

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

#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: 15px;
}

#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;
}
h2 {
font-size: 1.4em;
font-weight: normal;
}
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;
}
pre {
margin: 1.5em 0 1.5em 0;
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;
}

/* Gray Box */

.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 */
}

/* 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;
}
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 { 
position: relative;
margin:0;
width: 560px;
vertical-align: top;
border: 1px solid #888a85;
border-radius: 4px;
box-shadow: 0 1px 4px gray inset;
background: white;
float: right;
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 {
position: relative;
width: 400px;
}

#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;
background: #ffffff; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d3d7cf'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d3d7cf)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ffffff,  #d3d7cf); /* for firefox 3.6+ */ 
color: #585C60;
font-size: 12px;
font-weight: 600;
width: 135px;
height: 30px;
line-height: 14px;
margin: 0;
padding: 5px;
position: absolute;
right: -1px;
top: -1px;
text-shadow: 0 1px 0 gray;
z-index: 2;
cursor: pointer;
}

#submit-button:hover {
background: #d3d7cf;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d7cf', endColorstr='#d3d7cf');
background: -webkit-gradient(linear, left top, left bottom, from(#d3d7cf), to(#d3d7cf));
background: -moz-linear-gradient(top,  #d3d7cf,  #d3d7cf);
}

/* 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; }

#advanced-slide legend {
font-weight: bold;
}
#advanced-slide fieldset {
boder: 1px solid gray;
font-size: 0.9em;
padding: 5px;
margin: 10px;
}