/* --------------------------------------
   CSS Reset by Eric Meyerv1.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;
}
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;
}

/* ------------------ 
 * Typography
 * Based on Blueprint
   ------------------ */

/* Default font settings. The font-size percentage is of 16px. (0.75 * 16px = 12px) */
body {
    font-size: 80%;
    color: #000066;
    background: #fff;
    font-family: "Verdana","Helvetica",sans-serif;
    line-height: 1.4em;
}

/* Headings */
h1,h2,h3,h4,h5,h6 { font-weight: bold; color: #000066; line-height: 1.5em; margin: 0; }

/* Text Styles */
h1 { font-size: 1.6667em; line-height: 1.8em; margin-top: 0.9em;}
h2 { font-size: 1.5em; line-height: 1em; margin-top: 1em;}
h3 { font-size: 1.3333em; line-height: 1.125em; margin-top: 1.125em;}
h4 { font-size: 1.1667em; line-height: 1.2857em; margin-top: 1.2857em;}
h5 { font-size: 1em; font-weight: bold; font-style: italic; line-height: 1.5em; margin-top: 1.5em;}
h6 { font-size: 1em; font-weight: bold; line-height: 1.5em; margin-top: 1.5em;}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child
{
    margin-top: 0;
}

h1 img, h2 img, h3 img,
h4 img, h5 img, h6 img {
  margin: 0;
}

/* Text elements */
p           { margin: 0 0 1.5em; }
img.left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }
.left {text-align:left;}
.right {text-align:right;}
.center    {text-align:center;}

#headernavigation a:focus, 
#headernavigation a:hover,
#header #login a:focus,
#header #login a:hover,
#headernavigation li a.green:hover,
a:focus,
a:hover     { color: #FE0000; }

a           { color: #000066; text-decoration: underline; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre,code    { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'monaco', 'andale mono', 'lucida console', monospace; line-height: 1.5; }


/* Lists */
li ul,
li ol       { margin: 0em; }
ul, ol      { margin: 0 0 1em 2em; }
li          { margin: 0; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}


/* Tables */

table
{
    margin-bottom: 1.4em;
    width:100%;
}

th
{
    font-weight: bold;
    text-align: left;
}

th, td
{
    padding: 4px 10px 4px 5px;
    vertical-align: top;
}

tr.even td
{
    background: #E5ECF9;
}

tfoot
{
    font-style: italic;
}

caption
{
    background: #eee;
}


/* Misc classes */

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide       { display: none; }

.quiet      { color: #666; }
.loud       { color: #000; }
.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }

.first      { margin-left:0; padding-left:0; }
.last       { margin-right:0; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }



/*  -------------------------------------------------------------
    Blueprint Clearing floats without extra markup
    Based on How To Clear Floats Without Structural Markup by PiE
    http://www.positioniseverything.net/easyclearing.html
    ------------------------------------------------------------- */

.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* * html .container {height: 1%;}
.clearfix, .container {display: block;}

/* Regular clearing apply to column that should drop below previous ones. */
.clear { clear:both; }

div.review {
    border-top: solid thin #000066;
    border-bottom: solid thin #000066;
    margin-bottom: 20px;
    padding: 0.7em 0;
}

div.review div.aspect {
    float:left;
    width:140px;
}

div.review div.value {
    float:left;
    width:140px;
}

div.review p.author {
    text-align: right;
    margin-bottom: 0;
}

/* Calendar preview */
#calendar-preview li {
    list-style: none;
    width: 75px;
    height: 56px;
    background: top center url(../img/jubelkalender-voorbeeld-bg.png) no-repeat;
    padding: 10px 6px 63px 7px;
    text-align: center;
    float: left;
    margin: 0 20px 20px 0;
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

#calendar-preview li img {
    max-height: 56px;
	max-width: 75px;
}

#calendar-landscape-preview li {
    list-style: none;
    width: 126px;
    height: 90px;
    background: top center url(../img/jubelkalender-liggend-voorbeeld-bg.png) no-repeat;
    padding: 0 0 0 0;
    text-align: center;
    float: left;
    margin: 0 20px 20px 0;
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

#calendar-landscape-preview li img {
    margin-left: -57px;
	margin-top: 27px;
	max-height: 50px;
	max-width: 55px;
}

#poster-calendar-preview ul {
    background: top center url(../img/jubelkalender-poster-voorbeeld-bg.png) no-repeat;
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    height: 508px;
    width: 350px;
}

#poster-calendar-preview li {
    list-style: none;
    width: 75px;
    height: 56px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    float: left;
    margin: 5px 4px 102px 8px;
}

#poster-calendar-preview li img {
    max-height: 56px;
	max-width: 75px;
}

#poster-calendar-landscape-preview ul {
    background: top center url(../img/jubelkalender-poster-liggend-voorbeeld-bg.png) no-repeat;
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    height: 354px;
    width: 500px;
}

#poster-calendar-landscape-preview li {
    list-style: none;
    width: 75px;
    height: 56px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    float: left;
    margin: 5px 2px 108px 6px;
}

#poster-calendar-landscape-preview li img {
    max-height: 56px;
	max-width: 75px;
}

/* Calendar landscape preview */
#calendar-variation-preview-portrait {
    width: 98px;
    height: 129px;
    background: top center url(../img/foto-kalender-fixed-preview-portrait.png) no-repeat;
    padding: 0 0 0 0;
    text-align: center;
    margin: 0 0 0 0;
}
	

#calendar-variation-preview-landscape {
    width: 129px;
    height: 91px;
    background: top center url(../img/foto-kalender-fixed-preview-landscape.png) no-repeat;
    padding: 0 0 0 0;
    text-align: center;
    margin: 0 0 0 0;
}

#calendar-landscape-preview li img {
	/*margin-top: 30px;
	margin-left: -60px;
    max-height: 36px;
}

/* check box on the 'choose variation' photocalendar
 *  page to display landscape/portrait example imgs */

#checkbox-variation td{
	vertical-align: center;
}
#checkbox-variation td img {
	
}

/* Calendar landscape preview */
#calendar-variation-preview-portrait {
    width: 98px;
    height: 129px;
    background: top center url(../img/foto-kalender-fixed-preview-portrait.png) no-repeat;
    padding: 0 0 0 0;
    text-align: center;
    margin: 0 0 0 0;
}
	

#calendar-variation-preview-landscape {
    width: 129px;
    height: 91px;
    background: top center url(../img/foto-kalender-fixed-preview-landscape.png) no-repeat;
    padding: 0 0 0 0;
    text-align: center;
    margin: 0 0 0 0;
}