File: D:/HostingSpaces/PHerau/ha.health-science.be/wwwroot/Portals/_default/Skins/Aphelia/skin.css
@charset "UTF-8";
/* CSS Document */
@import url("styles/animate.min.css");
*{margin:0; padding:0; outline:none; border:none;list-style:none;}
html { height: 100%; margin-bottom: 1px; overflow-y:auto; } /* Force Vertical Scrollbar */
body{
background: #f4f4f4 url(images/backgrounds/body_bg.jpg) repeat-x 0 0;
font-size:13px;
line-height:1.5em;
font-family:Arial, Helvetica, sans-serif;
}
/* #3 COLUMN ADAPTABLE
based on: http://jsfiddle.net/chazthetic/qx32C/294/
================================================== */
.container{
position: relative;
width: 960px;
margin: 0 auto;
padding: 0;
}
/* WRAPPER STYLES */
.columns {
display: inline-block;
margin:10px;
margin-top:0px;
width:940px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
/*.paneGroup {overflow:hidden;}*/
.paneGroup div { height: auto; }
/* SET COLUMNS */
.leftPane {
width: 220px;
float: left;
}
.contentPane {
margin-left:230px;
margin-right: 230px;
}
.rightPane {
width: 220px;
margin-left:10px;
float: right;
}
/* ACCOMODATE EMPTY PANES */
.DNNEmptyPane{width:0; margin:0;}
.paneGroup .leftPane.DNNEmptyPane + .contentPane{
margin-left:0;
}
.paneGroup .rightPane.DNNEmptyPane + .leftPane + .contentPane{
margin-right: 0;
}
.paneGroup .rightPane.DNNEmptyPane + .leftPane.DNNEmptyPane + .contentPane{
margin-left:0;
margin-right: 0;
}
/*--------------
Login
---------------*/
#login{ padding:7px 0; }
#login a{color:#ccc;}
/*--------------
Main Banner
---------------*/
#mainBanner{
position:relative;
padding-top:15px;
z-index:1;
}
/*--------------
Site Search
---------------*/
#dnn_dnnSearch_ClassicSearch{
position:relative;
float:right;
margin:5px 0 10px 0;
}
#dnn_dnnSearch_ClassicSearch > span{
display: block;
float: left;
margin: 5px;
}
#dnn_dnnSearch_txtSearch{
float:right;
width:100px;
padding:6px 10px;
padding-right:37px; /* Make room for submit button */
border:1px solid rgba(0,0,0,0.2);
border-radius:3px;
background:rgba(0,0,0,0.40);
box-shadow:0px 1px 0px 0px rgba(255,255,255,1), inset 0px 0px 4px 0px rgba(0,0,0,0.15) ;
color:#C9C9C9;
font-size:12px;
/* transition decleration */
transition: all ease-in 200ms;
-moz-transition: all ease-in 200ms; /* Firefox 4 */
-webkit-transition: all ease-in 200ms; /* Safari and Chrome */
-o-transition: all ease-in 200ms; /* Opera */
-ms-transition: all ease-in 200ms; /* IE9? */
}
#dnn_dnnSearch_txtSearch:active, #dnn_dnnSearch_txtSearch:focus{
width:163px;
background:rgba(255,255,255,0.9);
border:1px solid rgba(0,0,0,0.4);
color:#444;
}
#dnn_dnnSearch_ClassicSearch a{
display: block;
position:absolute;
right:0; top:0;
height:26px; width:30px;
padding-bottom:0;
border:none;
box-shadow:none;
webkit-box-shadow:none;
overflow:hidden;
text-indent:-99999px;
background:transparent url(images/buttons/searchButton_bg.png) no-repeat 9px 9px;
z-index:1;
cursor:pointer;
}
/*--------------
Language Skin Object
---------------*/
.language-object
{
position:absolute;
top:25px; left:0;
}
.language-object span
{
margin-right:2px;
}
/*--------------
Menu Bar
---------------*/
.menuBar{
height:52px;
margin-bottom:15px;
clear:both;
background:url(images/backgrounds/nav_bg.png) repeat-x -1px -1px;
box-shadow:inset 0px 1px 0px 0px rgba(255,255,255,0.2), 0px 1px 0px 0px rgba(0,0,0,.7) ;
border-radius:3px;
border:1px solid #888;
border-bottom:1px solid #666;
border-right:1px solid #666;
}
/*--------------
Menu Bar: Logo
---------------*/
.menuBar h1{
float:left;
background:url(images/backgrounds/nav_divider_bg.png) no-repeat right 11px;
margin-top:0;
margin-right:5px;
}
.menuBar h1 a {
display:block;
height:59px; width:154px;
padding: 5px 10px;
/*background:url(images/buttons/logo_h1_bg.png) no-repeat center 14px;*/
}
.menuBar h1 a img{
display: block;
max-width: 100%;
}
.menuBar h1 a span{display:none;}
/*--------------
Menu Bar: Navigation
---------------*/
#mobilePnav{display:none;}
.visHidden{position:absolute; left:-99999999px;}
#dnn_pnav{ float:left; }
#dnn_pnav li{
position:relative;
list-style:none;
}
#dnn_pnav li ul {margin-left:0;}
#dnn_pnav > li{
float:left;
height:39px;
padding-top:12px;
margin-right:2px;
}
#dnn_pnav > li > a, #dnn_pnav > li > span {
display:block;
padding:5px 10px;
font-size:13px;
font-weight:bold;
color:#ddd;
text-decoration:none;
text-shadow:0px 1px #444;
border:1px solid transparent;
border-radius:3px;
}
#dnn_pnav > li:hover > a, #dnn_pnav > li.active > a{
border:1px solid rgba(0,0,0,0.10);
background:rgba(0,0,0,0.25);
color:#fff;
text-shadow:0px 1px 1px #222;
}
#dnn_pnav > li:hover > a:active{
border:1px solid rgba(0,0,0,0.15);
box-shadow:0px 1px 0px 0px rgba(255,255,255,0.15), inset 0px 0px 2px 0px rgba(0,0,0,0.105);
background:rgba(0,0,0,0.35);
}
#dnn_pnav > li:hover > span{
color:#fff;
text-shadow:0px 1px 1px #222;
}
/* Secondary level */
#dnn_pnav > li ul{ /* Styles for all sub levels */
display:none;
position:absolute;
width:225px;
padding:15px 0;
background:#e9e9e9;
border:1px solid #bbb;
border-top:1px solid #666;
border-radius:3px;
box-shadow:inset 0px 1px 0px 0px rgba(255,255,255,1), 0px 0px 3px rgba(0,0,0,0.15);
/* CSS3 */
-webkit-animation-duration: .25s;
-webkit-animation-delay: .2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: .25s;
-moz-animation-delay: .2s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-ms-animation-duration: .25s;
-ms-animation-delay: .2s;
-ms-animation-timing-function: ease;
-ms-animation-fill-mode: both;
animation-duration: .25s;
animation-delay: .2s;
animation-timing-function: ease;
animation-fill-mode: both;
}
#dnn_pnav li:hover > ul{ display:block;}
#dnn_pnav > li > ul{ /* styles specific to secondary level */
top:47px; left:0;
}
#dnn_pnav > li > ul:after{
position:absolute;
top:-7px; left:30px;
content:'';
width:0px; height:0px;
border-left:7px solid transparent; /* left arrow slant */
border-right:7px solid transparent; /* right arrow slant */
border-bottom:7px solid #e9e9e9; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
#dnn_pnav > li ul a{
display:block;
padding:2px 15px;
color:#666;
text-decoration:none;
/* transition decleration */
transition: all ease-in 100ms;
-moz-transition: all ease-in 100ms; /* Firefox 4 */
-webkit-transition: all ease-in 100ms; /* Safari and Chrome */
-o-transition: all ease-in 100ms; /* Opera */
-ms-transition: all ease-in 100ms; /* IE9? */
border:1px solid transparent;
}
#dnn_pnav ul li:last-child > a{ padding-bottom:0;}
#dnn_pnav > li > ul li:hover > a{
color:#111;
background:#fff;
}
/* Tertiary level */
#dnn_pnav li ul li ul{
left:215px; top:-15px;
border:1px solid #bbb;
}
/*--------------
Menu Bar: User Properties
---------------*/
.userProperties{
height:52px;
margin-left:5px;
padding-left:15px;
padding-right:12px;
max-width:260px; /* grow user information to a max of 260px */
float:right;
background:url(images/backgrounds/nav_divider_bg.png) no-repeat left 11px;
}
.userProperties > ul{ float:right;}
.userProperties > ul li{ list-style:none; position:relative; }
.userProperties > ul > li, .userProperties > ul > li > span{ float:left; }
.userProperties > ul > li img, .userProperties > ul > li > a{
width:auto;
display:block;
font-size:13px;
font-weight:bold;
color:#ddd;
text-decoration:none;
text-shadow:0px 1px #444;
}
.userName,
.userRegister,
.userLogin{
height:35px;
padding-top:18px;
}
.userName{ max-width:190px; /* user name and arrow max width */}
.userName > a,
.userRegister > a,
.userLogin > a{
display:inline-block;
padding-right:15px;
margin-right:10px;
background:url(images/backgrounds/dropdownArrow.png) no-repeat right 7px;
/* styles to handle long names */
width:100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.userRegister > a,
.userLogin > a{
padding:0 0 0 9px;
background:none;
}
.userName > a:hover,
.userRegister > a:hover,
.userLogin > a:hover{
color:#fff;
}
.userName > a.active{color:#fff;}
.userProfile .userProfileImg{
border-radius:3px;
overflow:hidden;
margin-top:14px;
display: inline-block;
border:1px solid rgba(0,0,0,0.15);
}
.userProfile .userProfileImg img{
height:28px; width:28px;
}
.userProfile .userMessages{
position:relative;
display:block;
margin-top:16px;
margin-left:15px;
padding:0px 6px;
border:1px solid rgba(0,0,0,0.7);
border-radius:3px;
font-size:10px;
text-shadow:0px 1px #fff;
box-shadow:0px 1px 0px 0px rgba(0,0,0,0.35), inset 0px 1px 0px 0px rgba(255,255,255,1);
background: #f7f7f7; /* Old browsers */
background: -moz-linear-gradient(top, #f7f7f7 0%, #dee2e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#dee2e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f7f7f7 0%,#dee2e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f7f7f7 0%,#dee2e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f7f7f7 0%,#dee2e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #f7f7f7 0%,#dee2e5 100%); /* W3C */
}
.userProfile .userMessages:after{
content:'';
position:absolute;
left:-4px; top:5px;
width:0px; height:0px;
border-bottom:4px solid transparent; /* left arrow slant */
border-top:4px solid transparent; /* right arrow slant */
border-right:4px solid #f7f7f7; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
/*--------------
User Controls Menu Drop Down
---------------*/
.userProperties ul.userMenu{
display:none;
position:absolute;
right:0; top:50px;
width:185px;
padding:15px 0;
background:#efefef;
border-radius:3px;
border:1px solid #bbb;
border-top:1px solid #666;
border-radius:3px;
box-shadow:inset 0px 1px 0px 0px rgba(255,255,255,1), 0px 0px 3px rgba(0,0,0,0.15);
}
.userProperties li.userNotifications,
.userProperties li.userProfilename{
border-bottom:1px dotted #ccc;
}
.userProperties ul.userMenu:after{
position:absolute;
top:-6px; right:50px;
content:'';
width:0px; height:0px;
border-left:7px solid transparent; /* left arrow slant */
border-right:7px solid transparent; /* right arrow slant */
border-bottom:7px solid #e9e9e9; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
.userProperties ul.userMenu a{
display:block;
padding:2px 15px;
color:#666;
text-decoration:none;
/* transition decleration */
transition: all ease-in 100ms;
-moz-transition: all ease-in 100ms; /* Firefox 4 */
-webkit-transition: all ease-in 100ms; /* Safari and Chrome */
-o-transition: all ease-in 100ms; /* Opera */
-ms-transition: all ease-in 100ms; /* IE9? */
}
.userProperties ul.userMenu a span{
padding:0px 4px;
background:rgba(0,0,0,0.45);
border-radius:3px;
font-size:11px;
font-weight:bold;
color:#fff;
text-shadow: 0px 1px 0px rgba(0,0,0,0.8);
-webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 1);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 1);
}
.userProperties ul.userMenu li:last-child > a{ padding-bottom:0;}
.userProperties ul.userMenu li:hover > a{
color:#111;
background:#fff;
}
/* -------
BreadCrumb
---------*/
#Breadcrumb {
clear:both;
margin: 10px 0 15px 5px;
color:#777;
}
#Breadcrumb a{
font-size:13px;
font-weight: normal;
color:#777;
text-decoration:none;
}
/* -------
Main Content
---------*/
#mainContent{
padding:15px 0;
margin-bottom: 15px;
background:#fff;
border:1px solid #ccc;
box-shadow:0px 0px 3px 0px rgba(0,0,0,0.15);
border-radius:3px;
}
#dnn_contentPane{
width:100%;
}
/* -------
Main Footer
---------*/
#mainFooter{
padding-bottom:15px;
color:#666;
font-weight:normal;
}
#copyright .SkinObject{
font-size:11px;
font-weight:normal;
font-style:italic;
color:#777;
}
/*--------------
Basic Container Styles
---------------*/
h2 .Head {
display:block;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:16px;
letter-spacing:-0.008em;
margin-bottom:18px;
padding-bottom:7px;
color:#444;
border-bottom:1px solid #ddd;
}
.DNNContainer_with_title h2 span{
line-height:18px;
}
/* -------
Media Queries
---------*/
/* #Tablet (Portrait)
------------------- */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width: 748px; }
/* WRAPPER STYLES */
.columns { width:726px; }
/* SET COLUMNS */
.leftPane { width: 181px; }
.contentPane { margin-left:191px; }
.rightPane { width: 181px; }
}
/* #Mobile (Portrait)
------------------- */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.container { width: 280px; }
/* WRAPPER STYLES */
.columns { width:260px;}
/* SET COLUMNS */
.leftPane,
.contentPane,
.rightPane { width:260px; float:none; clear:both; margin-left:0; }
#footer p { font-size: 15px; }
#mainBanner{padding-top:0;}
.searchSite{ margin:10px 0; width:100%;}
#searchSiteInput{width:100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
/*--------------
Menu Bar
---------------*/
.menuBar{
width:100%;
clear:both;
display:inline-block;
height:auto;
margin-bottom:15px;
background: #797979; /* Old browsers */
background: -moz-linear-gradient(top, #797979 0%, #444444 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#797979), color-stop(100%,#444444)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #797979 0%,#444444 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #797979 0%,#444444 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #797979 0%,#444444 100%); /* IE10+ */
background: linear-gradient(to bottom, #797979 0%,#444444 100%); /* W3C */
}
.menuBar h1{width:100%; background:none;}
.menuBar h1 a{position:relative; margin:0 auto; }
.menuBar #dnn_pnav{display:none;}
.menuBar #mobilePnav{
display:inline;
margin:0 15px;
}
.userProperties{background:none;}
}
/* #Mobile (Landscape)
------------------- */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
/* WRAPPER STYLES */
.columns { width:400px;}
/* SET COLUMNS */
.leftPane,
.contentPane,
.rightPane { width:400px; float:none; clear:both; }
}
/* #Clearing
------------------- */
/* Self Clearing Goodness */
.container:after {
content: "\0020"; display: block;
height: 0; clear: both;
visibility: hidden;
}
/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
/*
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.row:after,
.clearfix:after {
clear: both; }
*/
/* You can also use a <br class="clear" /> to clear columns */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}