/* common.css - Mobile Theme for my personal website http://mobi.heavy.ch

@copyright: 2009 by MarcelHaefner (http://moinmo.in/MarcelH%C3%A4fner)
@license: GNU GPL, see http://rock.heavy.ch/wiki/COPYING for details.

History:
  * 2009-03-27: Version 0.1 - Initial Version 
  
 Future:
 * This is not yet finished; I guess there are also some more elements where needs some tweaks and adjusts 
   ( like the textarea for editing wiki pages)
 * It would be better if we could just use the media type "handheld" to embend a overwriting css script. 
    like {{{  <link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" /> }}}.
    Well this is something to try for the futuere...
 * Need to check with my Android Browser (Safari) if it is a benefit to split this stuff into common, 
    screen and print. For the momement everything is here in the common.css and the others are zero.
 
  */
  
  
/* LOGO */
#logo {
    font-size:150%;
    font-weight: bold;
    background-color: silver;
    }

    
/* USERNAME */
#username {
		padding: 0em;
		margin: 0em;
        margin-top: 8px;
}
#username li {
	display: inline;
}
#username li:after {
    content: " | ";
}
#username li:last-child:after {
    content: "";
}


/* EDITBAR */
.editbar {
    	background-color: silver;
}


/* PAGELOCATION */
#pagelocation {
		padding: 0em;
		margin: 0em;
        font-size:150%;
	    font-weight: bold;
}
#pagelocation li {
	display: inline;
}
/* XXX Warning: non-ascii characters! */
#pagetrail li:after {
    content: " » ";
}
*[dir="rtl"] #pagetrail li:after {
    content: " « ";
}
#pagetrail li:last-child:after {
    content: "";
}
#pagelocation li:after {
    content: "/";
}
*[dir="rtl"] #pagelocation li:after {
    content: " \\ "; /* TODO: check what looks best with RTL */
}
#pagelocation li:last-child:after {
    content: "";
}


/* MESSAGE */
#message {
    background-color: silver;
    padding: 0em 0.25em;
}


/* PAGETRAIL */
#pagetrail {
		padding: 0em;
		margin: 0em;
		font-size: 75%;
		font-style: italic;
}
#pagetrail li {
	display: inline;
}


/* FOOTER */
#footer, #footer a {
    background-color: silver;
    color: white;
}
#credits {
	font-size:80%;
	margin: 0em;
	padding: 0em;
	font-style: italic;
}
#credits li {
	display:inline;
	margin:0.25em;
}


/* SEARCHFORM */
#searchform {
    margin: 16px 0px;
}


/* EDIT */
#editor-textarea {
    max-width: 100%;
    }

    
/* CONTENT */
.sidebar {
    border: 1px solid gray;
    padding: 0.50em;
    font-size: 75%;
    }
#pageinfo, #pageinfo a {
    font-size: 75%;
    color: silver;
    }
table.tip {
    background-color: silver;
    border: 1px solid black;
    color: black;
    }
img.icon { /*we don't want display icons , only content related images are allowed*/
    display: none;
    }
.youtube { /*on mostly phones you tube flash dont' work, so don't display them! */
    display: none;
    }
div.monthcalendar div { 
    /*this is a very ugly solution, but I do have troubles with this "div" to show correctly on my small handheld display */
    left:5px !important;
    position:absolute !important;
    top:224px !important;
    width: 50%;
    }
pre {
    white-space:pre-wrap;
    }
dt {
    font-weight: bold;
    }
img.icon {
	margin: 0px 5px 5px 0px;
	}
img.photo, img.foto {
	margin: 10px;
	padding: 5px 5px 12px 5px;
	border: 1px solid black;
	background-color: white;
	max-width: 250px;
    }
img.big, img.gross {
    max-width: 250px;
    }
img.medium, img.mittel {
    max-width: 150px;
    }  
img.small, img.klein {
    max-width: 50px;
    }
.album, .cover {
	margin: 5px;
	border: 3px solid white;
	width: 150px;   
	}
.clear, .loeschen {
	clear: both;
    }
    
