Updates

* Corrects emoji default styles;
* Corrects a little gap before the footer-modal due to the 'display-inline' property;
* Corrects default width of the modal boxes;
* Reduces the file size by removing some uncessary rules.
* Adds ul styles support into the main content of the modal boxes;
* Adds some styles into the sample template.css;
* Updates the readme file with a sample of this compoment integration into the default Textpattern template.;
* Adds a screen shot for the custom template.css file.

README.md

@@ -59,10 +59,18 @@ An independant `demo.html` file with full styles is available for integration ex
 Remove all the code between `<style>` and `</style>` from the `demo.html` page, then add before the final `</head>` tag:
 
     <link rel="stylesheet" href="css/modal-box.min.css" media="screen">
+	<!-- Facultative: for optional elements -->
     <link rel="stylesheet" href="css/custom.min.css" media="screen">
+	<!-- Sample custom colors styling (overwrite default) -->
     <link rel="stylesheet" href="css/template.css" media="screen">
 
-![Template sample](https://github.com/cara-tm/modal_box/raw/master/template.png "The sample Template result")
+![Template sample](https://github.com/cara-tm/modal_box/raw/master/template.png "The sample Template result").
+
+## Integration example
+
+Here is an integration test within the default Textpattern template (v 4.7-dev) without any kind of conflicts even by putting the modal's styles at the beginning of the default.css file:
+
+![TXP intégration sample](https://github.com/cara-tm/modal_box/raw/master/txp-integration.png "The sample Template result").
 
 ## IE 8 and below support
 

css/custom.css

@@ -81,13 +81,12 @@ span[class*="-sign"] {
 	vertical-align: middle;
 	text-align: center;
 	color: #fff;
-	font: normal normal normal 22px/28px Arial, sans-serif
+	font: normal normal normal 22px/28px 'Cambria Math', 'Apple Symbols'
 }
 
 span[class*="-sign"] strong {
     display: -moz-inline-box;
-    display: inline-block;
-	font-family: 'Cambria Math', 'Apple Symbols'
+    display: inline-block
 }
 
 /**

css/modal-box.css

@@ -285,23 +285,27 @@ body .modal-dialog {
 
 	overflow-y: visible;
 	overflow-y: auto;
-	display: inline-block;
-    width: auto;
+
+	display: block;
+
+    width: 94.25%;
+	width: auto;
+	width: calc(100% - 41px);
 
     /* List of gracefull degradation max height */
 	max-height: 14em;
 	max-height: 47vh;
 
 	height: 90%;
 	margin: 0;
-	padding: 5px 20px 50px 20px;
+	padding: 5px 20px 20px 20px;
     border-right: 1px solid #eee;
     border-left: 1px solid #eee;
-    color: #212121
+    color: #212121;
+	hyphens:auto
 }
 
 .modal-dialog .modal.modal-message {
-    margin-bottom: 0;
     border: 1px solid #eee;
 
     -webkit-border-radius: 6px 6px 0 0;
@@ -310,11 +314,7 @@ body .modal-dialog {
 	border-radius: 6px 6px 0 0
 }
 
-.modal-dialog .modal.modal-message .inner-dialog {
-    width: 90%;
-    padding: 5px 10px 5px 20px;
-    border: none
-}
+.modal-dialog .modal.modal-message .inner-dialog {border: 0}
 
 /**
  * Prevent headings resizing
@@ -328,18 +328,12 @@ body .modal-dialog {
 /**
  * Restores the paragraph font size
  */
-.modal-dialog .inner-dialog p {
+.modal-dialog .inner-dialog p,
+	.modal-dialog .inner-dialog ul {
 	font-size: 85%;
-	line-height: 1.5;
-    hyphens: auto
+	line-height: 1.5
 }
 
-:-webkit-any(.modal-dialog) p {font-size: 85%}
-
-:-moz-any(.modal-dialog) p {font-size: 85%}
-
-:matches(.inner-dialog) p {font-size: 85%}
-
 /**
  * The footer of the modal box
  */
@@ -350,7 +344,6 @@ body .modal-dialog {
 	height: 3em;
     height: 3rem;
 
-	margin: -2.5px auto 0;
 	background: #0288d1;
 	text-align: right;
     border-right: 1px solid #0288d1;