/*------------------------------------------------------------------
BASE - TABLE OF CONTENTS
.................
1. GENERAL
   1.1 RESETS AND DEFAULTS
   1.2 LINKS
   1.3 HEADERS
   1.4 IMAGES
2. LAYOUT
   2.1 SKELETON LAYOUT
   2.2 CONTENT AREA LAYOUT
3. HEADER
   3.1 LOGIN STATUS
   3.2 SITE SEARCH
4. STRIP
   4.1 BREADCRUMBS
   4.2 USER NAV & LEGALS 
5. NAVIGATION
6. EXTRAS
   6.1 RSS
   6.2 CLOUD
   6.3 WORK COMMENTS
   6.4 SIGN UP NEWSLETTER
7. SHOPPING BASKET
8. FOOTER
   8.1 BOOKMARKS
9. TRANSLUCENT MASK
10. CLEARFIX

------------------------------------------------------------------*/

/*------------------------------------------------------------------
COLOR MANAGEMENT
.................
1. GENERIC SCHEME (BLUE)
   LIGHTEST     	: #F4FBFE
   LIGHTER    	: #9ccedd
   LIGHT		: #e1f5ff
   DARKER      :    #2ea5c8
   DARKEST     :    #22333b
2. FINDS SCHEME (GREEN)
   LIGHTEST    :    #b8e1af
   DARKER      :    #7eab4a
   DARKEST     :    #1b2e04
------------------------------------------------------------------*/


/*------------------------------------------------------------------
1. GENERAL
------------------------------------------------------------------*/

/*------------------------------------------------------------------
1.1 RESETS AND DEFAULTS
------------------------------------------------------------------*/
*
{
 margin             : 0;
 padding            : 0;
}

html,
body,
div#wrapper
{
 height             : 100%;
}

body
{
 font-family        : Arial, Verdana, Helvetica, sans-serif;
 font-size          : 62.5%;
 line-height        : 1.3;
 text-align         : center;
}

p,
ul,
ol,
dl,
cite,
.spotlight,
img.main,
div#split_small img
{
 margin-bottom      : 1em;
}

cite
{
 font-style         : normal;
}

li
{
 list-style-type    : none;
}

q
{
 display            : block;
 quotes             : '"' '"' "'" "'";
}

cite
{
 display            : block;
}

fieldset
{
 border             : 0;
}

dt
{
 float              : left;
 font-weight        : 700;
 margin-right       : 3px;
}

.replaced
{
 display            : block;
 overflow           : hidden;
 text-indent        : -5000px;
}

span.replaced
{
 height             : 1px;
 width              : 1px;
}

ul#access
{
 height             : 0;
 left               : 0;
 overflow           : hidden;
 position           : absolute;
 top                : 0;
 width              : 0;
}

div.bg
{
 background         : url(../img/base/bg_nav.gif) repeat-y top left;
 margin-bottom      : 1em;
 padding            : 2px;
}

div.transparent
{
 background			: transparent;
}

.module
{
 background         : url(../img/base/dottedline.gif) repeat-x bottom left;
 clear              : both;
 margin-bottom      : 1.5em;
 padding-bottom     : 1em;
}

p.right
{
 text-align         : right;
}

ul.bullet li
{
 background-image   : url(../img/base/blue_bullet.gif);
 background-repeat  : no-repeat;
 background-position: 0 5px;
 padding-left       : 10px;
}

div#wrapper .image_absent h2,
div#wrapper .image_absent h3,
div#wrapper .image_absent h4,
div#wrapper .image_absent h5,
div#wrapper .image_absent p,
div#wrapper .image_absent ul,
div#wrapper .image_absent ol
{
 clear              : none;
 float              : none;
 width              : auto;
}

div#wrapper li.first
{
 padding-left       : 0;
}

div#wrapper li.last
{
 background         : none;
 padding-right      : 0;
}

div#subwrapper li.first
{
 padding-left       : 0;
}

div#subwrapper li.last
{
 background         : none;
 padding-right      : 0;
}

/*------------------------------------------------------------------
1.2 LINKS
------------------------------------------------------------------*/
div#wrapper a,
div#xhr_content a
{
 color              : #000;
 cursor             : pointer;
 text-decoration    : underline;
}

div#wrapper a:hover,
div#xhr_content a:hover
{
 color              : #2ea5c8;
}

div#wrapper a.key
{
 background         : #2ea5c8 url(../img/base/screen_printing_dark.jpg);
 color              : #fff;
 font-weight        : 700;
 padding            : 0 2px;
 text-decoration    : none;
}

div#wrapper a.key:hover
{
 color              : #fff;
}

div#wrapper h2 a,
div#wrapper h3 a,
div#wrapper h4 a,
div#wrapper h5 a
{
 color              : #2ea5c8;
 text-decoration    : none;
}

a.download
{
 line-height        : 20px;
 padding-right      : 20px;
 /*
 target-new         : tab;
 target-position    : above;
 */
}


a.pdf
{
 background         : url(../img/bookmarks/icon_pdf.gif) no-repeat bottom right;
}

a.podcast
{
 background         : url(../img/bookmarks/icon_podcast.gif) no-repeat bottom right;
}

a.rss
{
 background         : url(../img/bookmarks/icon_rss.gif) no-repeat bottom left;
}

/*------------------------------------------------------------------
1.3 HEADERS
------------------------------------------------------------------*/
h2,
h3,
h4,
h5,
div#sendpage_form legend
{
 color              : #2ea5c8;
 font-weight        : 400;
}

h2,
div#sendpage_form legend
{
 font-size          : 2em;
 line-height        : 1.2;
 margin             : -5px 0 0.4em 0;
}

h3
{
 font-size          : 1.4em;
}

h4
{
 font-size          : 1.3em;
}

h5
{
 font-size          : 1.2em;
}

h2 em,
h3 em,
h4 em,
h5 em
{
 color              : #22333b;
 display            : block;
 font-size          : 0.9em;
 font-style         : normal;
}

div#wrapper h2 em a,
div#wrapper h3 em a,
div#wrapper h4 em a,
div#wrapper h5 em a
{
 color              : #22333b;
}

h5 em
{
 color				: #999;
}


#extras h2 em,
#extras h3 em,
#extras h4 em,
.spotlight h2 em,
.spotlight h3 em,
.spotlight h4 em,
#listing h2 em,
#listing h3 em,
#listing h4 em
{
 font-size          : 1em;
}

.title_inline h3 a em
{
 display			: inline;
}

.title_inline h3 a span.replaced
{
 display			: inline;
}

#extras .module h3 
{
 margin-bottom      : 1em;
}

/*------------------------------------------------------------------
1.4 IMAGES
------------------------------------------------------------------*/
img
{
 border             : 1px solid #999999;
 display            : block;
}

p img
{
 float              : left;
 margin-right       : 10px;
}

img.main
{
 width              : 280px;
}

img.underlined
{
 border             : 0;
 border-bottom      : 1px dashed #9ccedd;
}

.spotlight img,
div#listing img,
img.thumbnail
{
/*  height             : 105px;   Height of the images in the modules */
 width              : 70px;
}

div.split_small img
{
 margin-bottom      : 1em;
 width              : 130px;
}

.spotlight img
{
 float              : left;
}

div#extras img
{
 float              : left;
 width              : 55px;
}

#offer-box 
{ 
  float             : right; 
  width             : 140px; 
  position          : relative; 
  bottom            : 1em
}

img.offer 
{
 border             : none;
 float              : left;
}

h2.over_img
{
 color				: #2ea5c8;
 font-size			: 2.2em;
 background-color	: transparent;
 z-index			: 100;
 margin				: 0;
 margin-right       : 10px;
}

h2.over_img a
{
 display			: block;
}

h2.over_img em
{
 font-size			: 0.9em;
 display			: block;
 color				: #22333B;
 font-style			: normal;
}

div.translucent
{
 background-color	: #FFFFFF;
 filter				: alpha(opacity=70);
 opacity			: 0.70;
 width				: 100%;
 padding			: 0 10px;
}

div.translucent_wrap
{
 position			: relative;
 width				: 280px;
}

div.promobox
{
 height				: 218px;
}

div.overlaid
{
 position			: absolute;
 bottom				: 1px;
}

/*------------------------------------------------------------------
2. LAYOUT
------------------------------------------------------------------*/

/*------------------------------------------------------------------
2.1 SKELETON LAYOUT
------------------------------------------------------------------*/
div#wrapper
{
 font-size          : 1.2em;
 text-align         : left;
}

div#top_wrapper
{
 min-height         : 100%;
}

div#top_wrapper_content
{
 padding-bottom     : 70px;
}

div.border
{
 background-color   : #404040;
 height             : 0px;
}

.subwrapper
{
 margin             : 0 auto;
 width              : 960px;
}

div#header,
div#strip,
div#main_body,
div#footer
{
 clear              : both;
}

div#header
{
 padding            : 1em 0;
 position           : relative;
}

div#footer
{
 height             : 50px;
 margin-top         : -50px;
}

/*------------------------------------------------------------------
2.2 CONTENT AREA LAYOUT
------------------------------------------------------------------*/
div#content,
div#extras,
div#navigation
{
 float              : left;
 min-height         : 10px;
}

div#extras,
div#navigation
{
 width              : 170px;
}

div#strip
{
 margin-bottom      : 0.8em;
 position           : relative;
}

div#content
{
 margin-left        : 170px;
 padding            : 0 20px;
 width              : 580px;
}

div#navigation
{
 margin-left        : -960px;
}

div.split
{
 width              : 280px;
}

div.split_large
{
 width              : 430px;
}

div.split_small
{
 width              :130px;
}

div.primary_display
{
 float              : left;
}

div.secondary_display
{
 float              : right;
}


/*------------------------------------------------------------------
3. HEADER
------------------------------------------------------------------*/
h1
{
 float              : left;
 width              : 41px;
}

h1 a
{
 background         : url(../img/base/h1_faber_logo.gif) no-repeat top left;
 height             : 75px;
 width              : 62px;
}

/*------------------------------------------------------------------
3.1 LOGIN STATUS
------------------------------------------------------------------*/
dl#login_status
{
 clear              : right;
 color              : #666;
 float              : right;
 margin-bottom      : 0;
 text-align         : right;
 width              : 350px;
}

dl#login_status dt
{
 float              : none;
}

dl#login_status *
{
 display            : inline;
}

dl#login_status dd
{
 color              : #999;
}

/*------------------------------------------------------------------
3.2 SITE SEARCH
------------------------------------------------------------------*/
form#site_search
{
 color              : #999;
 float              : right;
 margin-top         : -1em;
 font-size			: 0.9em;
}

form#site_search *
{
 vertical-align     : middle;
}

form#site_search legend
{
 display            : none;
}

form#site_search label
{
 margin-right       : 2px;
}

form#site_search input.text
{
 background         : #fff;
 border             : 1px solid #9ccedd;
 color              : #2ea5c8;
 font-size          : 0.9em;
 padding            : 3px 0;
}
form#site_search input.submit
{
 margin				: 0px;
}

form#site_search a
{
 color              : #999;
 display            : block;
 text-align         : right;
}


/*------------------------------------------------------------------
4. STRIP
------------------------------------------------------------------*/

/*------------------------------------------------------------------
4.1 BREADCRUMBS
------------------------------------------------------------------*/
ul#breadcrumbs
{
 bottom             : 0;
 margin-bottom      : 0;
 position           : absolute;
 width              : 600px;
 font-size			: 0.9em;
}

ul#breadcrumbs li
{
 background         : url(../img/base/arrow_divide.gif) no-repeat center right;
 display            : inline;
 padding            : 0 12px 0 5px;
}

ul#breadcrumbs a
{
 color              : #999;
}

/*------------------------------------------------------------------
4.2 USER NAV, LEGALS & THISPAGE
------------------------------------------------------------------*/
ul#user_nav
{
 clear              : right;
 float              : right;
 margin-bottom      : 0;
 text-align         : right;
 width              : 350px;
}

ul#user_nav li,
ul#legals li,
ul#thispage li
{
 background         : url(../img/base/pipe_divide.gif) no-repeat center right;
 display            : inline;
 padding            : 0 7px 0 6px;
 font-size			: 0.9em;
}


ul#user_nav a,
ul#legals a,
ul#legals li,
ul#thispage a,
ul#bookmarks li
{
 color              : #999;
}

ul#legals li em
{
 color              : #999;
 font-style			: normal;
}

ul#bookmarks li
{
 font-size			: 0.9em;
}

span.login_status_holder
{
 height             : 1.2em;
 width              : 1em;
 display            : block;
}

/*------------------------------------------------------------------
4.3 BLOG POST
------------------------------------------------------------------*/


.spotlight ul li
{
 margin-bottom		: 5px;
}


ul.extra_information li
{
 color				: #999;
 font-size			: 0.8em;
 margin-bottom		: 0px;
}


/*------------------------------------------------------------------
5. NAVIGATION
------------------------------------------------------------------*/

div#navigation dl
{
 background         : #9ccedd url(../img/base/screen_printing_light.jpg) repeat-y 0 0;
 margin-bottom      : 0;
 width              : 166px;
}

div#navigation dl dt
{
 border-bottom      : 1px dashed #fff;
 float              : none;
 font-weight        : 400;
 margin-right       : 0;
}

div#navigation dl dt a
{
 display            : block;
 padding            : 4px 10px;
 text-decoration	: none;
}

div#navigation dl dt.toggle
{
 cursor             : pointer;
}

div#navigation dl dt.toggle_style
{
 font-weight		: bold;
}

div#navigation dl dd ul
{
 background         : #2ea5c8 url(../img/base/screen_printing_dark.jpg) repeat-y 0 0;
 margin-bottom      : 0;
}

div#navigation dl dd ul li
{
 border-bottom      : 1px dashed #fff;
}

div#navigation dl dd ul li a
{
 display            : block;
 padding            : 4px 10px 4px 20px;
 text-decoration	: none;
}

div#wrapper div#navigation a:hover
{
 color              : #000;
}



/*------------------------------------------------------------------
6. EXTRAS
------------------------------------------------------------------*/
div#extras
{
 font-size          : 1em;
}

div#extras h4,
div#extras h5,
div#extras p
{
 margin-bottom      : 0.5em;
}
div#extras h4{
 padding			: 0 0 10px 0;
}

div#extras em
{
 font-style         : normal;
}

div#extras li
{
 margin-bottom      : 1em;
}

div#extras ul.compact li
{
 margin-bottom      : 0em;
}

div#extras li li
{
 margin-bottom      : 0;
}

div#extras ul h4,
div#extras ul h5,
div#extras ul p,
div#extras ul ul
{
 clear              : right;
 float              : right;
 width              : 105px;
}

ul.recommends li p em
{
 color				: #999;
}
ul.recommends li a img
{
 margin-top			: 5px;
}

/*------------------------------------------------------------------
6.1  RSS
------------------------------------------------------------------*/

div.rss
{
 padding			: 10px;
 font-size			: 1.1em;
}

div.rss ul li
{
 font-size			: 0.8em;
 padding			: 4px 0;
 margin-bottom		: 0em;
}

.podcast-social p {
 display: inline-block;
 padding-left:21px;
 padding-right: 20px;
 background-repeat: no-repeat;
 background-position: left; 
}

.podcast-social p.rss {
 background-image: url(../img/base/rss-icon.png);
}

.podcast-social p.itunes {
 background-image: url(../img/base/itunes.png);
}

.podcast-social p.soundcloud {
 background-image: url(../img/base/soundcloud.png);
}

/*------------------------------------------------------------------
6.2 CLOUD
------------------------------------------------------------------*/

div#extras div.cloud,
div#content div.cloud
{
 text-align			: justify;
}
div#extras div.cloud a,
div#content div.cloud a
{
 text-decoration	: none;
 color				: #C5C5C5;
}
div#extras div.cloud a:hover,
div#content div.cloud a:hover
{
 color              :#2EA5C8;
}

div#extras div.cloud .m,
div#content div.cloud .m
{
 color				: #22333B;
}
div#extras div.cloud .l,
div#content div.cloud .l
{
 color				: #22333B;
 font-size			: 1.2em;
}
div#extras div.cloud .xl,
div#content div.cloud .xl
{
 color				: #22333B;
 font-size			: 1.4em;
 word-spacing       : -0.1em;
 margin             : 0 -1px;
}
div#extras div.cloud .xxl,
div#content div.cloud .xxl
{
 color				: #22333B;
 font-size			: 1.6em;
 font-weight		: 700; 
 word-spacing       : -0.2em;
 margin             : 0 -2px;
}

/*------------------------------------------------------------------
6.3 WORK COMMENTS
------------------------------------------------------------------*/

div#work-comments h3,
div#work-comments-split h3
{
 margin             : 1em 0;
}

div#extras div#work-comments span,
div#content div#work-comments span,
div#content div#work-comments-split span
{
 display            : block;
}

div#extras div#work-comments span.date,
div#content div#work-comments span.date,
div#content div#work-comments-split span.date
{
 font-size          : 0.8em;
 margin-bottom      : 0.5em;
}

div#extras div#work-comments span.user,
div#content div#work-comments span.user,
div#content div#work-comments-split span.user
{
 display            : block;
 color              : #2EA5C8;
}

div#extras div#work-comments p,
div#content div#work-comments p,
div#content div#work-comments-split p
{
 float              : none;
 width              : auto;
}

div#work-comments textarea#id_comment,
div#work-comments-split textarea#id_comment
{
 width              : 560px;
 height             : 150px;
 display            : block;
}

/*------------------------------------------------------------------
6.4 SIGN UP NEWSLETTERS
------------------------------------------------------------------*/

div#signup_newsletter
{
 background         : #FFFFFF url(../img/base/signup.jpg) bottom left repeat-x;
 width              : 170px;
 text-align         : center;
 margin-bottom      : 1.5em;
}

div#signup_newsletter span
{
 display            : block;
 width              : 170px;
 height             : 20px;
 background         : #FFFFFF url(../img/base/signup.jpg) top left repeat-x;
}

div#signup_newsletter a:hover
{
 color               : #FFFFFF;
 text-decoration     : underline;
}

div#signup_newsletter a
{
 text-decoration    : none;
 color              : #FFFFFF;
}

div#signup_newsletter p
{
 padding            : 0 0 25px 0;
}

div#signup_newsletter p em
{
 font-size          : 1.5em;
 display            : block;
 margin-bottom      : 0.5em;
}

#newsletter_form h5 {
    margin-top: 30px;
    margin-bottom: 10px;
}
form#newsletter_form {
    margin-bottom: 20px;
}


/*------------------------------------------------------------------
6.5 SPECIAL OFFERS
------------------------------------------------------------------*/

ul.special_offers 
{
 background         : transparent url(../img/base/dottedline.gif) repeat-x top left;
 padding-top        : 1em;
 margin-bottom      : 1.5em;
}

/*------------------------------------------------------------------
7. SHOPPING BASKET
------------------------------------------------------------------*/
div#extras h4#basket_header
{
 background         : #2ea5c8 url(../img/base/screen_printing_dark.jpg) repeat-y 0 0;
 color              : #000;
 font-size          : 1.1em;
 font-weight        : 700;
 margin-bottom      : 0;
 padding            : 6px 10px;
}

div#extras ul#basket
{
 background         : #9ccedd url(../img/base/screen_printing_light.jpg) repeat-y 0 0;
 border-top         : 1px dashed #fff;
 font-size          : 0.9em;
 margin-bottom      : 1.5em;
}

div#extras ul#basket li
{
 margin-bottom      : 0;
 padding            : 6px 10px;
}

div#extras ul#basket li.empty
{
 font-size			: 1.2em;
 background         : #FFFFFF url(../img/base/dottedline.gif) repeat-x left bottom;
 font-weight		: 900;
 color				: #2ea5c8;
 padding-bottom     : 1em;
}

div#extras ul#basket li.price
{
 background         : #2ea5c8 url(../img/base/screen_printing_dark.jpg) repeat-y 0 0;
 border-top         : 1px dashed #fff;
}

div#wrapper ul#basket a
{
 color              : #000;
 display            : block;
}

div#wrapper ul#basket a:hover
{
 color              : #000;
}


/*------------------------------------------------------------------
8. FOOTER
------------------------------------------------------------------*/
ul#legals
{
 float              : left;
}

/*------------------------------------------------------------------
8.1 BOOKMARKS
------------------------------------------------------------------*/
ul#bookmarks
{
 float              : right
}

ul#bookmarks li
{
 float              : left;
 padding-left       : 6px;
}

ul#bookmarks a
{
 height             : 17px;
 width              : 17px;
}

ul#bookmarks a:hover
{
 background-position: 17px 0;
}

a.delicious
{
 background-image   : url(../img/bookmarks/sprite_delicious.gif);
}

a.digg
{
 background-image   : url(../img/bookmarks/sprite_digg.gif);
}

a.facebook
{
 background-image   : url(../img/bookmarks/sprite_facebook.gif);
}

a.reddit
{
 background-image   : url(../img/bookmarks/sprite_reddit.gif);
}

a.stumbleupon
{
 background-image   : url(../img/bookmarks/sprite_stumbleupon.gif);
}
a.twitter
{
 background-image   : url(../img/bookmarks/sprite_twitter.gif);
}

/*------------------------------------------------------------------
8.2 THISPAGE
------------------------------------------------------------------*/
ul#thispage
{
 padding			: 0 30px 0 0;
 float              : right;
}

/*------------------------------------------------------------------
9. TRANSLUCENT MASK
------------------------------------------------------------------*/

#translucent-mask
{
 position			: fixed;
 z-index 			: 500;
 top				: 0px;
 left				: 0px;
 width				: 100%;
 height				: 100%;
 background-color	: #FFFFFF;
 filter				: alpha(opacity=75);
 -moz-opacity		: 0.75;
 opacity			: 0.75; 
}


#pop-window
{
 position			: fixed;
 z-index			: 501;
 top				: 140px;
 left				: 40%;
 border				: 3px solid	#9ccedd;
 text-align			: left;
 width				: 280px;
 background			: #CCE4EE;
}

#xhr_content
{
 font-size          : 1.2em;
}

#xhr_content p,
#xhr_content h2,
#xhr_content h3
{
 padding            : 7px;
}

#xhr_content label
{
 display            : block;
 margin-bottom      : 1em
}
#xhr_content textarea.medium
{
 width              : 260px;
 height             : 100px
}

#xhr_content .error
{
 color              : #FF0000;
 display            : block;
 margin-bottom      : 1em;
}

/*------------------------------------------------------------------
10. CLEARFIX
------------------------------------------------------------------*/
.clearfix:after
{
 clear              : both;
 content            : ".";
 display            : block;
 height             : 0;
 line-height        : 0;
 visibility         : hidden;
}

.clearfix
{
 display            : inline-block;
}

html[xmlns] .clearfix
{
 display            : block;
}

* html .clearfix
{
 height             : 1%;
}