/**********************************
*** Stylesheet for Nicole Nufer ***
***********************************/

/*
 ---- Define the base font ----
*/
 @font-face {
    font-family: BaseFont;
    src: url(fonts/MyriadPro-Regular.otf) format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: BaseFont;
    src: url(fonts/MyriadPro-Semibold.otf) format('opentype');
    font-weight: bold;
    font-style: normal;
}
/*
 ---- Define the font for the title ----
*/
 @font-face {
    font-family: TitleFont;
    font-style: normal;
    src: url(fonts/PalatinoLinotypeItalic.ttf) format('truetype');
    font-weight: normal;
}
body {
    font-family: BaseFont, Helvetica, Arial, sans-serif;
    font-size: 12pt;
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: rgb(113, 113, 116);
}
::-moz-selection {
    background: rgb(179, 212, 252);
    text-shadow: none;
}
::selection {
    background: rgb(179, 212, 252);
    text-shadow: none;
}
.clearfix {
    *zoom: 1;
}
.clearfix:before, .clearfix:after {
    display: table;
    line-height: 0;
    content:"";
}
.clearfix:after {
    clear: both;
}
hr {
    border: none;
    border-bottom: 1px solid #888;
}
a {
    text-decoration: none;
    color: rgb(113, 113, 116);
}
a.link {
    margin: 0;
    line-height: 15.5pt;
    color: rgb(238, 46, 36);
}
a.link:hover {
    text-decoration: underline;
}
ul {
    margin-top: 0;
    padding-left: 0;
}
img {
    border-radius: 8px;
}
.title-font {
    font-family: TitleFont, Helvetica, Arial, sans-serif;
}
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}
.wrapper > div.content > div {
    float: left;
    clear: none;
}

/*
 ---- Site-Wide Styling ----
*/

.accent {
    color: rgb(238, 46, 36);
}
/*
 ---- NavBar Stuff ----
*/
nav ul {
    list-style:none;
}
nav li {
    float:left;
    position:relative;
    padding-right:10px;
    display:block;
}
nav li ul {
    display:none;
    position:absolute;
    /*
    box-shadow: 1px 1px 3px #666;
    border-radius: 3px;
    */
    height:auto;
    width:12em;
    background-color: #FFF;
}
nav li:hover ul {
    display:block;
}
nav li ul li {
    clear:both;
    border-style:none;
}
nav > ul li a {
    text-decoration: none;
}
nav > ul li a:hover {
    text-decoration: none;
}
nav {
    display: block;
    width: 93%;
    padding-left: 7%;
    padding-top: 15px;
}
a.current {
    color: rgb(238, 46, 36);
}
nav a {
    margin-right: 16px;
    border-bottom: none;
    padding: 4px auto;
}
nav a:hover {
    color: #000;
    border-bottom: 1px solid black;
}
nav a.current:hover {
    color: rgb(218, 26, 16);
    border-bottom-color: rgb(218, 26, 16);
}
#biglogo {display: none;}
#logo {
    position: absolute;
    display:block;
    width:4.2%;
    padding-left:2%;
    clear:left;
}
.splash {
	position: absolute;
	left: 7%;
	width: 65.1%;
	height: auto;
	z-index:-1;
}
#slogan {
    padding-top: 1%;
}
#splashpic {
    padding-top: 7%;
}
div.content {
    padding-top: 7%;
    width: 93%;
    padding-left: 7%;
}
div.content.index img {
    width: 100%;
    height: auto;
}
div.aside {
    width: 20%;
}
div.aside > img {
    width: 100%;
}
div.main {
    width: 77%;
    padding-left: 3%;
}
div.title {
    font-family: TitleFont, Helvetica, Arial, sans-serif;
    font-weight: 100;

}
div.title > h1, h2 {
    margin: 0;
    font-size: 40pt;
    line-height: 40pt;
    font-weight: normal;
    hyphens: auto; 
}
div.title > h1 {
    color: rgb(238, 46, 36);
    margin-top: -10px;
}
div.text, div.title {
    width: 70%;
    padding-right: 30%;
}
div.text p {
    line-height: 15.5pt;
    hyphens: auto; 
}
/*
 ---- Persoenlichkeitsentwicklung Special ----
*/
#pentw.main ul {
	font-family: TitleFont, Helvetica, Arial, sans-serif;
	font-size: 48px;
	font-weight: normal;
	padding-left: 40px;
	list-style-image: url("img/triangle.png");
}
#pentw.main ul span {
	font-size: 36px;
}
#pentw.main ul li {
	margin-bottom: 20px;
}
#pentw.main > ul a:hover {
	border-bottom-color: rgb(0, 0, 0);
	border-bottom-style: solid;
	border-bottom-width: 1px;
	color: rgb(0, 0, 0);
}
@media (max-width:750px) {
	#pentw.main ul li {
		margin-bottom: 10px;
	}
}
@media (max-width:520px) {
	#pentw.main ul {
		font-size: 24px;
		padding-left: 40px;
		list-style-image: url("img/small_triangle.png");
	}
	#pentw.main ul span {
		font-size: 18px;
	}
	#pentw.main ul li {
		margin-bottom: 10px;
	}
}
/*
 ---- Responsive Stuff ----
*/
h1#verymobile{ display: none; }

@media (max-width:1000px) {
	#logo {
		width: 5.3%;
		padding-left: .7%;
		top: 15px;
	}
    .content div.main {
    	width: 100%;
		padding: 0;
	}
    .content .main div.text, .content .main div.title {
    	padding-right: 10px;
    	width: auto;
    }
    .content div.aside{
    	display: none;
    }
    nav li:hover ul {
    	display: none;
    }
    /* commented out due to no slogan in use
    #slogan {
    	padding-top: 4em;
    }
    
    #splashpic {
    	padding-top: 8.5em;
    }*/
    .splash {
    	width: 86%;
    	height: auto;
    	z-index:-1;
    }
}
@media (max-width:700px) and (min-width:520px) {
	h1#verymobile {
		display: block;
	}
	h1#nonmobile {
		display: none;
	}
}
@media (max-width:520px) {
    nav {
        height: 110px;
        background-color: lightgray;
    }
    #logo {
    	display: none;
    }
    #biglogo {
    	padding: 5px 41%;
    	width: 18%;
    	display: block;
    }
    nav li {
    	width: 47.5%;
		margin: 0px 0 .5em;
		padding-right: 2.5%;
	}
	nav li a {
		color: black;
		margin-right: 0px;

	}
	div.title > h1, h2 {
	    font-size: 2em;
	    line-height: 1em;
	}
	#slogan {
		padding-top: 2em;
	}
	#splashpic {
		padding-top: 0px;
	}
	.splash {
		position: relative;
	}
}
@media (max-width:400px) {
	nav {
	    height: 190px;
	}
    nav li {
    	width: 90%;
    }
    h1#verymobile {
    	display: block;
    }
    h1#nonmobile { 
    	display: none;
    }
}