/* common styles */
.clear { clear: both; }
body { text-align: center; margin: 0; padding: 0; background: url('http://www.jellegeertsma.com/image/852/920.920.0/') repeat-y top center fixed #222222; padding-bottom: 0; }
body * { text-align: left; }
table td { text-align: left; }
a:link, a:visited { text-decoration: none; color: #006699; }
a:active, a:hover { text-decoration: underline; color: #006699; }
a img { border: 0; }

* { font-size: 11pt; }
p { margin-bottom: 0 0 15px 0; text-align: justify; line-height: 12pt; }
h1 { margin: 0 0 15px 0; font-size: 14pt; font-weight: bold; font-family: Verdana; color: #444444; }
h2, h2 div { margin-bottom: 0 0 15px 0; font-size: 13pt; font-style: italic; font-family: Verdana; color: #444444; }
h3 { margin-bottom: 0 0 15px 0; font-size: 12pt; font-family: Verdana; color: #444444; }

/* site header */
#homebutton { position: relative; }
#homebutton div.controls { cursor: pointer; position: absolute; top: 0; right: 0; padding: 3px; display: none; background-color: #FFFFFF; border: #000000 1px solid; }

/* paragraphs */
div.paragraph_box p, div.paragraph_box ul, div.paragraph_box ul *, div.paragraph_box ol, div.paragraph_box ol * { font-family: Verdana; color: #444444; }
div.paragraph_box * a { color: #006699; }
      
/* newsitems */
div.newsitem div.head { width: 100%; margin-bottom: 5px; }
div.newsitem div.head h2 { display: inline; margin: 0; float: left; }
div.newsitem div.head span.date { float: right; font-style: italic; font-family: Verdana; color: #444444; }
div.newsitem .content { display: block; clear: both; margin: 0; text-align: justify; font-family: Verdana; color: #444444; }
div.newsitem { margin: 0 0 15px 0; }
div.newsitem span.url a { font-family: Verdana; color: #006699; }

/* calendar */
.calendarevent h3 { margin: 0; font-weight: normal; }
.calendarevent span.date { font-style: italic; font-size: 9pt; color: #808080; font-family: Verdana; color: #444444; }
.calendarevent .location { display: block; clear: both; margin: 0; font-family: Verdana; color: #444444; }
.calendarevent { margin: 0 0 15px 0; }
.calendarevent span.url a { font-family: Verdana; color: #006699; }

/* portfolio */
#portfolio_content  { float: left; width: 770px; padding: 30px 0 0 0; margin: 0; text-align: left; }
div.popupBoxLink { margin: 0 0 24px 24px; width: 130px; height: 130px; display: block; float: left; position: relative; }
.portfolioItemBox { background-color: #FFFFFF; }

/* portfolio item */
.portfolioItemBox { width: 745px; height: 100%; }
  .portfolioItemBox .itemImage { float: left; width: 485px; padding: 10px; text-align: center; }
  .portfolioItemBox .itemInfo { float: left; width: 220px; padding: 10px; text-align: left; margin: 0; }

/* paragraph edit styles */
.paragraph_box_new { text-align: right; width: 100%; background: url('http://www.jellegeertsma.com/templates/common/gfx/icon_add.png') no-repeat right #FFC5C5; padding: 0; font-weight: bold; height: 30px; line-height: 30px; cursor: pointer; } 
  .paragraph_box_new div { margin-right: 30px; float: right; }
div.paragraph_box { display: block; position: relative; }
div.paragraph_box_hover { background-color: #FFC5C5; }
div.paragraphEditIcons { display: none; position: absolute; top: 0; right: 0; font-size: 0; background: url('http://www.jellegeertsma.com/templates/common/gfx/icons_bg.png') no-repeat top right; text-align: right; padding: 0; margin: 0; width: 77px; height: 29px; }
img.paragraphIcon {}
img.paragraphIcon:hover { cursor: pointer; }

div.paragraph_edit_box { display: none; width: 100%; text-align: right; background-color: #FFC5C5; padding: 2px; margin-bottom: 10px; }
div.paragraph_edit_box form input { width: 100%; margin: 3px 0 3px 0; border: #CCCCCC 1px solid; }
div.paragraph_edit_box form textarea { margin: 3px 0 3px 1px; }
div.paragraph_edit_box form input.paragraph_edit_button , div.paragraph_edit_box form input.paragraph_cancel_button { width: auto; font-size: 11px; height: 20px; }

div.paragraph_saving_wait { display: none; height: 35px; width: 100%; background: url('http://www.jellegeertsma.com/templates/common/gfx/loading_paragraph.gif') no-repeat center #FFC5C5; }

/* admin bar */
#adminBar { height: 35px; width: 100%; position: fixed; bottom: 0; background: url('http://www.jellegeertsma.com/templates/common/gfx/adminbarbg.png') repeat-x top left #000000; }
#adminBar #loginInfo { float: right; height: 35px; color: #EBD182; font-size: 11px; padding-right: 10px; }
#adminBar #loginInfo strong { font-size: 11px; font-weight: bold; }
#adminBar #loginInfo a { color: #B8A055; text-decoration: none; font-size: 11px; }
#adminBar #loginInfo a:hover { text-decoration: underline; }

#adminBar .bar_button { background: url('http://www.jellegeertsma.com/templates/common/gfx/barBtn_left.png'); color: #EBD182; font-weight: bold; line-height: 35px; height: 35px; padding: 0; margin: 0; float: left; cursor: pointer; }
#adminBar .bar_button span { background: url('http://www.jellegeertsma.com/templates/common/gfx/barBtn_right.png') no-repeat top right; padding: 0 18px 0 11px; font-weight: bold; line-height: 35px; margin: 0; height: 35px; display: block; font-size: 11px; }

/* popupBox */
div.popupBox { background: url('http://www.jellegeertsma.com/templates/common/gfx/popupBox_bg.png'); display: none; z-index: 999999; width: 100%; height: 100%; position: fixed; top: 0; left: 0; }
div.popupBox table.popupBoxTable { width: 100%; height: 100%; border: 0; border-collapse: collapse; }
div.popupBox table.popupBoxTable td.popupBoxTd { width: 100%; height: 100%; text-align: center; vertical-align: middle; position: relative; }
div.popupContentBox { margin: 0 auto; width: 765px; height: 550px; overflow: auto; border: #000000 1px solid; background-color: #EEEEEE; }
div.popupControlButtons { width: 767px; height: 16px; margin: 0 auto; text-align: right; background: url('http://www.jellegeertsma.com/templates/common/gfx/popupBoxNavBg.png') no-repeat top right; position: relative; }
div.popupControlButtons img { cursor: pointer; float: right; }

/* edit image */
div.image_show { position: relative; margin: 0 auto; }
div.image_show div.image_controls { display: none; margin: 0; padding: 0 3px 0 3px; position: absolute; top: 1px; left: 1px; background: url('http://www.jellegeertsma.com/templates/common/gfx/icons_bg_left.png') no-repeat top right; }
div.image_show div.image_controls img { cursor: pointer; }
div.image_change { display: none; }
div.image_change td { text-align: left; width: auto; }
div.image_change_wait { display: none; background: url('http://www.jellegeertsma.com/templates/common/gfx/loading_paragraph.gif') no-repeat center left #FFC5C5; padding: 0 0 0 40px; height: 40px; border: #BC6969 1px solid; line-height: 40px; }

/* portfolio items */
div.popupBoxLink img { position: absolute; top: 0; left: 0; cursor: pointer; }
div.popupBoxLink div.portfolioThumbControlBox { background: url('http://www.jellegeertsma.com/templates/common/gfx/icons_bg.png') no-repeat left; display: none; margin: 0; padding: 0; position: absolute; top: 0; right: 0; height: 29px; width: 56px; text-align: right; }
div.popupBoxLink div.portfolioThumbControlBox img{ position: relative; }
div.popupBoxAddItem { background: url('http://www.jellegeertsma.com/templates/common/gfx/icon_add.png') no-repeat center right #FFC5C5; height: 30px; font-weight: bold; text-align: center; cursor: pointer; text-align: right; line-height: 30px; padding: 0 30px 0 0; }
div.portfolioItemEdit { background: url('http://www.jellegeertsma.com/templates/common/gfx/icon_edit.png') no-repeat #FFC5C5; background-position: 5px center; margin-bottom: 10px; line-height: 30px; height: 30px; padding-left: 30px; font-weight: bold; cursor: pointer; }

/* forms */
form div { clear: both; display: block; margin-bottom: 5px; }
form div label { float: left; width: 125px; color: #444444; }
form div div.label { width: 125px; float: left; clear: none; }
form div div.input { float: left; clear: none; }
form div input, form div select { width: 180px; float: left; }
form div input.small { width: 100px; }
form div.buttons { margin-left: 125px; }
form div.buttons input { width: auto; float: none; }
form div input.button { width: auto; }
form div select optgroup option { padding-left: 2px; }

/* page main image */
div#main_image { position: relative; }
div#main_image div#main_image_controls { position: absolute; top: 0; right: 0; background: url('http://www.jellegeertsma.com/templates/common/gfx/icons_bg.png') no-repeat left; height: 29px; width: 30px; text-align: right; display: none; }
div#main_image div#main_image_controls img { cursor: pointer; }
div#main_image div#main_image_text_container { padding: 10px 0 10px 0; font-family: Verdana; color: #444444; font-size: 11pt; }
div#main_image_edit { display: none; }
div#main_image_wait { display: none; height: 35px; width: 100%; background: url('http://www.jellegeertsma.com/templates/common/gfx/loading_paragraph.gif') no-repeat center #FFC5C5; }

/* newsitems */
div.news_item_show { position: relative; }
div.news_item_show div.controls { display: none; position: absolute; top: 0; right: 0; background: url('http://www.jellegeertsma.com/templates/common/gfx/icons_bg.png') no-repeat left; height: 29px; width: 54px; text-align: right; }
div.news_item_show div.controls img { cursor: pointer; }
div.news_item_edit { display: none; background-color: #FFC5C5; margin-bottom: 10px; padding: 10px 0 10px 0; }
div.news_item_wait { display: none; width: 100%; height: 35px; background: url('http://www.jellegeertsma.com/templates/common/gfx/loading_paragraph.gif') no-repeat center #FFC5C5; }
div.news_item_new { text-align: right; width: 100%; background: url('http://www.jellegeertsma.com/templates/common/gfx/icon_add.png') no-repeat right #FFC5C5; padding: 0; font-weight: bold; height: 30px; line-height: 30px; cursor: pointer; } 
  div.news_item_new div { margin-right: 30px; float: right; }
  
/* links */
#hyperlink_show_new { text-align: right; width: 100%; background: url('http://www.jellegeertsma.com/templates/common/gfx/icon_add.png') no-repeat right #FFC5C5; padding: 0; font-weight: bold; height: 30px; line-height: 30px; cursor: pointer; margin-top: 5px; } 
  #hyperlink_show_new div { margin-right: 30px; float: right; border: 0; }
div.hyperlink_show { padding-left: 5px; position: relative; height: 30px; line-height: 30px; border: 1px solid; border-color: transparent; clear: both; }
div.hyperlink_show_hover { border: #000000 1px solid; background-color: #FFFFFF; }
div.hyperlink_show div.controls { position: absolute; top: -1px; right: -1px; border: #000000 1px solid; display: none; background-color: #FFFFFF; height: 24px; padding: 3px 3px 3px 0; width: 97px; border-left: none; text-align: right; }
div.hyperlink_show div.controls img { cursor: pointer; }
div.hyperlink_edit { display: none; background-color: #FFC5C5; padding: 5px; margin: 5px 0 5px 0; }
div.hyperlink_wait { display: none; width: 100%; height: 35px; background: url('http://www.jellegeertsma.com/templates/common/gfx/loading_paragraph.gif') no-repeat center #FFC5C5; margin: 5px 0 5px 0; }
img.calendarIcon { float: left; cursor: pointer; }

/* calendar events */
#calendarEvent_show_new { text-align: right; width: 100%; background: url('http://www.jellegeertsma.com/templates/common/gfx/icon_add.png') no-repeat right #FFC5C5; padding: 0; font-weight: bold; height: 30px; line-height: 30px; cursor: pointer; margin-bottom: 5px; } 
  #calendarEvent_show_new div { margin-right: 30px; float: right; border: 0; }
div.calendarevent { position: relative; }
div.calendarevent div.controls { display: none; position: absolute; top: 0; right: 0; background: url('http://www.jellegeertsma.com/templates/common/gfx/icons_bg.png') no-repeat left; height: 29px; width: 54px; text-align: right; }
div.calendarevent div.controls img { cursor: pointer; }
div.calendarevent div.calendarEvent_edit { display: none; background-color: #FFC5C5; padding: 5px; margin: 5px 0 5px 0; }
div.calendarevent div.calendarEvent_wait { display: none; width: 100%; height: 35px; background: url('http://www.jellegeertsma.com/templates/common/gfx/loading_paragraph.gif') no-repeat center #FFC5C5; margin: 5px 0 5px 0; }
div.calendarevent div.newGroupOption { display: none; padding-left: 125px; }

/* calendar groups */
div.calendar_group { position: relative; }
div.h2_title { font-size: 13pt; line-height: 32pt; font-style: italic; text-align: left; font-weight: bold; font-family: Verdana; color: #444444; }
div.calendar_group div.calendargroup_controls { position: absolute; top: 0; right: 0; display: none; background: url('http://www.jellegeertsma.com/templates/common/gfx/icons_bg.png') no-repeat left; height: 29px; width: 26px; text-align: right; }
div.calendar_group div.calendargroup_controls img { cursor: pointer; }

/* sidebar sort handle */
#sidebar ul li { position: relative; height: 30px; line-height: 30px; }
#sidebar ul li.hover_out { border: 1px solid; border-color: transparent; }
#sidebar ul li.hover_over { border: #000000 1px solid; background-color: #FFFFFF; }
#sidebar ul li div.sidebarControlBox { display: none; z-index: 500; background-color: #FFFFFF; position: absolute; top: -1px; right: -50px; height: 26px; text-align: left; border: #000000 1px solid; border-width: 1px 1px 1px 0; padding: 2px; }
#sidebar ul li div.sidebarControlBox img { cursor: pointer; }

/* main menu sort handle */
#header ul li.navItem { cursor: pointer; position: relative; display: inline-block; }
#header ul li.navItem div.navControlBox, #header ul li.navItem div.navControlBoxHide { display: block; position: absolute; top: 0; right: 0; margin: 0 auto; width: 85px; height: 26px; text-align: right; background-color: #FFFFFF; border: #000000 1px solid; }
#header ul li.navItem div.navControlBox img { display: inline; }
#header ul li.navItem div.navControlBoxHide { display: none; }

div.editLogo { }
div.editLogo h1 { margin-top: 0; }
div.editLogo table tr td { height: auto; text-align: left; width: auto; vertical-align: top; }
div.editLogo table tr td .inputbox { width: 198px; }
div.editLogo table tr td input.colorpicker { width: 70px; height: 20px; padding: 0; }

/* fontpicker */
.fontpicker_container { position: relative; height: 20px; width: 200px; background: url('http://www.jellegeertsma.com/templates/common/gfx/dropdown_background_0.png'); background-repeat: no-repeat; background-position: top left; }
.fontpicker_plaindisplay { position: absolute; top: 0; left: 0; height: 20px; width: 200px; padding-left: 5px; }
.fontpicker_display { position: absolute; top: 0; left: 0; height: 20px; width: 200px; background: transparent; border: 0; text-indent: -1000px; }
.fontpicker_list { width: 198px; display: none; position: absolute; left: 0; margin: 0; border: #000000 1px solid; max-height: 300px; overflow: auto; background-color: #FFFFFF; }
.fontpicker_fontcontainer { width: 100%; height: 20px; background-repeat: no-repeat; background-position: top left; cursor: pointer; }

/* settings */
table.settingsTable { margin: 10px 0 0 0; padding: 0; border-collapse: collapse; border: 0; width: auto; }
table.settingsTable th { border: 0; padding: 0; margin: 0; font-weight: bold; text-align: center; font-size: 10px; }
table.settingsTable td { border: 0; margin: 0; padding: 0; }
div.wait { display: none; width: 100%; height: 35px; background: url('http://www.jellegeertsma.com/templates/common/gfx/loading_paragraph.gif') no-repeat center #FFC5C5; margin: 5px 0 5px 0; }
.settings label, .settings div.label { width: 270px; text-align: right; padding-right: 5px; color: #000000; }
.settings div { margin-bottom: 2px; min-height: 30px; }
.settings div.buttons { margin-left: 275px; min-height: 0px; }
.settings div div { min-height: 0px; }

/* login bar and box */
#loginBar { height: 35px; text-align: right; width: 100%; position: fixed; bottom: 0; }
#loginBarButton { cursor: pointer; background: url('http://www.jellegeertsma.com/templates/common/gfx/loginbutton.png') no-repeat top left; display: none; width: 108px; height: 31px; float: right; }
#loginBox .loginBox, #forgotPwdBox .loginBox { background-color: #FFFFFF; padding: 0 10px 0 10px; }
a.forgotPwdLink { font-size: 10px; color: #CC0000; }

/* add page */
div.addPageForm, div.addPortfolioForm, div.editLogo, div.settingsForm { color: #000000; padding: 10px; width: 350px; height: 200px; margin: 0 auto; border: #000000 1px solid; background-color: #FFFFFF; }
div.addPageForm label, div.addPortfolioForm label, div.editLogo label, div.settingsForm label { color: #000000; }
div.addPageForm h1, div.addPortfolioForm h1, div.editLogo h1, div.settingsForm h1 { color: #000000; }

/* contact form */
#contactFormContainer td { font-family: Verdana; color: #444444; }