/* -- Style Reset ----------------------------------------------------------------------------------------------------*/

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

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;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

ol, ul {
	list-style: none;
}

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

:focus {
	outline: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* -- Default Styles -------------------------------------------------------------------------------------------------*/

body
{
    font-size: 1em;
    font-family: Arial, sans-serif;
    color: #888;
    line-height: 1.5em;
}

h1, h2, h3, h4, h5, h6
{
    color: #666666;
    margin-bottom: 0.5em;
}

h1 { font-size: 1.25em; }
h2 { font-size: 1.15em; }
h3 { font-size: 1.05em; }
h4 { font-size: 0.95em; }
h5 { font-size: 0.85em; }
h6 { font-size: 0.75em; }

a, a:visited
{
    color: #777;
}

a:active
{
    color: #333;
}

a:hover
{
    color: #999;
}

/* -- Helpers -------------------------------------------------------------------------------------------------*/

.light-text {
    font-weight: 100;
    letter-spacing: 0.05em;
}

.clear {
    clear: both;
}

/* -- Layout -------------------------------------------------------------------------------------------------*/

html {
	overflow-y: scroll;
}

body
{
    text-align: center;
}

.minimum-margin
{
    padding-left: 50px;
    min-width:984px;
}

.container
{
    position: relative;
    width: 984px;
    margin: 0 auto;
    text-align: left;
}

/* Menu Styles */
#header
{
	min-width:984px;
}

#header-container {
	 background: #fff url('/media/graphics/nav_bg.gif') repeat-x 0px 40px;
}
    #site-logo
    {
        display: block;
        position: relative;
        left: -48px;
        width: 400px;
        height: 90px;
        background: #fff url('/media/graphics/smashingideas_logo.gif') no-repeat 0px 0px;
        text-indent: -9999px;
    }
        #site-logo:hover
        {
            background: #fff url('/media/graphics/smashingideas_logo.gif') no-repeat 0px -95px;
        }
    /*
    #header-link
    {
        display: block;
        position: absolute;
        text-indent: -9999px;
        top: 18px;
        right: 100px;
        width:247px;
        height: 67px;
        background: #fff url('/media/graphics/buy_ipad_btn_states.png') no-repeat 0px 0px;
    }

        #header-link:hover
        {
            background: #fff url('/media/graphics/buy_ipad_btn_states.png') no-repeat 0px -67px;
        }
        */


    #header-link
    {
        text-decoration: none;
        text-align:right;
        display: block;
        position: absolute;
        top: 65px;
        right: 100px;
        height: 20px;
    }

    #header-link:hover
    {
    }
    

    #main-nav
    {
        overflow: hidden;
    }

    #main-nav li
    {
        float: left;
        text-align: center;
		height:48px;
    }

    #main-nav a
    {
        display: block;
        width: 110px;
        padding: 10px 0 20px 0;
        border-left: solid 2px #fff;
        background: #fff url('/media/graphics/nav_bg.gif') repeat-x 0px -50px;
        color: #3a3a3a;
        text-decoration: none;
		font-size: .9em;
    }

    #main-nav li:first-child a
    {
        border-left: none;
    }

    #main-nav a.selected
    {
        background: #fff url('/media/graphics/nav_bg.gif') repeat-x 0px 0px;
    }

    #main-nav a:hover
    {
        background: #fff url('/media/graphics/nav_bg.gif') repeat-x 0px 0px;
    }

    .secondary-nav
    {
        min-height: 42px;
    }

    .home #header .secondary-nav { border-bottom: solid 5px #888; }
    .about #header .secondary-nav { border-bottom: solid 5px #cc0; }
    .services #header .secondary-nav { border-bottom: solid 5px #c60; }
    .work #header .secondary-nav { border-bottom: solid 5px #66f; }
    .contact #header .secondary-nav { border-bottom: solid 5px #960; }

    #secondary-nav
    {
        overflow: hidden;
    }

    #secondary-nav li
    {
        float: left;
        margin-right: 20px;
    }

    #secondary-nav a
    {
        display: block;
        min-width: 50px;
        padding: 10px 5px 5px 5px;
        text-align: center;
        font-size: 0.85em;
        text-decoration: none;
        border-bottom: solid 3px #fff;
		color:#969696;
    }

    .about #secondary-nav a:hover, .about #secondary-nav a.selected { color: #333333; border-bottom: solid 3px #cc0; }
    .services #secondary-nav a:hover, .services #secondary-nav a.selected { color: #333333; border-bottom: solid 3px #c60; }
    .work #secondary-nav a:hover, .work #secondary-nav a.selected { color: #333333; border-bottom: solid 3px #66f; }
    .contact #secondary-nav a:hover, .contact #secondary-nav a.selected { color: #333333; border-bottom: solid 3px #960; }


/* -- Footer Styles -------------------------------------------------------------------------------------------------*/

#footer
{
    margin-top: 40px;
    background: #fff url('/media/graphics/footer_bg.gif') repeat-x top center;
	min-width:984px;
    overflow: hidden;
    clear: both;
}

#footer a {
	text-decoration:none;
}

#footer li
{
    float: left;
    margin: 6px 50px 20px 0px;
    font-size: 0.75em;
	font-weight:bolder;
    color: #777;
}
/*
#footer li:first-child
{
    margin: 6px 50px 20px 0px;
}
*/

/* -- Content Styles -------------------------------------------------------------------------------------------------*/

#marquee
{
    min-height: 285px;
    background-color: #000;
    color: #fff;
}

#marquee *
{
    color: #fff;
}

#marquee a,
#marquee a:hover,
#marquee a:visited,
#marquee a:active {
    color: #f77e00;
	text-decoration:none;
}

#marquee a {
	margin-left:-5px;
    padding: 5px 5px 5px 5px;
    background-color: transparent;
}

#marquee a:hover {
    background-color: #221;
    color: #fff;
}

#marquee-inner > p {
    width: 885px;
    font-size: 0.9em;
    text-align: justify;
}

#content
{
    margin-top: 20px;
    min-height: 370px;
}

.simplecontent .body li
{
    margin-left: 20px;
    list-style: disc;
}

.simplecontent .body p
{
    margin-bottom: 1em;
}


#tert-nav {
	float:left;
	width:180px;
	overflow:hidden;
	margin:0px 0 0 0;
}
#tert-nav li {
	padding: 0 0 5px 0;
	margin:0px 0px 3px 0px;
	/*float: left;*/
}

#tert-nav a {
	text-decoration: none;
}

#tert-nav a:hover {
    color: #fff;
    background-color: #999;
    padding: 2px 3px 2px 3px;
}

#tert-nav .selected {
    color: #fff;
    background-color: #999;
    padding: 2px 3px 2px 3px;
}

#tert-content {
	/*float:right;*/
	width:704px;
	margin-left:190px;
}

/* -- 404 Page -------------------------------------------------------------------------------------------------*/

.page-not-found #marquee {
    padding: 20px 0px 20px 50px;
}

.page-not-found #marquee p {
    margin: 20px 0 0 0;
}

.page-not-found #marquee.error
{
    min-height: 0px;
}

.page-not-found #marquee.error p
{
    width: 450px;
    font-weight: 100;
}

/* -- Home Page -------------------------------------------------------------------------------------------------*/

.home #marquee {
    padding: 20px 0px 20px 50px;
}

.home #marquee p {
    margin: 15px 0 0 0;
	font-size: 1em;
}

.home #social-buttons
{
	float:left;
	overflow:hidden;
	width:885px;
	height:50px;
	margin-top:-10px;
	margin-bottom:-5px;
	margin-left:-10px;
}
.home #social-buttons li
{
	width:50px;
	height:50px;
	float:left;
	/*margin-right:0px;*/
}

/* -- Reels Control -- */

#reels-container {
    width: 984px;
    height: 288px;
    overflow: hidden;
}


#reels {
    position: relative;
    width: 984px;
    height: 285px;
    overflow: hidden;
}

#reels .reel {
	width:885px;
}

#reels ul {
    position: relative;
    width: 9999px;
    overflow: hidden;
}

#reels li {
    position: relative;
    float: left;
    margin-right: 200px;
}

#reels .text {
    position: absolute;
    right: 0px;
    bottom: 20px;
}

#reels .text p {
    float: right;
    clear: both;

    background-color:#fff;
    padding: 4px 20px 4px 10px;
    margin: 0px;

    -webkit-box-shadow:3px 3px 4px #000;
    -moz-box-shadow:3px 3px 4px #000;
    box-shadow:3px 3px 4px #000;
}

#reels .text p.client {
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
}

#reels .text p.project {
    font-size: 1.15em;
    font-weight: bold;
    color: #999;
}

#reels-nav {
    position: absolute;
    right: 0px;
    bottom: 0px;
	text-align: left;
	width:80px;
}

#reels-nav a {
    display: block;
    width: 20px;
    padding: 4px 10px;
    background-color: #000;
    color: #f77300;

}

#reels-nav a:hover {
    background-color: #221;
    color: #fff;
}

/* -- Page Content -- */

.home #body {
    margin-top: 20px;
    overflow: hidden;
}

.home #body-copy {
    float: left;
    width: 285px;
}

.home #body-copy h1 {
    font-size: 1.5em;
    font-weight: 200;
}

.home #body-copy p {
    font-size: 0.9em;
}

.home #promos {
    float: right;
    width: 660px;
}

.home #promos ul
{
	float:left;
}

.home #promos li {
    display: none;
    width: 170px;
    margin: 0 25px 10px 0px;
}

.home #promos li img {
    border: solid 1px #888;
}

.home #promos li h3 {
    font-weight: 400;
    font-size: 1.15em;
}

.home #promos .body {
	min-height:45px;
}

.home #promos p {
    font-weight: 200;
    font-size: 0.75em;
    line-height: 1.25em;
    margin: 10px 0;
}

.home #promos a,
.home #promos a:visited {
    color: #f77e00;
	text-decoration:none;
}

.home #promos a:hover,
.home #promos a:active {
    color: #000;
}

/* -- About Page -------------------------------------------------------------------------------------------------*/

.about #marquee {
    height: 250px;
    min-height: 250px;
}

.about-careers #body,
.about-careers .listing
{
    margin-bottom: 100px;
}

.about #body h1 {
    margin: 0px 0 20px;
    font-weight: 100;
    font-size: 1.75em;
    color: #333;
}

.about #members h1,
.about .listing h1
{
    margin: 20px 0px 10px 0px;
    font-weight: 100;
    font-size: 1.75em;
    color: #333;
}

.about #members h3
{
    margin-top: -5px;
}

.about .listing h3
{
    margin-top: -5px;
    font-weight: 300;
    font-size: 1.24em;
}

.about #body p,
.about #body ul,
.about #members p,
.about #members ul,
.about .listing p,
.about .listing ul
{
    width: 750px;
    margin-bottom: 10px;
    font-size: 0.9em;
}

.about #body p:first-child,
.about .listing p:first-child
{
    font-weight: 200;
    font-size: 1.15em;
}


.about-careers .listing .back
{
   text-decoration:none;
}

.about #client_list {
    -moz-column-count: 2;
    /*-webkit-column-count: 2; */
}

.about #client_list p.client {
    font-size: 1.25em;
    font-weight: 200;
    margin-bottom: 5px;
}

.about-careers #listings-nav a
{
    text-decoration: underline;
}

/* -- Services Page -------------------------------------------------------------------------------------------------*/

.services #marquee {
    height: 285px;
    padding: 0 0 0 50px;
    overflow: hidden;
}


.services #body h1 {
    margin: 20px 0;
    font-weight: 100;
    font-size: 1.75em;
    color: #333;
}

.services #body p,
.services #body ul
{
    width: 850px;
    margin-bottom: 10px;
}

/* -- Work Page -------------------------------------------------------------------------------------------------*/

.work #body h1 {
    margin: 20px 0;
    font-weight: 100;
    font-size: 1.75em;
    color: #333;
}

.work #body p,
.work #body ul
{
    width: 750px;
    margin-bottom: 10px;
}

.work #marquee-inner {
    height: 310px;
	width: 984px;
    overflow: hidden;
	position:relative;
	left:0px;
	z-index:10;
}

	.work #scrollbuttons a {
		text-indent: -9999px;
		width:16px;
		height:30px;
		overflow:hidden;
		position:absolute;
		background: transparent;
		margin:0;
		padding:0;
	}

	.work #scrollbuttons a:hover {
		background: transparent;
		margin:0;
		padding:0;
	}


	.work #scrollbuttons a.backButton {
		background: transparent url('/media/graphics/arrow_left.png') no-repeat 0px 0px;
		top:120px;
		left:-40px;
		z-index:30;
	}
	.work #scrollbuttons a.nextButton {
		background: transparent url('/media/graphics/arrow_right.png') no-repeat -20px 0px;
		top:120px;
		left:850px;
		z-index:31;
		margin:0px;
		padding:0px;
	}

	.work #scrollbuttons a:hover.backButton {
		background: transparent url('/media/graphics/arrow_left.png') no-repeat -20px 0px;
	}

	.work #scrollbuttons a:hover.nextButton {
		background: transparent url('/media/graphics/arrow_right.png') no-repeat -0px 0px;

	}

.work #project-list {
    position: absolute;
    width: 850px;

    margin: 0 0 20px 0;
    padding: 20px 0 0 0;
    overflow: hidden;
}

.work #project-list a.image-link, .work #project-list a.image-link:hover {
    background: transparent;
	margin:0;
    padding: 0;
}

.work #project-list ul {
    position: relative;
    width: 9999px;
    overflow: hidden;
}

.work #project-list li {
    position: relative;
    float: left;
    width: 250px;
	height: 285px;
    margin-right: 40px;

    font-size: 0.9em;
    line-height: 1.15em;
}

.work #project-list li p {
    margin: 10px 0 0 0;
}

.work #project-list li .name {
    font-size: 1.125em;
}

.work #project-list li .body {
    font-size: 0.8em;
    line-height: 1.2em;
    color: #ccc;
	min-height: 45px;
}

.work #project-list li .client {
    color: #999;
}

.work #project-detail  {
    position:absolute;
    overflow: hidden;
	padding: 20px 0 0 0px;
}

.work #project-detail .project {
    width: 850px;
    overflow: hidden;
	/*position:relative;*/
}

.work #project-detail .images {
    float: left;
    width: 470px;
	/*height: 280px;*/
    overflow: hidden;
	/*background-color:#00FF00;*/
	margin:0px 30px 20px 0px;
	/*position:absolute;*/
}

.work #project-detail .images ul {
    overflow: hidden;
}

.work #project-detail .images .image-list {
    width: 9999px;
}

.work #project-detail .images li {
	margin-bottom:10px;
    float: left;
}

	/*.work #project-detail .links-container {
		width:470px;
		overflow:hidden;
		background-color:#FF0000;
		text-align:center;
	}*/

	.work #project-detail .links {
		float:right;
		text-align:center;
		/*width:470px;*/
	}

	.work #project-detail .links li a {
		background-color:#484848;
		width:45px;
		height:25px;
		float:left;
		margin-left:15px;
		padding: 0 0 0 0;
		cursor:pointer;
	}

	.work #project-detail .links li a:hover {
		background-color:#646464;
	}

	.work #project-detail .links li a.selected {
		background-color:#646464;
		cursor:auto;
		color:#CCCCCC;
	}
	/*
	.work #project-detail .links li.selected a {

		color:#CCCCCC;
	}*/

	.work #project-detail .back {
		position:absolute;
		top: 265px;
		left: 5px;
	}


.work #project-detail p {
    margin: 0 0 5px 0;
}

.work #project-detail .text {
    float: left;
    width: 300px;
}

.work #project-detail a {
    font-size: 0.9em;
}

.work #project-detail .name {
    font-size: 1.25em;
    margin-bottom: 0px;
}

.work #project-detail .body {
    font-size: 0.8em;
    line-height: 1.2em;
    color: #ccc;
}

.work #project-detail .client {
    font-size: 0.9em;
    color: #999;
}

.work #project-detail .property {
    font-size: 1.125em;
    color: #999;
}

.work-e-publishing #body .simplecontent
{
    float: left;
    width: 550px;
}

.work-e-publishing #body p,
.work-e-publishing #body li
{
    width: 100%;
    margin-bottom: 20px;
}

.work-e-publishing #body ul#ebooks
{
    float: right;
    width: 350px;
    margin-top: 65px;
}

/* -- Contact Page -------------------------------------------------------------------------------------------------*/

.contact #body h1 {
    margin: 20px 0;
    font-weight: 100;
    font-size: 1.75em;
    color: #333;
}

.contact-address #body h1 {
    margin: 20px 0 5px 0;
}
.contact #body p,
.contact #body ul
{
    width: 750px;
    margin-bottom: 10px;
}

.contact-locations #marquee {
    overflow: hidden;
}

.contact-locations #marquee-inner {
    height: 370px;
    margin-top: 20px;
    overflow: hidden;
}

.contact-locations #body
{
    overflow: hidden;
}

.contact-locations #body .location
{
    float: left;
    width: 300px;
}

.contact-locations #body a
{
    text-decoration:none;
}

.contact-locations #body .location a:hover, .contact-locations #body .location .selected
{
    color: #fff;
    background-color: #999;
    padding: 0 10px 0 10px;
}

/* -- Styles Page ----------------------------------------------------------------------------------------------------*/
/* These should become default styles, but for now will act as a model                                                */

.styles .content h1
{
    margin: 0.5em 0 0.25em 0;
    font-weight: 100;
    font-size: 2em;
    color: #333;
}

.styles .content h2
{
    margin: 0.5em 0 0.25em 0;
    font-weight: 100;
    font-size: 1.5em;
    color: #333;
}

.styles .content h3
{
    margin: 0.5em 0 0.25em 0;
    font-weight: 300;
    font-size: 1.25em;
}

.styles #tert-nav a,
.styles .content p,
.styles .content li
{
    font-weight: 300;
    font-size: 0.95em;
    line-height: 1.5em;
    color: #555;
}

.styles .content p
{
    margin: .5em 0;
}

.styles .content li
{
    margin: .25em 1em;
    list-style: disc outside none;
}

.styles .content .long-list
{
    -moz-column-count: 3;
    -webkit-column-count: 3;
}

.styles .content .long-list p
{
    margin: .25em 0;
}