Alan N. Shapiro, Visiting Professor in Transdisciplinary Design, Folkwang University of the Arts, Essen, Germany

Blog and project archive about transdisciplinary design, media theory and creative coding

AnatoMe Hypermedia System, by Magdalena Fournillier

Comments Off on AnatoMe Hypermedia System, by Magdalena Fournillier

„AnatoMe“ ist ein Programm / eine Applikation zur illustrativen Darstellung der morphologisch fassbaren, krankhaften Veränderung der menschlichen Organe. Das Programm ist in HTML, CSS und PHP geschrieben, die Gliederung und Aufteilung des Programms, so wie die einfache Steuerung durch Selektion sind an den Grundaufbau einer Webseite angelehnt – da ich mir die Möglichkeit einer Webpressentation offen halten wollte. 

Der Aufbau: Durch einfache Selektion bewege ich mich durch das Programm. Ich entscheide mich zu Beginn für ein Geschlecht, danach für eine Altersgruppe. Habe ich diese Selektion getroffen bekomme ich die Illustration meiner Wahl mit Ansicht auf die anatomische Darstellung der Organe. Durch das bewegen der Computer maus über die Illustration kann ich meine weitere Auswahl treffen. Hier- bei wird mir durch den Hover-effect ermöglicht mich für ein Organ meiner Wahl zu entscheiden. Fahre ich mit der Maus über die Leber, erscheint mir die Auswahl „Leber“, bewege ich die Maus auf die Lunge er- scheint die Auswahl „Lunge“… usw. Habe ich mich nun für ein Organ entschieden bekomme ich die Illustration des Gesunden, selektierten Or- gans angezeigt und eine Liste mit möglichen psychischen bzw. pathologischen Veränderungen des Organs. Auch hier treffe ich wieder eine Auswahl. Ich suche mir eine Beliebige Krankheit aus der Liste aus und habe nun die Möglichkeit mir mit Hilfe des Programms jene Krankhafte Veränderung oder Missbildung an dem Organ meiner Wahl anzuschauen.

Zur Darstellung: Alle Bilder und Darstellungen sind Grafisch oder Illustrativ. Vorbild für die Illustrationen und Graphiken sind die medizinischen Studien und Zeichnungen aus Japan in der Zeit der Edo-periode (1603-1868), so wie Illustrationen und aufnahmen aus Europa des 20. Jahrhunderts. Die Illustrationen sind rein Informativ und nur zur visuellen Darstellung und aufzeigung, jedoch nicht zur medizinischen Untersuchung und Analyse geeignet. Sie haben ihren Ursprung in der Faszination für die anatomische Schönheit der Organe und Körper und deren Missbildungen und Veränderungen so wie dem Interesse alter medizinischer Illustrationen und Graphiken und sind somit nicht Medizinischem sondern rein Graphisch/illustrativem Ursprungs.

03

feemale_age.html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>AnatoMe</title>
<meta name=”description” content=””>
<meta name=”viewport” content=”width=device-width”>

<link rel=”stylesheet” href=”css/normalize.min.css”>
<link rel=”stylesheet” href=”css/main.css”>

<!–[if lt IE 9]>
<script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<script>window.html5 || document.write(‘<script src=”js/vendor/html5shiv.js”><\/script>’)</script>
<![endif]–>
</head>
<body>

<div id= “container”>

<div id=”header”>
<h1>ANATOME</h1>
<h2>FEMALE AGE</h2>
<div id=”navigation”><a href=”index.html”>HOME </a> </div>
</div>

<div id=”content”>
<div id=”femaleteenager”><a href=”female_girl.html”><img src=”img/female_teenager.png” alt=”FEMALE TEENAGER”/></a></div>
<div id=”femalewoman”><a href=”female_woman.html”><img src=”img/female_woman.png” alt=”FEMALE WOMAN”/></a></div>
<div id=”femalegranny”><a href=”female_granny.html”><img src=”img/female_granny.png” alt=”FEMALE GRANNY”/></a></div>
</div>
<div id=”footer”><a href=”impressum.html”>IMPRESSUM</a> | <a href=”http://magdalena.fournillier.de”>MAGDALENA FOURNILLIER</a> | <a href=”https://magdalena.fournillier.de/blog/”>BLOG</a> </div>

</div>

</body>
</html>

heart

female_baby.html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>AnatoMe</title>
<meta name=”description” content=””>
<meta name=”viewport” content=”width=device-width”>

<link rel=”stylesheet” href=”css/normalize.min.css”>
<link rel=”stylesheet” href=”css/main.css”>

<!–[if lt IE 9]>
<script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<script>window.html5 || document.write(‘<script src=”js/vendor/html5shiv.js”><\/script>’)</script>
<![endif]–>
</head>
<body>

<div id= “container”>

<div id=”header”>
<h1>ANATOME</h1>
<h2>ANATOMY INFANT</h2>
<div id=”navigation”><a href=”female_age.html”>&lt;BACK</a> | <a href=”index.html”>HOME</a></div>
</div>

<div id=”content”>
<div id=”femalebody”><a href=””><img src=”img/female_body_baby.png” alt=”FEMALE BODY BABY”/></a></div>
</div>

<div id=”footer”><a href=”impressum.html”>IMPRESSUM</a> | <a href=”http://magdalena.fournillier.de”>MAGDALENA FOURNILLIER</a> | <a href=”https://magdalena.fournillier.de/blog/”>BLOG</a> </div>

</div>

</body>
</html>

 

female_body_baby

female_girl.html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>AnatoMe</title>
<meta name=”description” content=””>
<meta name=”viewport” content=”width=device-width”>

<link rel=”stylesheet” href=”css/normalize.min.css”>
<link rel=”stylesheet” href=”css/main.css”>

<!–[if lt IE 9]>
<script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<script>window.html5 || document.write(‘<script src=”js/vendor/html5shiv.js”><\/script>’)</script>
<![endif]–>
</head>
<body>

<div id= “container”>

<div id=”header”>
<h1>ANATOME</h1>
<h2>ANATOMY GIRL</h2>
<div id=”navigation”><a href=”female_age.html”>&lt;BACK</a> | <a href=”index.html”>HOME</a></div>
</div>

<div id=”content”>
<div id=”femalebody”>
<img src=”img/female_body_teenager.png” alt=”FEMALE BODY GIRL” usemap=”#WomanBodyMap”/>
<map name=”WomanBodyMap”>
<area shape=”rect” coords=”160,210,215,345″ href=”female_woman_lung.html” alt=”Lung” title=”Lung”>
<area shape=”rect” coords=”205,260,255,333″ href=”female_woman_heart.html” alt=”Heart” title=”Heart”>
</map>
</div>
</div>

<div id=”footer”><a href=”impressum.html”>IMPRESSUM</a> | <a href=”http://magdalena.fournillier.de”>MAGDALENA FOURNILLIER</a> | <a href=”https://magdalena.fournillier.de/blog/”>BLOG</a> </div>

</div>

</body>
</html>

female_granny.html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>AnatoMe</title>
<meta name=”description” content=””>
<meta name=”viewport” content=”width=device-width”>

<link rel=”stylesheet” href=”css/normalize.min.css”>
<link rel=”stylesheet” href=”css/main.css”>

<!–[if lt IE 9]>
<script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<script>window.html5 || document.write(‘<script src=”js/vendor/html5shiv.js”><\/script>’)</script>
<![endif]–>
</head>
<body>

<div id= “container”>

<div id=”header”>
<h1>ANATOME</h1>
<h2>ANATOMY GRANNY</h2>
<div id=”navigation”><a href=”female_age.html”>&lt;BACK</a> | <a href=”index.html”>HOME</a></div>
</div>

<div id=”content”>
<div id=”femalebody”>
<img src=”img/female_body_woman.png” alt=”FEMALE BODY WOMAN” usemap=”#WomanBodyMap”/>
<map name=”WomanBodyMap”>
<area shape=”rect” coords=”160,210,215,345″ href=”female_woman_lung.html” alt=”Lung” title=”Lung”>
<area shape=”rect” coords=”205,260,255,333″ href=”female_woman_heart.html” alt=”Heart” title=”Heart”>
</map>
</div>
</div>

<div id=”footer”><a href=”impressum.html”>IMPRESSUM</a> | <a href=”http://magdalena.fournillier.de”>MAGDALENA FOURNILLIER</a> | <a href=”https://magdalena.fournillier.de/blog/”>BLOG</a> </div>

</div>

</body>
</html>

 

female_body_teenager

female_body_woman

female_granny

 female_woman.html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>AnatoMe</title>
<script src=”js/prefixfree.js”></script>
<meta name=”description” content=””>
<meta name=”viewport” content=”width=device-width”>

<link rel=”stylesheet” href=”css/normalize.min.css”>
<link rel=”stylesheet” href=”css/main.css”>
</head>
<body>

<div id= “container”>

<div id=”header”>
<h1>ANATOME</h1>
<h2>ANATOMY WOMAN</h2>
<div id=”navigation”><a href=”female_age.html”>&lt;BACK</a> | <a href=”index.html”>HOME</a></div>
</div>

<div id=”content”>
<div id=”femalebody”>
<img src=”img/female_body_woman.png” id=”femalebodyimage” alt=”FEMALE BODY WOMAN” usemap=”#WomanBodyMap”/>
<a href=”female_woman_heart.html” title=”Heart”><img src=”img/heart.png” alt=”heart” id=”femaleheart” class=”organ”/></a>
<map name=”WomanBodyMap”>
<area shape=”rect” coords=”160,210,215,345″ href=”female_woman_lung.html” alt=”Lung” title=”Lung”>
<area shape=”rect” coords=”205,260,255,333″ href=”female_woman_heart.html” alt=”Heart” title=”Heart”>
</map>
</div>
</div>

<div id=”footer”><a href=”impressum.html”>IMPRESSUM</a> | <a href=”http://magdalena.fournillier.de”>MAGDALENA FOURNILLIER</a> | <a href=”https://magdalena.fournillier.de/blog/”>BLOG</a> </div>

</div>

</body>
</html>

female_woman_heart.html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>AnatoMe</title>
<meta name=”description” content=””>
<meta name=”viewport” content=”width=device-width”>

<link rel=”stylesheet” href=”css/normalize.min.css”>
<link rel=”stylesheet” href=”css/main.css”>

<!–[if lt IE 9]>
<script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<script>window.html5 || document.write(‘<script src=”js/vendor/html5shiv.js”><\/script>’)</script>
<![endif]–>
</head>
<body>

<div id= “container”>

<div id=”header”>
<h1>ANATOME</h1>
<h2>ANATOMY WOMAN</h2>
<div id=”navigation”><a href=”female_woman.html”>&lt;BACK</a> | <a href=”index.html”>HOME</a></div>
</div>

<div id=”content”>
<h3>HEART</h3>
</div>

<div id=”footer”><a href=”impressum.html”>IMPRESSUM</a> | <a href=”http://magdalena.fournillier.de”>MAGDALENA FOURNILLIER</a> | <a href=”https://magdalena.fournillier.de/blog/”>BLOG</a> </div>

</div>

</body>
</html>

female_woman_lung.html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>AnatoMe</title>
<meta name=”description” content=””>
<meta name=”viewport” content=”width=device-width”>

<link rel=”stylesheet” href=”css/normalize.min.css”>
<link rel=”stylesheet” href=”css/main.css”>

<!–[if lt IE 9]>
<script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<script>window.html5 || document.write(‘<script src=”js/vendor/html5shiv.js”><\/script>’)</script>
<![endif]–>
</head>
<body>

<div id= “container”>

<div id=”header”>
<h1>ANATOME</h1>
<h2>ANATOMY WOMAN</h2>
<div id=”navigation”><a href=”female_woman.html”>&lt;BACK</a> | <a href=”index.html”>HOME</a></div>
</div>

<div id=”content”>
<h3>LUNG</h3>
</div>

<div id=”footer”><a href=”impressum.html”>IMPRESSUM</a> | <a href=”http://magdalena.fournillier.de”>MAGDALENA FOURNILLIER</a> | <a href=”https://magdalena.fournillier.de/blog/”>BLOG</a> </div>

</div>

</body>
</html>

Impressum.html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>AnatoMe</title>
<meta name=”description” content=””>
<meta name=”viewport” content=”width=device-width”>

<link rel=”stylesheet” href=”css/normalize.min.css”>
<link rel=”stylesheet” href=”css/main.css”>

<!–[if lt IE 9]>
<script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<script>window.html5 || document.write(‘<script src=”js/vendor/html5shiv.js”><\/script>’)</script>
<![endif]–>
</head>
<body>

<div id= “container”>

<div id=”header”>
<h1>ANATOME</h1>
<h2>IMPRESSUM</h2>
<div id=”navigation”><a href=”index.html”> HOME </a> </div>
</div>

<div id=”content”>
<p>Magdalena Fournillier<br/><br/>Vorstadt 25a<br/>61440 Oberursel<br/>magdalena@fournillier.de<br/>01719764863</p>
</div>

<div id=”footer”><a href=”impressum.html”>IMPRESSUM</a> | <a href=”http://magdalena.fournillier.de”>MAGDALENA FOURNILLIER</a> | <a href=”https://magdalena.fournillier.de/blog/”>BLOG</a> </div>

</div>

</body>
</html>

Index.html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>AnatoMe</title>
<meta name=”description” content=””>
<meta name=”viewport” content=”width=device-width”>

<link rel=”stylesheet” href=”css/normalize.min.css”>
<link rel=”stylesheet” href=”css/main.css”>

<!–[if lt IE 9]>
<script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<script>window.html5 || document.write(‘<script src=”js/vendor/html5shiv.js”><\/script>’)</script>
<![endif]–>
</head>
<body>

<div id= “container”>

<div id=”header”>
<h1>ANATOME</h1>
<h2>SEX</h2>
<div id=”navigation”><a href=”index.html”>HOME </a> </div>
</div>

<div id=”content”>
<div id=”female”><a href=”female_age.html”><img src=”img/Female.png” alt=”FEMALE”/></a></div>
<div id=”male”><a href=”male_age.html”><img src=”img/Male.png” alt=”MALE”/></a></div>
</div>

<div id=”footer”><a href=”impressum.html”>IMPRESSUM</a> | <a href=”http://magdalena.fournillier.de”>MAGDALENA FOURNILLIER</a> | <a href=”https://magdalena.fournillier.de/blog/”>BLOG</a> </div>

</div>

</body>
</html>

male_age.html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>AnatoMe</title>
<meta name=”description” content=””>
<meta name=”viewport” content=”width=device-width”>

<link rel=”stylesheet” href=”css/normalize.min.css”>
<link rel=”stylesheet” href=”css/main.css”>

<!–[if lt IE 9]>
<script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<script>window.html5 || document.write(‘<script src=”js/vendor/html5shiv.js”><\/script>’)</script>
<![endif]–>
</head>
<body>

<div id= “container”>

<div id=”header”>
<h1>ANATOME</h1>
<h2>MALE AGE</h2>
<div id=”navigation”><a href=”index.html”>HOME </a> </div>
</div>

<div id=”content”>
<div id=”femaleteenager”><a href=”male_boy.html”><img src=”img/male_boy.png” alt=”MALE BOY”/></a></div>
<div id=”femalewoman”><a href=”male_man.html”><img src=”img/male_man.png” alt=”MALE MAN”/></a></div>
<div id=”femalegranny”><a href=”male_grandpa.html”><img src=”img/female_granny.png” alt=”MALE GRANDPA”/></a></div>
</div>
<div id=”footer”><a href=”impressum.html”>IMPRESSUM</a> | <a href=”http://magdalena.fournillier.de”>MAGDALENA FOURNILLIER</a> | <a href=”https://magdalena.fournillier.de/blog/”>BLOG</a> </div>

</div>

</body>
</html>

male_boy.html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>AnatoMe</title>
<meta name=”description” content=””>
<meta name=”viewport” content=”width=device-width”>

<link rel=”stylesheet” href=”css/normalize.min.css”>
<link rel=”stylesheet” href=”css/main.css”>

<!–[if lt IE 9]>
<script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<script>window.html5 || document.write(‘<script src=”js/vendor/html5shiv.js”><\/script>’)</script>
<![endif]–>
</head>
<body>

<div id= “container”>

<div id=”header”>
<h1>ANATOME</h1>
<h2>ANATOMY BOY</h2>
<div id=”navigation”><a href=”male_age.html”>&lt;BACK</a> | <a href=”index.html”>HOME</a></div>
</div>

<div id=”content”>
<div id=”femalebody”>
<img src=”img/male_body_boy.png” alt=”MALE BODY BOY” usemap=”#WomanBodyMap”/>
<map name=”WomanBodyMap”>
<area shape=”rect” coords=”160,210,215,345″ href=”female_woman_lung.html” alt=”Lung” title=”Lung”>
<area shape=”rect” coords=”205,260,255,333″ href=”female_woman_heart.html” alt=”Heart” title=”Heart”>
</map>
</div>
</div>

<div id=”footer”><a href=”impressum.html”>IMPRESSUM</a> | <a href=”http://magdalena.fournillier.de”>MAGDALENA FOURNILLIER</a> | <a href=”https://magdalena.fournillier.de/blog/”>BLOG</a> </div>

</div>

</body>
</html>

 

01

 

04

 

02

male_grandpa.html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>AnatoMe</title>
<meta name=”description” content=””>
<meta name=”viewport” content=”width=device-width”>

<link rel=”stylesheet” href=”css/normalize.min.css”>
<link rel=”stylesheet” href=”css/main.css”>

<!–[if lt IE 9]>
<script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<script>window.html5 || document.write(‘<script src=”js/vendor/html5shiv.js”><\/script>’)</script>
<![endif]–>
</head>
<body>

<div id= “container”>

<div id=”header”>
<h1>ANATOME</h1>
<h2>ANATOMY GRANDPA</h2>
<div id=”navigation”><a href=”male_age.html”>&lt;BACK</a> | <a href=”index.html”>HOME</a></div>
</div>

<div id=”content”>
<div id=”femalebody”>
<img src=”img/female_body_woman.png” alt=”MALE BODY GRANDPA” usemap=”#WomanBodyMap”/>
<map name=”WomanBodyMap”>
<area shape=”rect” coords=”160,210,215,345″ href=”female_woman_lung.html” alt=”Lung” title=”Lung”>
<area shape=”rect” coords=”205,260,255,333″ href=”female_woman_heart.html” alt=”Heart” title=”Heart”>
</map>
</div>
</div>

<div id=”footer”><a href=”impressum.html”>IMPRESSUM</a> | <a href=”http://magdalena.fournillier.de”>MAGDALENA FOURNILLIER</a> | <a href=”https://magdalena.fournillier.de/blog/”>BLOG</a> </div>

</div>

</body>
</html>

 

06

 

05

male_man.html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>AnatoMe</title>
<meta name=”description” content=””>
<meta name=”viewport” content=”width=device-width”>

<link rel=”stylesheet” href=”css/normalize.min.css”>
<link rel=”stylesheet” href=”css/main.css”>

<!–[if lt IE 9]>
<script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<script>window.html5 || document.write(‘<script src=”js/vendor/html5shiv.js”><\/script>’)</script>
<![endif]–>
</head>
<body>

<div id= “container”>

<div id=”header”>
<h1>ANATOME</h1>
<h2>ANATOMY GRANDPA</h2>
<div id=”navigation”><a href=”male_age.html”>&lt;BACK</a> | <a href=”index.html”>HOME</a></div>
</div>

<div id=”content”>
<div id=”femalebody”>
<img src=”img/female_body_woman.png” alt=”MALE BODY GRANDPA” usemap=”#WomanBodyMap”/>
<map name=”WomanBodyMap”>
<area shape=”rect” coords=”160,210,215,345″ href=”female_woman_lung.html” alt=”Lung” title=”Lung”>
<area shape=”rect” coords=”205,260,255,333″ href=”female_woman_heart.html” alt=”Heart” title=”Heart”>
</map>
</div>
</div>

<div id=”footer”><a href=”impressum.html”>IMPRESSUM</a> | <a href=”http://magdalena.fournillier.de”>MAGDALENA FOURNILLIER</a> | <a href=”https://magdalena.fournillier.de/blog/”>BLOG</a> </div>

</div>

</body>
</html>

 

 

Male

 

07

 

 

male_body_boy

 

 

 

male_body_man

 

08

 

male_man

 

 

 main.js

/* ==========================================================================
HTML5 Boilerplate styles – h5bp.com (generated via initializr.com)
========================================================================== */

html,
button,
input,
select,
textarea {
color: #222;
}

body {
font-family: “Gill Sans”, “Gill Sans MT”, Calibri, sans-serif;
font-size: 1em;
line-height: 1.4;
}

::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}

::selection {
background: #b3d4fc;
text-shadow: none;
}

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: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author’s custom styles
========================================================================== */

#container {
margin: 0 auto;
min-height: 1820px;
width: 1020px;
background: #fff;
}

#header {
float: left;
margin-top: 150px;
width: 1020px;

}

#content {
float: left;
min-height: 1000px;
width: 1020px;
}

#content p {
color: #585858;
font-size: 0.938em;
}

#footer {
color: #585858;
font-size: 0.625em;
float: left;
height: 25px;
padding: 0 10px;
width: 1000px;
}

#header h1,h2 { font-family: “Gill Sans”, “Gill Sans MT”, Calibri, sans-serif;
}

#header h1 {
margin: 0 0 20px 0;
font-weight: normal;
font-size: 3.125em;
text-align: center;

}

#header h2 {
color: #585858;
font-weight: lighter;
font-size: 0.938em;
margin: 0 0 25px 0 ;
text-align: center;
}

#navigation {
color: #585858;
font-size: 0.625em;
font-weight: normal;
text-align: center;
}

#navigation a, a:visited, a:link {
color: #585858;
text-decoration: none;

}

#navigation a:hover {
color: #000000;
}

#female {
float: left;
height: 550px;
margin: 100px 0 0 0;
width: 360px;

}

#male {
float: right;
height: 550px;
margin: 100px 0 0 0;
width: 360px;

}

#footer a, a:visited, a:link {
color: #585858;
font-size: 0.625em;

}

#footer a:hover {
color: #000000;
}

#femalebaby {
float: left;
height: 800px;
margin: 100px 0 0 0;
width: 255px;

}

#femaleteenager {
float: left;
height: 800px;
margin: 100px 0 0 127px;
width: 255px;

}

#femalewoman {
float: left;
height: 800px;
margin: 100px 0 0 0;
width: 255px;
}

#femalegranny {
float: left;
height: 800px;
margin: 100px 0 0 0;
width: 255px;

}

#femalebody {
height: 1000px;
width: 400px;
margin: 100px auto 0 auto;
}
/* ==========================================================================
Media Queries
========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {

}

/* ==========================================================================
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: #000 !important; /* Black prints faster: h5bp.com/s */
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;
}

@page {
margin: 0.5cm;
}

p,
h2,
h3 {
orphans: 3;
widows: 3;
}

h2,
h3 {
page-break-after: avoid;
}
}

Comments are closed.