@charset "utf-8";

/* ========================
   HTML5 Boilerplate styles
   ======================== */
body { font-size:1em; line-height:1.4 }
::-moz-selection,::selection { text-shadow:none }
a { text-decoration:none; outline:0 none !important }
b, strong { font-weight:bold }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0 }
img { vertical-align:middle }
fieldset { border:0; margin:0; padding:0 }
textarea { resize:vertical }
.chromeframe { margin:0.2em 0; background:#ccc; color:black; padding:0.2em 0 }

/* ===================
    ALL:Thelet Theme
   =================== */
html, button, input, select, textarea { color:#333 }
body { color:#32132c; font:16px/26px "Trebuchet MS",Helvetica,sans-serif; background:#d0bb9d }
::-moz-selection,::selection { background:#4f2451 }
a, #logo, .main .aside, .footer-container .footer { color:white }
h1, h2, h3, h4, h5, h6 {margin:0 0 10px;}
p, pre {margin:0;}
nav li a, nav .unim-icon { color:white; /*text-shadow:0 1px 0 #856371;*/ background:#4f2451; border:0 !important }
#phone, #phone a { color:white; text-shadow:0 1px 0 rgba(0, 0, 0, .3) }
#article a { color:#856371 }
.header-container { background:#856371; border-bottom:20px solid #4f2451 }
.main .aside { background:#856371; border-top:20px solid #4f2451 }
.footer-container { background:#856371; border-top:20px solid #4f2451 }
#back-to-top, .social-media a, .contact-form .button { background:#856371 }
/* purple:4f2451; light-purple:856371 */

/* ==============
    MOBILE:Menu
   ============== */
.unim-icon { text-align:right; padding:.5em 1em !important }
nav { position:relative; z-index:12 }
nav ul { display:block; opacity:.96; filter:alpha(opacity=96); }
nav ul.unim { position:absolute; width:100%; margin:0; padding:0; }
nav ul.unim.mobile li i { background-image:url(../images/nav-arrows.png); }
	nav li a, nav .unim-icon { font-weight:bold; text-decoration:none; box-shadow:0 1px 3px rgba(0, 0, 0, 0.4); margin:0 1px 2px; padding:.5em 1em }
	/*nav li a { text-align:center }*/
	nav ul li li a { opacity:.9; filter:alpha(opacity=90); }
		nav li a:hover, nav li a:visited { opacity:1; filter:alpha(opacity=100); }

/* ==============
    MOBILE:Main
   ============== */
.wrapper { width:90%; min-width:216px; margin:0 5% }
.main { padding:30px 0 }
    .main article h1 { font-size:2em }
    .main .aside { padding:0px 5% 10px }
.footer-container .footer { padding:20px 0 }

/* ===============
    ALL:IE Fixes
   =============== */
.lt-ie8 #logo { width:100% }
.ie7 .title { padding-top:20px }
.lt-ie8 nav { float:none; width:100% }
.lt-ie8 .footer-container { width:100% }


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   
/* Logo */
#logo { font-size:2.25em; letter-spacing:-2px; line-height:1em; text-shadow:0 -1px #502450; padding:10px 0; }
	#logo span, #logo strong {white-space:nowrap;}
	#logo p {margin:0;}
 
/* Phonenumber */
#phonenumber {color:#fff; font-size:24px; font-weight:bold; line-height:1em; text-shadow:0 -1px #502450; padding:10px 0; }
	#phonenumber p {margin:0;}
	#phonenumber img {padding-right:4px;}

/* Header */
#header { clear:both; }

/* Categories */
#categories {margin:0 0 20px;}
	#categories ul { list-style:none; padding:0 }
	#categories li { float:right; width:32%; margin-right:2%}
		#categories li:first-child { margin-right:0 }
		#categories li > a { display:block; color:#fff; text-align:left }
			#categories li > a:hover { opacity:.9; filter:alpha(opacity=90) }
			#categories li > a > img { max-width:100%; height:auto }
			#categories li > a > span { display:none }

/* Articles */
#logo img, .item-page img { max-width:100%; height:auto; margin-bottom:10px }
.item-page ul { list-style-image:url(../images/list-style-bullet.png); margin:0.5em 0 }
	.item-page li { margin:0 1em }
#article, #categories, #projects, #text, .newsflash { margin:0 0 10px }
.item-page-title, .footer p { margin-top:0 }

#subjectmenu {clear:both; text-align:center;}
	#subjectmenu ul {list-style:none; padding:20px 0 0;}
	#subjectmenu li {display:inline-block; width:119px; margin:10px 3%; padding:0;}
		#subjectmenu a, #subjectmenu a:hover {color:#fff; text-decoration:none;}
		#subjectmenu span {display:block;background:url('../images/subject.png') no-repeat;color:#fff;font-size:16px;line-height:19px;text-align:center;text-shadow:0 0 3px #32132c;width:119px;height:19px;margin:3px 0;}

/* Rights */
#rights { font-size:11px; line-height:normal }
	#rights a { padding-left:1em }
	
   
/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (min-width:480px) { 
    /* ====================
            INTERMEDIATE:Menu
           ==================== */
	nav ul li li a { position:relative; box-shadow:0 5px 10px rgba(0,0,0,.1) }
    /* ========================
            INTERMEDIATE:IE Fixes
           ======================== */
    .oldie nav ul li { display:inline }
}

@media only screen and (min-width:768px) { 
    /* ====================
            WIDE:CSS3 Effects
           ==================== */
    .header-container, .main .aside { -webkit-box-shadow:0 5px 10px rgba(0,0,0,.2); -moz-box-shadow:0 5px 10px rgba(0,0,0,.2); box-shadow:0 5px 10px rgba(0,0,0,.2) }

    /* ============
            WIDE:Menu
           ============ */
	nav ul.unim { width:auto; min-width:210px; }

    /* ============
            WIDE:Main
           ============ */
    #phonenumber { float:left;}
	#topmenu { float:right; }	
	
    .main article { float:left; width:57% }
	.main .fullwidth { width:100% }
	.main .aside { float:right; width:28% }
}

@media only screen and (min-width:1067px) { 
    /* ===============
            Maximal Width
           =============== */
    .wrapper { width:960px; /* 1067px - 10% for margins */ margin:0 auto }
	.newsflash-II .newsflash-item { float:right; width:45%; padding-left:5% }
}


/* ============================
   Component and module styling
   ============================ */
   
/* J51_Slideshow */   
#slideshow { margin:0 0 20px }
	.slideshowcontainer { box-shadow:0 5px 10px #eee; z-index:10 }
	.slidesjs-previous.slidesjs-navigation, .slidesjs-next.slidesjs-navigation { opacity:.1 }
	
/* Newsflash & Blog */
.newsflash-II .newsflash-item { margin:0 0 10px }
.newsflash-II .newsflash-item p img { float:none !important; display:block; max-width:100%; margin:0 0 10px !important }
.item-separator { padding:5px }
.readmore { font-weight:bold }

/* Joomla Contact */
.contact h3 { display:none !important }
.contact-form {}
.contact-miscinfo {}
	.contact .jicons-text { display:none }
	#jform_contact_name, #jform_contact_email, #jform_contact_emailmsg, #jform_contact_message { color:#333; background:#f3f3f3; border:1px inset #999; border-radius:0; width:98%; padding:5px 1% }
	#jform_contact_message { height:9em }
	.contact-form .button { color:white; font-weight:bold; border:0; border-radius:0; padding:.5em 1em; cursor:pointer }
		.contact-form .button:hover { opacity:.8; filter:alpha(opacity=80) }
input.invalid, textarea.invalid { border:1px inset #f33; box-shadow:0 0 2em rgba(255,0,0,0.2) inset }

/* Fox Contact general */
.foxcontainer {color:#fff; line-height:normal; padding:0 !important; margin:0 !important; overflow:visible !important;}
.foxcontainer .control-group {margin:6px 0 !important;}
	.foxcontainer .controls:hover {opacity:.9;}
	.foxcontainer label {line-height:1.5em;}
	.foxcontainer input, .foxcontainer textarea {color:#32132c !important; background:#856371 !important; border:1px solid transparent !important; border-radius:3px !important; box-shadow:0 1px 1px rgba(0,0,0,.2) inset; padding:5px 2% 3px !important; line-height:24px; width:96% !important; min-height:24px;}
/*.foxcontainer h2:first-of-type {display:none;}*/
.foxcontainer button.btn {font-weight:bold; line-height:32px; text-shadow:none !important; border:0 !important; border-radius:3px !important; box-shadow:none; margin-left:0 !important; background:#4F2451 !important; margin:8px 0 0 !important; width:120px; height:32px;}
	.foxcontainer button.btn span {color:#fff;}
/* fox elements */
.fox-copyright, .foxcontainer .asterisk, .foxcontainer .required {display:none;}
.foxcontainer .error input, .foxcontainer .error textarea {border:#E73D3D inset 1px !important;}
.foxcontainer .validfoxtext {box-shadow:none;}
.foxform div {margin:0 0 2px 0 !important;}
/* fox alert */
.foxcontainer .alert-error {text-align:start;}
/*.foxcontainer .alert-error {position:absolute; top:-10px; left:10%; right:10%; box-shadow:0 1px 3px rgba(0,0,0,.2); margin:1em 0 !important; padding:6px 9px !important; z-index:10000;}
	.foxcontainer .fox_messages li {line-height:normal;}*/

/* Phoca ShadowBox */
#shadowbox_container { z-index:10001 }
	#shadowbox { direction:ltr !important }
	#shadowbox_content { position:relative !important }
	
/* PhocaGallery */
#phocagallery { width:100% !important; line-height:0; text-align:center; margin-left:2% }
	.pg-category-view-desc { line-height:normal; margin-bottom:10px }
	.pg-category-view-images { width:102% }
	#phocagallery .phocagallery-box-file { float:none; *float:right; display:inline-block; background:white; box-shadow:0 5px 10px #ddd; border:1px solid #ddd; *max-width:188px; width:auto !important; height:auto !important; margin:0 0 10px 5px; padding:0 }
		#phocagallery .phocagallery-box-file:hover { border-color:#ccc }
	#phocagallery table, #phocagallery td, .phocagallery-box-file-third { direction:ltr }
		#phocagallery a.shadowbox-button, #phocagallery a.shadowbox-button:hover { display:block; background:white }
	#phocagallery .pg-name { line-height:normal; text-overflow:ellipsis; white-space:nowrap; width:180px; margin:4px auto 6px; overflow:hidden }
	
/* Phoca Module */
#phocagallery-module-ri { margin-left:-2% }
	#phocagallery-module-ri .mosaic { float:right !important; margin:0 0 2% 2% }
	
/* PhocaGuestbook */
#phocaguestbook { width:100% !important; overflow:auto }
	#phocaguestbook .pgbox { border-radius:2px; margin:0 0 10px }
	#pg-guestbook + div, #pg-guestbook + div + p { display:none }
	
/* Phoca Pagination */
#phocagallery .pagination { line-height:normal }
	.pagination a, .pagination span, .pagination strong { padding:.4em }
	
/* System Messages */
#system-message { color:#f33; border-top:2px solid #f33; border-bottom:2px solid #f33; margin:0 0 .5em; padding:.5em }
	#system-message dt { font-weight:bold }
	
/* Joomla Tooltip */
div.tip-wrap { color:#fff; line-height:1.2em; background:#000; border:0; border-radius:0 2em 2em 2em; opacity:.8; filter:alpha(opacity=80) }
	div.tip-wrap div.tip { padding:.4em 1.2em .6em 1em }
	div.tip-wrap div.tip-title { font-weight:bold }
	
/* ===========
   Back to Top
   =========== */
.navigation-top { position:relative }
	.navigation-top > div { position:absolute; left:0; bottom:0; width:40px; height:40px; overflow:hidden }
	#back-to-top { position:relative; bottom:-12px; display:block; font-size:0; border:0 none; width:40px; height:40px; outline:0 none; opacity:0; filter:alpha(opacity=0); transition:all .5s; cursor:pointer }
		html[dir="ltr"] #back-to-top { right:0 }
		html[dir="rtl"] #back-to-top { left:0 }
	#back-to-top, #back-to-top:active, #back-to-top:visited, #back-to-top:link { background-image:url(../images/back-to-top.png);  background-position:50% 50%; background-repeat:no-repeat; background-size:100% }
		#back-to-top:hover { bottom:-5px; opacity:1 !important; filter:alpha(opacity=100) !important }

/* ============
   Social Media
   ============ */
.social-media { position:relative }
	.social-media ul { position:absolute; bottom:0; list-style:none; height:40px; margin:0; padding:0; overflow:hidden }
		html[dir="ltr"] .social-media li { float:right; margin-right:2px }
		html[dir="rtl"] .social-media li { float:left; margin-left:2px }
		.social-media a { position:relative; display:block; color:white; font-size:0; bottom:-12px; opacity:.7; filter:alpha(opacity=70); transition:all .5s; cursor:pointer }
			.social-media a:hover { bottom:-7px; opacity:1 !important; filter:alpha(opacity=100) !important }
			.social-media a img { width:32px; height:32px; padding:2px 4px 6px }
			.social-media span { display:none }

/* ==============
   Sticked Footer
   ============== */
html, body { height:100% }
.wrapper-container { min-height:100% }
.main-container{ padding-bottom:110px }
.footer-container { margin-top:-110px }

	
/* ==========================================================================
   Helper classes
   ========================================================================== */
.ir { background-color:transparent; border:0; overflow:hidden; *text-indent:-9999px }
.ir:before { content:""; display:block; width:0; height:150% }
.hidden { display:none !important; visibility:hidden }
.visuallyhidden { border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto }
.invisible { visibility:hidden }
.clearfix:before, .clearfix:after { content:" "; display:table }
.clearfix:after { clear:both }
.clearfix { *zoom:1 }


/* ==========================================================================
   Print styles
   ========================================================================== */
@media print { 
    * { background:transparent !important; color:black !important; box-shadow:none !important; text-shadow:none !important }
    a, a:visited { text-decoration:underline }
    a[href]:after { content:" (" attr(href) ")" }
    abbr[title]:after { content:" (" attr(title) ")" }
    /* Don't show links for images, or javascript/internal links */
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content:"" }
    pre, blockquote { border:1px solid #999; page-break-inside:avoid }
    thead { display:table-header-group; /* h5bp.com/t */ }
    tr, img { page-break-inside:avoid }
    img { max-width:100% !important }
}