Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>IFD:Responsive Webdesign – Crash Course - Medien Wiki</title>
</head>
​
​
<body>
​
​
​
<div id="logo1"><a href="http://www.uni-weimar.de"><img src="http://www.uni-weimar.de/medien/wiki/skins/bauhausmedien/logos/uni_wortmarke.jpg" alt="Bauhaus-Universität Weimar" /></a><br /><a href="http://www.uni-weimar.de/cms/medien.html"><img src="http://www.uni-weimar.de/medien/wiki/skins/bauhausmedien/logos/faculty_media.png" /></a></div><!-- logo1 -->
​
​
    </div>
</div>
​
<!-- Sidebar ==================================================================================== -->
<div id="globalnav">
    
        
    <!-- Sidebar Navigation, Search, Toolbox ==================================================== -->
​
    <div class='generated-sidebar portlet' id='p-Startseiten'>
        <ul><li class="level1">Startseiten      <div class='pBody'>
            <ul>
                <li class="level2" id="n-Medien-Wiki"><a href="/medien/wiki/Main_Page">Medien Wiki</a></li>
                <li class="level2" id="n-Elektroakustische-Komposition-..."><a href="/medien/wiki/EKK:Start">Elektroakustische Komposition ...</a></li>
                <li class="level2" id="n-Experimentelles-Radio"><a href="/medien/wiki/RADIO:Start">Experimentelles Radio</a></li>
                <li class="level2" id="n-Experimentelle-Television"><a href="/medien/wiki/EXPTV:Start">Experimentelle Television</a></li>
                <li class="level2" id="n-Gestaltung-medialer-Umgebungen"><a href="/medien/wiki/GMU:Start">Gestaltung medialer Umgebungen</a></li>
                <li class="level2" id="n-Immersive-Medien"><a href="/medien/wiki/IMM:Start">Immersive Medien</a></li>
                <li class="level2" id="n-Interface-Design"><a href="/medien/wiki/IFD:Start">Interface Design</a></li>
                <li class="level2" id="n-Fotowerkst.C3.A4tten-Medien"><a href="/medien/wiki/FOTO:Start">Fotowerkstätten Medien</a></li>
                <li class="level2" id="n-Medien-Ereignisse"><a href="/medien/wiki/ME:Start">Medien-Ereignisse</a></li>
                <li class="level2" id="n-Moden-.26-.C3.B6ffentl.-Erscheinungsbilder"><a href="/medien/wiki/MODEN:Start">Moden &amp; öffentl. Erscheinungsbilder</a></li>
                <li class="level2" id="n-Multimediales-Erz.C3.A4hlen"><a href="/medien/wiki/MME:Start">Multimediales Erzählen</a></li>
            </ul>
        </div>
        </li></ul>
    </div>
    <div class='generated-sidebar portlet' id='p-Wiki_Related'>
        <ul><li class="level1">Wiki Related     <div class='pBody'>
            <ul>
                <li class="level2" id="n-Wintersemester-2014"><a href="/medien/wiki/Category:WS14">Wintersemester 2014</a></li>
                <li class="level2" id="n-Sommersemester-2014"><a href="/medien/wiki/Category:SS14">Sommersemester 2014</a></li>
                <li class="level2" id="n-recentchanges"><a href="/medien/wiki/Special:RecentChanges" title="The list of recent changes in the wiki [r]" accesskey="r">Recent changes</a></li>
                <li class="level2" id="n-newpages"><a href="/medien/wiki/Special:NewPages">New pages</a></li>
                <li class="level2" id="n-help"><a href="/medien/wiki/Help:Editing" title="The place to find out">Help</a></li>
            </ul>
        </div>
        </li></ul>
    </div>
    <div class='generated-sidebar portlet' id='p-Kurse_im_SS_2014'>
        <ul><li class="level1">Kurse im SS 2014     <div class='pBody'>
            <ul>
                <li class="level2" id="n-Semester.C3.BCbersicht"><a href="/medien/wiki/Template:IFD_SS14">Semesterübersicht</a></li>
                <li class="level2" id="n-Mittwochs-Kolloquium"><a href="/medien/wiki/IFD:Kolloq">Mittwochs-Kolloquium</a></li>
                <li class="level2" id="n-Administrating-Data"><a href="/medien/wiki/IFD:AdministratingData">Administrating Data</a></li>
                <li class="level2" id="n-...be-greifbare-Programmierung-II"><a href="/medien/wiki/IFD:Einf%C3%BChrung_in_die_be-greifbare_Programmierung_II">...be-greifbare Programmierung II</a></li>
                <li class="level2" id="n-Eclectric-Electric.21.21"><a href="/medien/wiki/IFD:Eclectic_Electric!!">Eclectric Electric!!</a></li>
                <li class="level2" id="n-Going-Mobile"><a href="/medien/wiki/IFD:GoingMobile">Going Mobile</a></li>
                <li class="level2" id="n-Tangible-Programming-II"><a href="/medien/wiki/IFD:Tangible_Programming_-_An_Introduction_II">Tangible Programming II</a></li>
                <li class="level2" id="n-3-Dimensional-Web-Interfaces"><a href="/medien/wiki/IFD:ThreedimensionalWebinterfaces">3-Dimensional Web-Interfaces</a></li>
                <li class="level2" id="n-Web-Basics-II"><a href="/medien/wiki/IFD:WebBasicsIISS14">Web Basics II</a></li>
            </ul>
        </div>
        </li></ul>
    </div>
    <div class='generated-sidebar portlet' id='p-Vergangenes_Semester'>
        <ul><li class="level1">Vergangenes Semester     <div class='pBody'>
            <ul>
                <li class="level2" id="n-Semester.C3.BCbersicht"><a href="/medien/wiki/Template:IFD_WS13">Semesterübersicht</a></li>
                <li class="level2" id="n-Mittwochs-Kolloquium"><a href="/medien/wiki/IFD:Kolloq">Mittwochs-Kolloquium</a></li>
                <li class="level2" id="n-Apps-With-HTML5"><a href="/medien/wiki/IFD:Mobile_Apps_with_HTML5">Apps With HTML5</a></li>
                <li class="level2" id="n-Eclectic-Electric.21"><a href="/medien/wiki/IFD:Eclectic_Electric!">Eclectic Electric!</a></li>
                <li class="level2" id="n-Generative-Bauhaus-Vorkurs"><a href="/medien/wiki/IFD:GenerativeBauhaus">Generative Bauhaus-Vorkurs</a></li>
                <li class="level2" id="n-Mobile-Media-and-Urban-Species"><a href="/medien/wiki/IFD:Mobile_Media_and_Urban_Spaces_WS13">Mobile Media and Urban Species</a></li>
                <li class="level2" id="n-Nutzerstudien"><a href="/medien/wiki/IFD:Nutzerstudien_WiSe1314">Nutzerstudien</a></li>
                <li class="level2" id="n-Server-Side-Technologies"><a href="/medien/wiki/IFD:Server_side_technologies_for_web-development_WS_13">Server Side Technologies</a></li>
                <li class="level2" id="n-Three-Dimensional-Web-Interfaces"><a href="/medien/wiki/IFD:Three-dimensional_web-interfaces_WS_13">Three-Dimensional Web-Interfaces</a></li>
                <li class="level2" id="n-Web-Basics-I"><a href="/medien/wiki/IFD:Web_Basics_I_WS_13">Web Basics I</a></li>
            </ul>
        </div>
        </li></ul>
    </div>
​
    <!-- Personal Tools ========================================================================= -->
    <div class="portlet" id="p-personal">
        <div class="pBody">
        <ul>    
            <li class="level2">&nbsp;<br/>
            <ul>
                <li class="level3"><a href="/medien/wiki/Special:UserLogin?returnto=IFD:Responsive Webdesign – Crash Course">Log in</a></li>
            </ul>
            </li>
        </ul>
        </div> <!-- id: pBody-->
    </div> <!-- id: portlet.p-personal -->
    
​
</div><!-- id: globalnav ======================================================================== -->
​
​
​
<div id="globalWrapper">
    <div id="column-content">
        
    <div id="content">
      
​
      <div class="yah">
            <!--ul-->
    <a href="/medien/wiki/IFD:Responsive_Webdesign_%E2%80%93_Crash_Course">IFD</a> <!--/li-->|&nbsp;<a href="/medien/wiki/index.php5?title=IFD:Responsive_Webdesign_%E2%80%93_Crash_Course&amp;action=edit" title="This page is protected.&#10;You can view its source [e]" accesskey="e">View source</a> <!--/li-->|&nbsp;<a href="/medien/wiki/index.php5?title=IFD:Responsive_Webdesign_%E2%80%93_Crash_Course&amp;action=history" title="Past revisions of this page [h]" accesskey="h">History</a> <!--/li-->                              
            <!--/ul-->
        </div> 
      <!-- Logos Medien -->
      <div id="mglogos">
<div id="logo2"><a href="http://www.uni-weimar.de/cms/medien/medienkunstmediengestaltung.html"><img src="http://www.uni-weimar.de/medien/wiki/skins/bauhausmedien/logos/media_art_design.png" alt="Media Art & Design" /></a></div><!-- logo2 -->
​
<div id="logo3"><a href="http://web.uni-weimar.de/medien/wiki/IFD:Start">Interface Design / Prof. Dr. Jens Geelhaar</a></div><!-- logo3 --> 
</div>
      
      <!--Medien logos End-->
      
      
        <a name="top" id="top"></a>
                    
        <h1 id="firstHeading" class="firstHeading">IFD:Responsive Webdesign – Crash Course</h1>
        
        <div id="bodyContent">
                        <div id="contentSub"></div>
                                                    
            <!-- start content -->
            
<p><a href="/medien/wiki/Category:Werkmodul" title="Category:Werkmodul">Werkmodul</a> | <a href="/medien/wiki/Category:Fachmodul" title="Category:Fachmodul">Fachmodul</a> <br><i>Lehrperson:</i> <a href="/medien/wiki/Gabriel_Rausch" title="Gabriel Rausch">Gabriel Rausch</a><br><i>Bewertung:</i> 6 <a href="/medien/wiki/ECTS" title="ECTS">ECTS</a>, 4 <a href="/medien/wiki/SWS" title="SWS">SWS</a><br><i>Termin:</i> Monday, 13:30 - 15:45 <br><i>Ort:</i> Marienstr. 7b, room 105<br></p>
<p><i>First meeting:</i> Mo, October 20th 2014
</p>
<p><br></p>
<h2> <span class="mw-headline" id="Schedule">Schedule</span>
</h2>
<ul><li> 20.10.2014 – Introduction
<ul>
<li> <a href="http://doodle.com/kng7ektg4f33d92x" class="external text" rel="nofollow">Find dates...</a>
</li>
<li> <a href="http://wtfmobileweb.com" class="external text" rel="nofollow">WTFmobileWeb</a>
</li>
<li> <a href="http://jsbin.com/donotuqoyo/edit?css,output" class="external text" rel="nofollow">Workaround Mediaqueries</a>
</li>
<li> <a href="http://www.uni-weimar.de/medien/interfacedesign/BU_RWD_Introduction_20141020.pdf" class="external text" rel="nofollow">Intro PDF</a>
</li>
</ul>
</li></ul>
<ul><li> till 20.12.2014 - Prototype <span class="tooltip"><span class="tooltip_abbr">Wiki</span><span class="tooltip_tipwrapper"><span class="tooltip_tip"><span>Haiwaiian for ''fast'' (not an acronym). It is the name for a hypertext system for websites where the user may not only read the content but is also able to change it instantaneously through the browser.</span></span></span></span>
<ul><li> <a href="/medien/wiki/IFD:Responsive_Webdesign_%E2%80%93_Crash_Course/Wiki_Facelift_and_Mobile_Optimization" title="IFD:Responsive Webdesign – Crash Course/Wiki Facelift and Mobile Optimization">Wiki Facelift and Mobile Optimization</a>
</li></ul>
</li></ul>
<ul><li> 1st block : 08.01.2015 16:00 - 22:00
</li></ul>
<ul><li> 2nd block : 15.01.2015 16:00 - 22:00
</li></ul>
<ul><li> 3rd block : 22.01.2015 16:00 - 22:00
</li></ul>
<h2> <span class="mw-headline" id="Description">Description</span>
</h2>
<p>The course is dedicated to all media and design students who have first experience in the basic technologies of web development (<span class="tooltip"><span class="tooltip_abbr">HTML</span><span class="tooltip_tipwrapper"><span class="tooltip_tip"><span>[[HTML|Hypertext Markup Language]]</span></span></span></span>, <span class="tooltip"><span class="tooltip_abbr">CSS</span><span class="tooltip_tipwrapper"><span class="tooltip_tip"><span>[[CSS|Cascading Style Sheets]]</span></span></span></span>, JavaScript Basics ...) and who are interested in further development of their interface designs. 
The term "Responsive Design", which was definied in an article by Ethan Marcotte, has now become a synonym for mobile optimization and includes a bunch of technical solutions to optimize an interface design for a large device target group. While diving into these techical approaches we will recognize that Responsive Design is not the only solution for all interface design optimization methods.
</p>
<p><br></p>
<h2> <span class="mw-headline" id="Beschreibung">Beschreibung</span>
</h2>
<p>Der Kurs richtet sich an alle Studierenden, die schon erste Erfahrung in den Grundlagen-Technologien der Web-Entwicklung haben (<span class="tooltip"><span class="tooltip_abbr">HTML</span><span class="tooltip_tipwrapper"><span class="tooltip_tip"><span>[[HTML|Hypertext Markup Language]]</span></span></span></span>, <span class="tooltip"><span class="tooltip_abbr">CSS</span><span class="tooltip_tipwrapper"><span class="tooltip_tip"><span>[[CSS|Cascading Style Sheets]]</span></span></span></span>, JavaScript-Basics...) und an der weiteren Professionalisierung ihrer Interface-Designs interessiert sind.
Der gestaltungsorientierte Kurs wird dabei die aktuellen Probleme und Lösungen bei der Entwicklung von Web-Interfaces für sämtliche Endgeräte untersuchen. Der Begriff „Responsive Design“, der durch einen Artikel von Ethan Marcotte geprägt wurde, ist mittlerweile als Synonym für die mobile Optimierung geworden und beherbergt ein ganzes Toolset an technischen und gestalterischen Lösungsansätzen, um ein Interface-Design für eine möglichst große Endgerät-Zielgruppe zu optimieren. Der Kurs wird diese Lösungsansätze untersuchen und dabei auch feststellen, dass das „Responsive Design“ nicht der Weisheit letzter Schluss ist und für eine optimale Interface-Entwicklung weit mehr nötig ist, als ein Toolset von Media-Queries.
</p>
<p>Nach einer Kurseinführung zu Semesterbeginn wird der Kurs erst im letzten Dritten des Semesters als Blockveranstaltung weitergeführt.
</p>
​
<!-- 
NewPP limit report
Preprocessor node count: 11/1000000
Post-expand include size: 0/2097152 bytes
Template argument size: 0/2097152 bytes
Expensive parser function count: 0/100
-->
​
<!-- Saved in parser cache with key ifacedb-wki_:pcache:idhash:18645-0!1!0!!en!2!edit=0 and timestamp 20141122100201 -->
<div class="printfooter">
Retrieved from "<a href="http://www.uni-weimar.de/medien/wiki/IFD:Responsive_Webdesign_%E2%80%93_Crash_Course">http://www.uni-weimar.de/medien/wiki/IFD:Responsive_Webdesign_%E2%80%93_Crash_Course</a>"</div>
            <p>&nbsp;</p>
            <div id='catlinks' class='catlinks catlinks-allhidden'></div>           <!-- end content -->
            
                        <div class="visualClear"></div>
            
            <div id="footer">
                        
                         
            <div id="signature"><p>&copy; 2014 Faculty of Media, Bauhaus-Universit&auml;t Weimar - except where stated otherwise / <a href="http://www.uni-weimar.de/cms/index.php?id=5" title="Kontaktseite">Contact</a> / <a href="http://www.uni-weimar.de/cms/index.php?id=49" title="zum Impressum">Imprint</a> / <a href="http://www.uni-weimar.de/medien/wiki/MediaWiki:Privacypage">Privacy</a><br/>If you suspect a copyright violation please contact the <a href="&#x6d;&#97;&#105;&#108;&#116;&#x6f;&#58;&#x6d;&#x69;&#x63;&#x68;&#97;&#101;&#x6c;&#x2e;&#109;&#x61;&#x72;&#107;&#101;&#114;&#x74;&#x40;&#117;&#110;&#105;&#45;&#x77;&#x65;&#105;&#x6d;&#97;&#114;&#46;&#x64;&#x65;">Wiki-Administrator</a></p></div><!-- signature -->                 <ul id="f-list"> 
                    <li>Powered by <a href="http://www.mediawiki.org">MediaWiki</a>. &nbsp; </li>
                                                <li id="viewcount">This page has been accessed 281 times. &nbsp; </li>                          <li id="lastmod"> This page was last modified on 21 October 2014, at 03:07. &nbsp; </li>                </ul> <!-- Served in 0.268 secs. -->            
            <p>&nbsp;</p>
            <p>&nbsp;</p>
​
            </div>  <!-- id:footer -->
​
        </div> <!-- id: bodyContent -->
    </div> <!-- id: content -->
    </div> <!-- id: column-content -->
    
    
    <!-- Site Actions =========================================================================== -->
    <div id="p-cactions" class="portlet">
        <!--h5></h5-->
        <!-- id: pBody-->
    </div> <!-- id: portlet.p-cactions-->
</div> <!-- id: globalWrapper -->   
    
​
​
<div id="extraHTMLBox"></div>
​
</body></html>
​
 
/* @override 
    http://www.uni-weimar.de/cms/fileadmin/medien/templates/_styles.css
    http://localhost:8888/medien/wiki/skins/bauhausmedien/_styles.css?207
*/
​
​
/* Typography*/
@import url(http://fonts.googleapis.com/css?family=Signika+Negative:400,300,600,700);
​
​
/* @group Body */
​
body {
    margin: 0px 0px 0px 0px;
    font-family: "Signika Negative", Verdana, Helvetica, sans-serif;
    font-weight:300;
    font-size: 14px;
    line-height: 19px;
    color: #000;
   padding-left: 15px;
}
    
#content {
    position: absolute;
    margin-left: 285px;
    margin-right: 50px;
}
​
/* @end */
​
/* @group Links */
​
#content a, a:link, a:visited, a:active {
    color: #003366;text-decoration: none; 
}
#content p a{ text-decoration: underline;} 
#content ul a{ text-decoration: underline;} 
#content a:hover {color: #999999;}
 
.csc-textpic-caption {
   font-size: 10px;
   line-height: 12px;
}
​
/* @end */
​
/* @group Headings */
​
h1 {
    border-bottom: medium none;
    color: #333333;
    float: left;
    font-size: 16px;
    font-weight: bold;
    padding: 32px 0 20px 0px;
    text-transform: uppercase;
    width: 100%;
    }
​
h2 {
    color: #222222;
    font-weight: 600; 
    font-size: 13px;
    margin: 30px 0px 4px 0px;
    padding: 2px 8px;
    background-color: #d0d0d0;
}
​
h3 {
    font-weight: bold;
    font-size: 12px;
   }
​
.csc-subheader {
  font-weight: bold; 
  margin: -30px 0px 0px 0px; 
  padding: 0px 0px 5px 24px; 
  color:#666;
}
     
.contenttable
.td-0 {
    border-collapse: collapse;
    vertical-align:top;
    text-align:right;
    padding: 0px 5px 0px 0px;
}
​
/* @end */
​
/* @group Logo */
​
#logo1 {
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    line-height: 14px;
    border: 0px solid black;
}
​
#logo2 {
  float:left;
  width:100%;
    vertical-align: top;
}
​
#logo3 {
    float:left;
    width:100%;
    color: #333333;
    font-size: 12px;
    font-weight: 600;
}
​
/* @end */
​
/* @group Global Navigation */
​
#globalnav {
    background-image: url("../../skins/bauhausmedien/dots_horizontal.gif");
    background-repeat: no-repeat;
    position: absolute;
    margin-left: 7px;
    top: 139px;
}
​
#globalnav a:link, a:active, a:visited {
    color:#5D5247; text-decoration: none;
}
#globalnav a:hover {
    text-decoration: underline;
}
#globalnav ul { 
    list-style: none; padding: 0px 0px 2px; margin: 0px 0px 0px 14px;
}
​
#globalnav li.level1 {
    padding-left: 15px; 
    background-image: url("../../skins/bauhausmedien/dots.gif");
    background-repeat: no-repeat;   
    background-position: 8px 4px; 
    margin-bottom: 5px;
}
#globalnav li.level2
#p-personal.portlet li.level2 {
  font-weight:600;
    padding: 5px 0px 0px 5px; 
    margin-bottom: 0px;
}
#globalnav li.level3 {
    font-size: 9px; padding: 0 0px 0px 16px; margin-bottom: 6px;
    line-height: 8px;
}
​
/* @end */
​
/* @group Fusszeile Signatur */
​
#signature {
  color:#666666; font-size:10px; line-height:14px; 
  margin-top:30px; 
  margin-bottom:20px;
  height:15px;
}
​
/*Links wie Impressum | Kontakt | Suche */
​
#services    {position: absolute; right: 18px; top: 2px;border:0px;}
​
/*
#services ul { margin: 0; padding: 0; text-align: right;}
#services li  { color: #999;list-style: none; display: inline;}
#services a:link, a:active, a:visited  { color: #333;text-decoration: none;}
#services a:hover{text-decoration: underline; }
*/
​
​
​
/* @end */
​
/* @group Drucker Icon */
​
#printer    {position: absolute; left: auto; right: 0px; top: 34px; }
​
​
​
/* @end */
​
/* @group Sprachelemente */
​
#services{
    color:#666; 
    font-size:10px; 
    font-weight:normal;
    text-decoration:none; 
    position:absolute; 
    right:40px; 
    top:50px;
}
#sprache{
    font-size:10px;
    position: absolute; 
    right: 18px; 
    top: 2px;
    border:0px;
}
​
#sprache a.lang_avail_active{
    color:#666; 
    font-weight:bold; 
}
​
#sprache a.lang_avail{
    font-weight:normal;
}
​
#sprache a:link{
    color:#666; 
    text-decoration:none; 
}
​
#sprache a:hover{
    text-decoration:underline; 
}
​
/* @end */
​
/* @group Top Navigation (Where Am I) */
​
#yah, #globalWrapper div.yah {
   font-size: 10px;
    width: 100%;
    margin-bottom: 30px;
}
#yah a:link, a:visited, a:active,
#globalWrapper div.yah a:link, a:visited, a:active {
    color:#333333; text-decoration:none;
    }
#yah a:hover,
#globalWrapper div.yah a:hover {
    text-decoration:underline;
}
​
/* @end */
​
/* @group Sitemap */
​
.csc-sitemap-level1 {
    border-bottom: 1px dotted #cccccc;
    padding: 4px;
    font-weight: bold;
    margin-top: 26px;
    text-decoration:none;
    }
    
.csc-sitemap-level2 {
    line-height: 13px;
    padding: 2px;
    font-weight: normal;
    margin-left: 120px;
    text-decoration:none;
    }
​
.csc-sitemap-level3 {
    font-weight: normal;
    margin-left: 160px;
    text-decoration:none;
}
​
.csc-sitemap-level4 {
    line-height: 12px;
    font-size:10px;
    font-weight: normal;
    margin-left: 180px;
    }
​
/* @group Local Sitemap at the top */
​
/*local sitemap at the top of some pages
.csc-section {
  background-image: url("http://web.uni-weimar.de/medien/wiki/skins/bauhausmedien/arrow_down.gif"); 
  background-repeat: no-repeat; 
  background-position: 0px 6px; 
  padding-left: 20px ;
  line-height: 24px;
  margin-left: 10px;
  text-decoration:none;
}
*/
​
​
/*local sitemap at the top of some pages*/
p.csc-section  {
/*   background-image: url("../../skins/bauhausmedien/arrow_down.gif");  */
  background-repeat: no-repeat; 
  background-position: 0px 6px; 
  padding-left: 20px;
  line-height: 15px;
  margin-left: 10px;
  text-decoration: none;
}
​
​
ul.csc-menu{
/*   list-style-image:url("data_/arrow_down.gif"); */
  padding-left: 18px;
  margin-left: 10px;
  text-decoration: none;     
  margin-bottom:31px;
}
​
li.csc-section{
  height: 22px;
}
​
/* @end */
​
/* @end */
​
/* @group Helper */
​
img {border: 0px;}
.clear { clear: both;}
  
#up {
 width:20px;
 height:40px;
/*  background-image: url("http://web.uni-weimar.de/medien/wiki/skins/bauhausmedien/arrow_up.gif");
 background-repeat: no-repeat;*/
 cursor:pointer;  
}
​
#bodytext .imgright {
    float: right;
    margin-bottom: 1.0em;
    margin-left: 16px;
    }
​
#bodytext .imgleft {
    float: left;
    margin-bottom: 1.0em;
    margin-right: 16px;
    }
​
/* @end */
​
/* @group Listen */
​
#bodytext ol { margin: 0 0 8px 32px; padding: 0;}    
#bodytext ul {}
#bodytext ul li { list-style-type: square; line-height: 16px; padding: 2px 0px 3px 0px;}
​
/* @end */
​
/* @group Rahmen */
​
/*
.csc-frame-frame1{font-size:11px; line-height:15px; background-color:#ffffff;  width:800px;  border: 1px dotted#000000; color: #003366; padding:8px; margin-bottom:10px;}
.csc-frame-frame1 p {background-image: url(http://web.uni-weimar.de/medien/wiki/skins/bauhausmedien/arrow_right.png); background-repeat: no-repeat;  padding: 0 0 10px 16px;}
​
.csc-frame-frame2{font-size:11px; line-height:15px; background-color:#ffcccc;  width:90%;  border: 1px solid #000000; color: #003366; padding:8px;margin-bottom:10px;}
.csc-frame-frame2 p {background-image: url(http://web.uni-weimar.de/medien/wiki/skins/bauhausmedien/arrow_right.png); background-repeat: no-repeat;  padding: 0 0 10px 16px;}
​
.csc-frame-indent  {line-height: 18px; background-color: rgb(247, 169, 0); color: rgb(255, 255, 255); width: 90%; margin-bottom: 40px; padding: 10px;}
.csc-frame-indent p {background-image: url(http://web.uni-weimar.de/medien/wiki/skins/bauhausmedien/arrow_right.png); background-repeat: no-repeat;  padding: 0 0 10px 16px;}
*/
​
/* @end */
​
/* @group Header Startseite */
​
.medien { color:#000066;  font-size: 50px; margin-bottom: 20px; font-weight: bold; padding-bottom:40px; }
​
.pdf {
  background-image: url("../../skins/bauhausmedien/icons/pdf.gif"); 
  background-repeat: no-repeat; 
  background-position: 0 0px; 
  padding-left: 17px;
  margin-bottom: 10px;
  line-height: 16px;    
  }
​
/* @end */
​
/* @group Styles for tx_croncssstyledimgtext */
​
/**********************************************************/
/* default styles for extension "tx_croncssstyledimgtext" */
/*
 * css-styled-imgtext
 *
 *
  Licensed under the GPL, see http://www.gnu.org/copyleft/gpl.html
  (c) the TYPO3 content rendering group
  (c) Ernesto Baschny (ernst@cron-it.de)
*/
​
/* Captions */
P.csc-caption { margin: 0; }
P.csc-caption {
  font-size: 80%; /* Customize me */
}
DIV.csi-caption-c .csi-caption { text-align: center; }
DIV.csi-caption-r .csi-caption { text-align: right; }
DIV.csi-caption-l .csi-caption { text-align: left; }
​
/* Needed for noRows setting */
DIV.csi-textpic DIV.csi-imagecolumn { float: left; display: inline; }
​
/* Border just around the image */
DIV.csi-border DIV.csi-imagewrap .csi-image IMG {
  border: 2px solid black;
  padding: 0px 0px;
}
​
DIV.csi-imagewrap { padding: 0; }
​
DIV.csi-textpic IMG { border: none; }
​
/* DIV: This will place the images side by side */
DIV.csi-textpic DIV.csi-imagewrap DIV.csi-image { float: left; }
​
/* UL: This will place the images side by side */
DIV.csi-textpic DIV.csi-imagewrap UL { list-style: none; margin: 0; padding: 0; }
DIV.csi-textpic DIV.csi-imagewrap UL LI { float: left; margin: 0; padding: 0; }
​
/* DL: This will place the images side by side */
DIV.csi-textpic DIV.csi-imagewrap DL.csi-image { float: left; }
DIV.csi-textpic DIV.csi-imagewrap DL.csi-image DT { float: none; }
DIV.csi-textpic DIV.csi-imagewrap DL.csi-image DD { float: none; }
DIV.csi-textpic DIV.csi-imagewrap DL.csi-image DD IMG { border: none; } /* FE-Editing Icons */
DL.csi-image { margin: 0; }
DL.csi-image DT { margin: 0; display: inline; }
DL.csi-image DD { margin: 0; }
​
/* Clearer */
​
​
​
​
​
​
​
​
​
DIV.csi-clear { clear: both; }
​
​
​
​
/* Margins around images: */
​
/* Pictures on left, add padding on right */
DIV.csi-left DIV.csi-imagewrap .csi-image,
DIV.csi-intext-left-nowrap DIV.csi-imagewrap .csi-image,
DIV.csi-intext-left DIV.csi-imagewrap .csi-image {
  display: inline; /* IE fix for double-margin bug */
  margin-right: 10px;
}
​
/* Pictures on right, add padding on left */
DIV.csi-right DIV.csi-imagewrap .csi-image,
DIV.csi-intext-right-nowrap DIV.csi-imagewrap .csi-image,
DIV.csi-intext-right DIV.csi-imagewrap .csi-image {
  display: inline; /* IE fix for double-margin bug */
  margin-left: 10px;
}
​
/* Pictures centered, add padding left and right */
DIV.csi-center DIV.csi-imagewrap .csi-image {
  display: inline; /* IE fix for double-margin bug */
  margin-left: 5px;
  margin-right: 5px;
}
DIV.csi-textpic DIV.csi-imagewrap .csi-image .csi-caption { margin: 0; }
DIV.csi-textpic DIV.csi-imagewrap .csi-image IMG { margin: 0; }
​
/* Space below each image (also in-between rows) */
DIV.csi-textpic DIV.csi-imagewrap .csi-image { margin-bottom: 5px; }
DIV.csi-equalheight DIV.csi-imagerow { margin-bottom: 5px; display: block; }
​
/* Positioning of images: */
​
/* Above */
DIV.csi-above DIV.csi-text { clear: both; }
​
/* Center (above or below) */
DIV.csi-center { text-align: center; /* IE-hack */ }
DIV.csi-center DIV.csi-imagewrap { margin: 0 auto; }
DIV.csi-center DIV.csi-imagewrap .csi-image { text-align: left; /* Remove IE-hack */ }
DIV.csi-center DIV.csi-text { text-align: left; /* Remove IE-hack */ }
​
/* Right (above or below) */
DIV.csi-right DIV.csi-imagewrap { float: right; }
DIV.csi-right DIV.csi-text { clear: right; }
​
/* Left (above or below) */
DIV.csi-left DIV.csi-imagewrap { float: left; }
DIV.csi-left DIV.csi-text { clear: left; }
​
/* Left (in text) */
DIV.csi-intext-left DIV.csi-imagewrap { float: left; }
​
/* Right (in text) */
DIV.csi-intext-right DIV.csi-imagewrap { float: right; }
​
/* Right (in text, no wrap around) */
DIV.csi-intext-right-nowrap DIV.csi-imagewrap { float: right; clear: both; }
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html DIV.csi-intext-right-nowrap .csi-text { height: 1%; }
/* End hide from IE5/mac */ 
​
/* Left (in text, no wrap around) */
DIV.csi-intext-left-nowrap DIV.csi-imagewrap { float: left; clear: both; }
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html DIV.csi-intext-left-nowrap .csi-text { height: 1%; }
/* End hide from IE5/mac */
​
/* @end */
</li>
​
​
@media only screen and (max-width:1200px){
}
​
@media only screen and (max-width:980px){
   body{
    background:LightGray;
}
  #content {
    position: absolute;
    margin-left: 285px;
    margin-right: 50px;
}
   
}
@media only screen and (max-width:768px){
  body{
    background:white;
}
  #content {
    position: absolute;
    margin-left: 285px;
    margin-right: 50px;
}
  
  #globalnav li.level1 {
    font-weight:600;
}  
  
  #globalnav ul {
    font-weight:300;
}
​
  .pBody ul{
    display: none;
  }
  
#globalnav li.level1:hover > #globalnav li.level1 .pBody ul{
    display: block;
  }
​
}
​
@media only screen and (max-width:480px){
    body{
    background:LightGray;
}
  #content {
    position: absolute;
    margin-left: 285px;
    margin-right: 50px;
}
  
}
}
​
​
​
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
TristanSpiegelpro
0viewers