/*=============================
We Are Boxhead Styles
===============================

1. RESET
2. LAYOUT
3. TYPOGRAPHY
4. AMENDMENT STYLES

===============================*/

/*=============================
1. RESET STYLES
===============================*/

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,
b, u, i, center,
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;
vertical-align: baseline;
background: transparent;
}

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}


/* remember to define focus styles! */
:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }

del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

hr {
margin: 0;
padding: 0;
}

/*=============================
2. LAYOUT STYLES
===============================
*/

body { background: #f2f2f1; }

p, h2, h3, h4 { margin: 0 0 15px 0; }

h3 {
width: auto;
float:left;
}

#wrapper {
width: 100%;
float:left;
position: relative;
margin: 30px 0 30px 30px;
display: none;
}

#mini_entry_container {
position: relative;
float:left;
width: 100%;
margin: 20px 0 0 0;
}

#mini_entry_container_filtered {
position: relative;
float:left;
width: 100%;
margin: 20px 0 0 0;
}

.portfolio_mini_entry, .portfolio_mini_entry_moved, .portfolio_entry {
width: 220px;
background: #ccc;
position: absolute;
}

.portfolio_mini_entry_inner {
float:left;
width: auto;
}

.portfolio_entry { background: transparent; }

.mini_post_back_image {
position: relative;
width: 220px;
min-height: 140px;
float:left;
}

.mini_post_back_image img {float:left;}

.mini_post_back_image .portfolio_mini_entry_inner {
position: absolute;
top: 0;
left: 0;
}

.mini_post_back_image object {
width: 100%;
float:left;
}

.portfolio_mini_entry_inner {
width: 200px;
margin: 10px 10px 25px 10px;
float:left;
}

.mini_entry_symbol {
width: auto;
float:left;
margin: 5px 15px 0px 15px;
}

.mini_entry_summary, .mini_entry_summary p {float:left;}

ul#nav_categories, ul#secondary_nav {
float: left;
width: 100%;
margin: 0 0 10px 0;
}

ul#secondary_nav { display: none; }

ul#nav_categories li, ul#secondary_nav li {
float:left;
margin: 0 5px 0 0;
}

#breadcrumbs {
float:left;
width: 100%;
}

#single_entry_container {
width: 940px;
float: left;
margin: 20px 0 0 0;
}

#slider[style], #slider {
width: 700px !important;
height: 500px !important;
float:left !important;
margin: 0 0 20px 0;
position: relative !important;
overflow:hidden !important;
}

.slider_panel[style], .slider_panel {
width: 700px !important;
height: 500px !important;
position: absolute !important;
}

.slider_panel.symbolPanel[style], .slider_panel.symbolPanel {
background: #ffffff !important;
}

img.port_symbol {
width: 360px !important;
position: absolute !important;
left: 170px;
top: 120px;
}

img.port_online {
width: 640px !important;
position: absolute !important;
left: 30px;
top: 80px;
}

.portfolio_entry_description {
background: transparent;
position: relative;
float:left;
width: 220px;
margin: 0 0 0 20px;
}

#sliderNav {
width: 220px;
}

#sliderNav a {
display: block;
float:left;
width: 14px;
height: 18px;
padding: 3px 0 0 7px;
text-decoration: none;
font-weight: bold;
color: #222;
margin: 0 2px 0 0;
}

#sliderNav a.activeSlide {
background: url(http://www.weareboxhead.com/images/slideNavGrey.png);
}

#vid_container {
float: left;
height: 374px;
width: 700px;
overflow: hidden;
}

#footer {
width: 900px;
float:left;
}

.threecols > div  { width: 680px; }

.threecols > div > div { width: 650px; }

.twocols .portfolio_mini_entry_inner  { width: 440px; }

.twocols .portfolio_mini_entry_inner .mini_entry_symbol, .twocols .portfolio_mini_entry_inner .mini_entry_summary { width: 410px; }


/*=============================
3. TYPOGRAPHY STYLES
===============================*/

body, p {
font-family: 'helvetica neue', helvetica, arial, verdana;
font-size: 12px;
line-height: 15px;
color: #222;
}

h1 {
font-size: 24px;
line-height: 24px;
}

h2 {
font-size: 18px;
line-height: 21px;
}

h3 {
font-size: 12px;
line-height: 15px;
color: #222;
}

h3 span { color: #555; }

#breadcrumbs p { color: #888; }

#breadcrumbs p span { color: #222; }

ul#nav_categories li a, ul#nav_categories li a:visited, #breadcrumbs a, #breadcrumbs a:visited {
color: #888;
text-decoration: none;
}

ul#secondary_nav a, ul#secondary_nav li a:visited {
color: #bbb;
text-decoration: none;
}

ul#nav_categories li a#contactLink, ul#nav_categories li a#contactLink:visited { color: #555; }

ul#nav_categories li a:hover, ul#nav_categories li a.active, ul#nav_categories li a#contactLink:hover, ul#nav_categories li a#contactLink.active { color: #222; }

ul#secondary_nav li a:hover, ul#secondary_nav li a.active { color: #444; }

ul#nav_categories li h1 { color: #646464; }

.portfolio_mini_entry_inner a, .portfolio_mini_entry_inner a:visited, .portfolio_mini_entry_inner a:hover {
color: #222;
text-decoration: none;
}

.white_text p, .white_text h3, .white_text h3 span { color: #fff; }

.white_text h3 a, .white_text h3 a:visited, .white_text h3 a:hover, h3 a, h3 a:visited, h3 a:hover {
color: #fff;
text-decoration: none;
}

.portfolio_entry_description a {
color: #333;
}

.portfolio_entry_description a:visited {
color: #999;
}

.portfolio_entry_description a:hover {
color: #000;
}

h3 a, h3 a:visited, h3 a:hover, #breadcrumbs a:hover { color: #222; }


/*=============================
4. AMENDMENT STYLES
===============================*/

.no_margin {  margin: 0; }

.greyBack { background: #ccc; }