1
0
Fork 0
NCA-Screens/css/style.css

355 lines
4.7 KiB
CSS
Raw Normal View History

2011-11-02 12:53:58 -04:00
/*-------------------------
Simple reset
--------------------------*/
*{
margin:0;
padding:0;
}
/*-------------------------
General Styles
--------------------------*/
html {
background-color: #c0c0c0;
background-image: url(../img/concrete_wall_3.png);
min-height: 100%;
position: relative;
2011-11-02 12:53:58 -04:00
}
body {
color: #fff;
min-height: 600px;
font: 14px/1.3 'Segoe UI',Arial, sans-serif;
2011-11-02 12:53:58 -04:00
}
a, a:visited {
text-decoration: none;
outline: none;
color: #54a6de;
2011-11-02 12:53:58 -04:00
}
a:hover {
text-decoration: underline;
2011-11-02 12:53:58 -04:00
}
header {
display: block;
2011-11-02 12:53:58 -04:00
}
/*-------------------------
Header Styles
--------------------------*/
header{
background-color: #303030;
background-image: url(../img/dark_circles.png);
/*position: fixed;*/
width: 100%;
height: 25px;
top: 0;
left: 0;
/*z-index: 100000;*/
2011-11-02 12:53:58 -04:00
box-shadow: 0 1px 2px #303030;
-webkit-box-shadow: 0 1px 2px #303030;
-moz-box-shadow: 0 1px 2px #303030;
2011-11-02 12:53:58 -04:00
}
h1{
height: 40px;
2011-11-02 12:53:58 -04:00
text-align: center;
}
/*-------------------------
Dropbox Element
--------------------------*/
#dropbox {
background-color: #a0a0a0;
background-image: url(../img/brushed_alu_dark.png);
2011-11-02 12:53:58 -04:00
border-radius: 3px;
2011-11-02 12:53:58 -04:00
position: relative;
margin: 80px auto 90px;
2011-11-02 12:53:58 -04:00
min-height: 290px;
overflow: hidden;
padding-bottom: 40px;
width: 960px;
2011-11-02 12:53:58 -04:00
box-shadow: 0 0 4px rgba(0,0,0,0.3) inset,0 -3px 2px rgba(0,0,0,0.1);
2011-11-02 12:53:58 -04:00
}
#dropbox .message{
font-size: 11px;
text-align: center;
padding-top: 160px;
2011-11-02 12:53:58 -04:00
display: block;
color: #00487D;
2011-11-01 19:34:16 -04:00
}
2011-11-02 12:53:58 -04:00
#dropbox .message i{
color: #00487D;
font-size: 10px;
2011-11-02 12:53:58 -04:00
}
#dropbox:before{
border-radius: 3px 3px 0 0;
2011-11-02 12:53:58 -04:00
}
/*-------------------------
Image Previews
--------------------------*/
#dropbox .preview {
2011-11-02 12:53:58 -04:00
width:245px;
height: 245px;
2011-11-02 12:53:58 -04:00
float:left;
margin: 55px 0 0 60px;
position: relative;
2011-11-01 19:34:16 -04:00
text-align: center;
2011-11-02 12:53:58 -04:00
}
#dropbox .preview img {
2011-11-02 12:53:58 -04:00
max-width: 240px;
max-height:180px;
border:3px solid #fff;
display: block;
box-shadow:0 0 2px #000;
}
#dropbox .imageHolder {
2011-11-02 12:53:58 -04:00
display: inline-block;
position:relative;
}
#dropbox .uploaded {
2011-11-02 12:53:58 -04:00
position: absolute;
top:0;
left:0;
height:100%;
width:100%;
2011-11-02 12:53:58 -04:00
display: none;
}
#dropbox .preview.done .uploaded {
2011-11-02 12:53:58 -04:00
display: block;
background: url('../img/success.png') no-repeat center center rgba(255,255,255,0.5);
}
#dropbox .preview.error .uploaded{
display: block;
background: url('../img/error.png') no-repeat center center rgba(255,255,255,0.5);
2011-11-02 12:53:58 -04:00
}
/*-------------------------
Progress Bars
--------------------------*/
#dropbox .progressHolder {
2011-11-01 19:34:16 -04:00
position: absolute;
background-color: #252f38;
height: 12px;
width: 100%;
left: 0;
bottom: 30px;
2011-11-02 12:53:58 -04:00
box-shadow: 0 0 2px #000;
2011-11-02 12:53:58 -04:00
}
#dropbox .progress {
background-color: #c0c0c0;
background-image: url(../img/concrete_wall_3.png);
2011-11-02 12:53:58 -04:00
position: absolute;
height: 100%;
left: 0;
width: 0;
2011-11-02 12:53:58 -04:00
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset;
-moz-transition: 0.25s;
-webkit-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
2011-11-02 12:53:58 -04:00
}
#dropbox .preview.done .progress{
width:100% !important;
}
/*-------------------------
Link Box
--------------------------*/
#dropbox .linkHolder {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
#dropbox .linkHolder input {
width: 100%;
}
/*-------------------------
Uploaded Image
--------------------------*/
#imageContainer {
width: 100%;
text-align: center;
margin-top: 25px;
}
.image {
max-width: 920px;
}
#message {
background-color: #a0a0a0;
background-image: url(../img/brushed_alu_dark.png);
border-radius: 3px;
margin: auto;
overflow: hidden;
width: 600px;
padding: 10px;
margin-top: 25px;
box-shadow: 0 0 4px rgba(0,0,0,0.3) inset,0 -3px 2px rgba(0,0,0,0.1);
2011-11-06 02:40:37 -05:00
margin-bottom: 25px;
}
#message a {
color: #000;
font-weight: bold;
}
/*-------------------------
Navigation Tabs
--------------------------*/
2011-11-06 02:34:41 -05:00
#left {
position: absolute;
left: 0;
top: 30%;
width: 50px;
height: 50px;
background-image: url(../img/leftarrow.png);
}
#right {
position: absolute;
right: 0;
top: 30%;
width: 50px;
height: 50px;
background-image: url(../img/rightarrow.png);
}
.navigation {
display: block;
height: 50px;
width: 50px;
2011-11-06 02:34:41 -05:00
}
/*-------------------------
Gallery
--------------------------*/
#galleryContainer {
width: 175px;
height: 175px;
float: left;
margin: 5px;
position: relative;
text-align: center;
2011-11-06 02:40:37 -05:00
}
.pagination {
text-align: center;
}
/*-------------------------
Header Content
--------------------------*/
#title {
text-align: left;
width: 48%;
left: 0;
position: absolute;
margin-left: 10px;
}
#title h1 {
text-align: left;
padding: 3px;
}
#title h1 a {
color: #fff;
}
#links {
width: 48%;
right: 0;
text-align: right;
position: absolute;
padding: 3px;
font-weight: bold;
margin-right: 10px;
}
#links a {
color: #fff;
}