/*
2010-08-20
Splash/Home CSS File
Sections of this file may be sourced from the HTML5 Boilerplate Kit.
keep this file neat. use a template file for foundation css.
-------------------------------------------------------------
Notes:
Url() is relative to the css file, *not* the html file!
Be careful of foundation.css, and the order that the css files are loaded!
Be careful of cross-browser support for:
complicated CSS selector hierarchy (parent/child/descendant/id)
general implementation of tags (ex. display: block-inline)
to prevent container from creating a scrollbar with bg image:
make container width 100%
align css bg image with "center top"
use the following to center align
margin-left: auto;
margin-right: auto;
-background colors can hide backgrounds of other elements!
-you can use "z-index 0" with ![]()
to create "fake" backgrounds
-use "" to prevent floats from exceeding a container
-when using "absolute", parent padding is ignored!
-------------------------------------------------------------
goal of html+css:
separate content from presentation
ex: if an image is of your product, include it in your html
ex: if an image is a gradient or generic background, incl with css
CSS box model hierarchy (for content block spacing):
margin
border
padding (increases content area)
content
CSS selector hierarchy/doctree
http://www.w3.org/TR/CSS2/selector.html
http://www.w3.org/TR/CSS2/conform.html#doctree
CSS positioning:
static according to the normal flow of the page (default)
fixed relative to browser window (element will not move)
relative relative to the elements' normal position
absolute relative to first parent element that is not static
useful css properties:
span inline (default)
div block (default)
can be changed with display: block/inline
border-radius use to change box corner radius (independently)
cursor
default
max-height
max-width
min-height
min-width
visibility:hidden hides element, still uses space in layout
display
:none hides and removes element from layout
:block
:inline
:inline-block
:inline-table
[...]
z-index defines stack order of overlapping elements
greater positive number is on top
if no z is defined or equal,
the last element in HTML will appear on top
overflow only for text, not background
position
float content wraps around these elements
discouraged for layouts
:left
:right
clear prevent other elements from wrapping around a float
background
:active
:first-child match the first child of any element
:focus
:hover
:link
:visited
:before
:after
[sel 1] [sel 2] match any elements which inherit 1 and 2
---------------------------------------------------
Examples:
For descendants This is illegal!
#gallery li.act,li.act:hover{}
instead,
#gallery li.act {}
#gallery li.act:hover{}
*/
/*
FIX
note positioning */
/* tag-wide modifiers */
html, body {
background-color: #000;/*#090a0a;*/
height: 100%;
line-height: 1.4em;
font:normal 100%/1.4 "Trebuchet MS", sans-serif; /*Gill Sans, Calibri,*/
}
h1 {
/*font-family: "Myriad Pro",Arial,Helvetica,sans-serif;*/
font-size: 36px;
font-weight: normal;
color: #BFCAFF;/*#dfdfff;*/
/*border-bottom: 1px dotted #333;*/
}
h2 {
/*font-family: "Myriad Pro",Arial,Helvetica,sans-serif;*/
font-size: 22px;
font-weight: normal;
color: #BFCAFF;/*#dfdfff;*/
/*border-bottom: 1px dotted #333;*/
}
h3 {
/*font-family: "Myriad Pro",Arial,Helvetica,sans-serif;*/
font-size: 18px;
font-weight: normal;
color: #BFCAFF;/*#dfdfff;*/
}
h1, h2, h3, h4, h5, h6 {
font-family: "Trebuchet MS",sans-serif; /*Gill Sans, Calibri,*/
/*margin:1.1em 0 0.5em;*/
/*text-shadow:1px 1px 0 rgba(255, 255, 255, 0.7);*/
}
p, ul {
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
font-size: 13.6px;
}
/* element specific modifiers */
#header {
position: relative;
width: 100%;
height: 130px;
background: url("../media/sw-bg-header7-alpha-nofadetb-aliasfix-bluefix1.png") transparent no-repeat center top;
}
#header_line {
position: relative;
top: 73px;
width: 100%;
height: 1px;
margin-left: auto;
margin-right: auto;
/*border-bottom: 1px solid #ff2222/*#1188ff;*/
}
#header_links {
position: relative;
top: 43px;
left: 200px;
width: 600px;
margin-left: auto;
margin-right: auto;
/*border: 1px solid red;*/
}
#header_links a {
/*padding: 0px 11px 0px 10px;*/
font-size: 1.0em;
font-family: Helvetica,sans-serif;
letter-spacing: .5px;
text-decoration: none;
color: #999;
text-shadow: 1px 1px 3px #555;
margin: 0px 20px;
}
#header_links a:link {
text-decoration: none;
}
#header_links a:visited {
text-decoration: none;
}
#header_links a:hover {
text-decoration: none;
color: #CFCFCF;/*#afcEcF;*/
border-bottom: 1px dotted #b5b5b5;
}
#header_links a:active {
text-decoration: none;
}
/*TODO add line spacer old file*/
.link_spacer {
/*border-right: 1px solid #afcEcF;*/
position: absolute;
top: 0px;
height: 25px; /*textbox is 23px tall*/
width: 1px;
border-right: 1px solid #666;
margin: 0px 0px;
/*cursor: default;*/
}
#splash_container {
/*border: 1px solid #00ff00;*/
text-align: center; /*for home page*/
/*background: url("../media/jj") no-repeat center top;*/
margin-top: 10px;
}
#splash_image {
border: 1px solid #006ce2;
}
#gallery {
border: 1px solid #006ce2;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#content_container {
/* used to allow elegant access to full screen */
width: 100%;
/*min-height: 500px;*/
}
#content {
/* container for text, incl max width */
margin: 0px 0px 0px 0px;
/*padding: 0px;*/
padding-top: 25px;
/*background-color: #0F2C4F;*/
/*border: 1px solid #FF55FF;*/
width: 952px;
/*min-height: 100px;*/
margin-left: auto;
margin-right: auto;
/*-moz-border-radius: 6px;*/
}
.cbox_headline {
float: left;
width: 100%;
min-height: 75px;
margin: 0px 0px 40px 0px;
padding: 10px 0px 0px 0px;
border-top: 1px solid #0F93FF;
border-bottom: 1px solid #1188ff;
background-color: #0F93FF; /*#1f0800;*/
background-image: -moz-linear-gradient(top, #0F93FF, #001b2f); /* FF3.6 */
color: #afafff;
}
.cbox_headline h1 {
/*font-size: 2.3em;*/
/*font-family: Trebuchet, Tahoma, Arial, sans-serif;*/
color: #BFCAFF;/*#dfdfff;*/
/*font-family:"Myriad Pro",Arial,Helvetica,sans-serif;*/
font-size:36px;
font-weight:normal;
/*margin-bottom:15px; */
}
.cbox_headline p {
position: relative;
top: 20px;
}
.cbox_100 {
/* used for general 100% width content */
clear: both;
min-height: 285px;
/*margin: 10px 10px;*/
padding: 15px 15px 15px 0px;
padding-left: 42px;
border: 1px solid #006ce2;/*#990808;*/
background-color: #101010;/*#171615;/*#001b2f;*/
color: #8F97BF;
}
.cbox_100 a {
text-decoration: none;
color: #AFA857;
border-bottom: 1px dotted #333;
}
.cbox_100 a:link {
text-decoration: none;
}
.cbox_100 a:visited {
text-decoration: none;
}
.cbox_100 a:hover {
text-decoration: none;
color: #FFF79F;
border-bottom: 1px dotted #FFF79F;
}
.cbox_100 a:active {
text-decoration: none;
}
.cbox_100 h2 {
padding-bottom: 2px;
border-bottom: 1px dotted #333;
margin-top: 0px;
margin-bottom: 10px;
}
.cbox_100 .box_round {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.cbox_100 .box_shadow {
-moz-box-shadow: 3px 3px 5px #272525;
-webkit-box-shadow: 3px 3px 5px #272525;
box-shadow: 3px 3px 5px #272525;
}
.cbox_100 p {
margin-left: 20px;
font-size: 13.6px;
font-weight: normal;
/*line-height: 1.5em;/*130%*/
/*border: 1px solid red;*/
}
.cbox_100 ul {
margin-left: 40px;
font-size: 13.6px;
font-weight: normal;
/*line-height: 1.5em;/*130%*/
/*border: 1px solid red;*/
}
.cbox_left {
/* used for notes/content */
float: left;
min-width: 160px;
max-width: 300px;
min-height: 50px;
margin: 15px 15px 15px 0px;
padding: 10px;
border: 1px solid #006ce2;/*#990808;*/
background-color: #1D1E1F;
/*line-height: 1.5em;*/
color: #DFD56F;/*#DFDAA7;*/
}
.cbox_right {
/* used for notes/content */
float: right;
/*min-width: 160px;
max-width: 300px;*/
width: 220px;
min-height: 50px;
margin: 0px 0px 30px 0px;
padding: 10px;
border: 1px solid #006ce2;/*#990808;*/
background-color: #1D1E1F;
/*line-height: 1.5em;*/
/*color: #555;/*#AFA857;/*#DFD56F;/*#DFDAA7;*/
}
.cbox_full {
width: 70%;
min-height: 50px;
margin: 10px 10px;
padding: 10px;
background-color: #1f0000;
}
#footer {
min-height: 110px;
padding: 20px;
text-align: center;
/*border-top: 1px solid #006ce2;/*#FF2222;*/
background: url("../media/sw-bg-footer1-dark1-lineonly1.png") transparent no-repeat center top;
/*border: 1px solid red;*/
color: #181818;
}
#footer_text {
position: relative;
top: 70px;
text-align: center;
}
#footer a {
text-decoration: none;
color: #191914;
border-bottom: 1px dotted #222;
}
#footer a:link {
text-decoration: none;
}
#footer a:visited {
text-decoration: none;
}
#footer a:hover {
text-decoration: none;
color: #5F5D4D;
border-bottom: 1px dotted #5F5D4D;
}
#footer a:active {
text-decoration: none;
}
/* end of element specific modifiers */
.tooltip { position:relative; z-index:24; }
.tooltip span { display:none;}
.tooltip:hover {z-index:25;}
.tooltip:hover span {
display:block;
position:absolute;
width:120px;
top:25px;
left:20px;
background-color:#333333;
border:1px solid #666666;
padding:5px;
font-size:11px;
color:#aaa;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
/* -------------------------------------------------------------- */
/* classes */
.heading_line_dotted {
padding-bottom: 2px;
margin-bottom: 4px;
border-bottom: 1px dotted #333;
}
.heading_line_solid {
padding-bottom: 2px;
margin-bottom: 4px;
border-bottom: 1px solid #666;
}
.box_shadow {
-moz-box-shadow: 0px 0px 30px #002c2f;/*#39809e; */
-webkit-box-shadow: 0px 0px 10px #5f4435;
box-shadow: 0px 0px 10px #5f4435;
}
.box_round {
-moz-border-radius: 6px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.sp_box_shadow {
-moz-box-shadow: 0px 0px 25px #09559F;/*#1188ff; */
-webkit-box-shadow: 0px 0px 10px #5f4435;
box-shadow: 0px 0px 10px #5f4435;
}
.sp_box_round {
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
.bl_yel {
border: 1px solid #444;
border-left: 1px solid #f00;
}
.br_yel {
border: 1px solid #444;
border-right: 1px solid #f00;
}
.bl_red {
border: 1px solid #444;
border-left: 1px solid #DDDF00;
}
/*stupid IE7 display inline-block fix*/
/*BE CAREFUL - any modification WILL f*ck up FF or IE*/
.ie7 #gallery ul li {
display:inline;
}
/* Gallery styles */
#gallery{
margin-left: auto;
margin-right: auto;
/* CSS3 Box Shadow
-moz-box-shadow:0 0 3px #AAAAAA;
-webkit-box-shadow:0 0 3px #AAAAAA;
box-shadow:0 0 3px #AAAAAA;*/
/* CSS3 Rounded Corners
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid white;*/
/*background:url(img/panel.jpg) repeat-x bottom center #050505;*/
/*background-color: #111;*/
/* The width of the gallery */
background-image: -moz-linear-gradient(top, #fff, #000); /* FF3.6 */
width:952px;
overflow:hidden;
}
#slides{
/* This is the slide area */
height:523px;
/* jQuery changes the width later on to the sum of the widths of all the slides. */
width:952px;
overflow:hidden;
}
#gallery .slide{
float:left;
}
#gallery a img{
border:none;
}
#gallery ul{
margin:0px;
padding:0px;
text-align: center;
}
#gallery li{
/* Every thumbnail is a li element */
width:60px; /*90 - 60*/
display:inline-block;
list-style:none;
height:33px; /*68 - 45*/
overflow:hidden;
padding-top:9px; /*makes room for active overlay*/
margin: 0px 4px 9px 4px; /*space thumbs apart, push bottom menu container down */
}
li.inact:hover{
/* The inactive state, highlighted on mouse over */
background:url(../media/pic_bg.png) repeat;
}
#gallery li.act {
/* The active state of the thumb */
background:url(../media/active_bg.png) no-repeat center center;
}
#gallery li.act:hover{
/* The active state of the thumb */
background:url(../media/active_bg.png) no-repeat center center;
}
#gallery li.act a{
cursor:default;
}
#gallery li a{
display:block;
/*background:url(img/divider.png) no-repeat right;*/
height:35px;
}